js抓取网页内容(前端侧对于动态生成的内容进行下载的实时截图下载 )

　　js抓取网页内容(前端侧对于动态生成的内容进行下载的实时截图下载

)

　　有时需要在前端下载动态生成的内容，比如页面上的某条文字信息，或者分享页面的时候，希望分享的图片是页面内容的实时截图. 此时，图像是动态的。纯 HTML 显然不能满足我们的需求。借助JS和其他一些HTML5功能，例如将页面元素转换为画布，然后转换为图片以供下载。

　　原理其实很简单。我们可以借助Blob将文本或JS字符串信息转换成二进制，然后作为元素的href属性，配合download属性实现下载。

　　代码也比较简单，如下图（兼容Chrome和Firefox）：

function funcDownload (content, filename) {

// 创建隐藏的可下载链接

var eleLink = document.createElement('a');

eleLink.download = filename;

eleLink.style.display = 'none';

// 字符内容转变成blob地址

var blob = new Blob([content]);

eleLink.href = URL.createObjectURL(blob);

// 触发点击

document.body.appendChild(eleLink);

eleLink.click();

// 然后移除

document.body.removeChild(eleLink);

}

function dn (){

var ss = document.querySelector('html').outerHTML;

funcDownload(ss, 'ceshi.html')

}

　　其中，content是指需要下载的文本或字符串内容，filename是指下载到系统的文件名。

　　以上代码可以将当前整个网页下载为html文件，但是网页内外的部分资源无法显示。

　　在Chrome浏览器中，模拟点击创建的元素即使没有追加到页面中也能触发下载，但在火狐浏览器中不起作用。所以上面的funDownload()方法有一个appendChild和removeChild处理，是为了兼容火狐浏览器。

　　1、URL.createObjectURL() 方法会根据传入的参数创建一个指向参数对象的URL。这个URL的生命周期只存在于创建它的文档中，新的对象URL指向执行的 File 对象。或者一个 Blob 对象。

　　objectURL = URL.createObjectURL(blob || file);

　　参数：文件对象或 Blob 对象。这里可能是 File 对象和 Blob 对象：

　　文件对象：它是一个文件。例如，如果我上传一个带有 input type="file" 标签的文件，那么其中的每个文件都是一个 File 对象。

　　Blob 对象：它是二进制数据。比如new Blob()创建的对象就是一个Blob对象。比如在XMLHttpRequest中，如果responseType指定为blob，那么得到的返回值也是一个blob对象。

　　注意：每次调用 createObjectURL 时，都会创建一个新的 URL 对象。即使您为同一个文件创建了 URL。如果你不再需要这个对象，要释放它，你需要使用 URL.revokeObjectURL() 方法。当页面关闭时，浏览器会自动释放它，但为了保证良好的性能和内存使用，应该在保证不再使用时释放它。

　　2、URL.revokeObjectURL() 方法将释放由 URL.createObjectURL() 创建的对象 URL。当您使用了对象 URL 时，您必须让浏览器知道该 URL 不再需要指向相应的 URL。该方法需要在安装文件时调用。具体含义是一个对象URL可以使用这个url访问指定的文件，但我可能只需要访问一次。一旦被访问，对象 URL 就不再需要，并且被释放和释放。将来，对象 URL 将不再指向指定的文件。例如，对于一张图片，我创建了一个对象 URL，然后通过这个对象 URL，我将图片加载到我的页面上。既然已经加载好了，就不用再加载这张图片了，那我就放出对象的URL。

　　window.URL.revokeObjectURL(objectURL);

//objectURL 是一个通过URL.createObjectURL()方法创建的对象URL.