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 浏览器中，即使模拟点击创建的元素没有附加到页面上，也可以触发下载，但在 Firefox 浏览器中，这是不可能的。所以上面的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，那么URL就不再指向图片了。

　　window.URL.revokeObjectURL(objectURL);

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