前端侧对于动态生成的内容进行下载的实时截图下载

　　前端侧对于动态生成的内容进行下载的实时截图下载

　　有时需要在前端下载动态生成的内容，比如页面上的某条文字信息，或者分享页面的时候，希望分享的图片是实时截图的页面内容。这时候这张图是动态的，纯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指向执行的文件对象或 Blob 对象。

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

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

　　File 对象：它是一个文件。例如，如果我上传一个带有 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 不再需要指向 When对应的文件，需要调用这个方法。具体含义是一个对象URL可以使用这个url访问指定的文件，但我可能只需要访问一次。一旦被访问，对象 URL 就不再需要，并且被释放和释放。将来，对象 URL 将不再指向指定的文件。例如，对于一张图片，我创建了一个对象 URL，然后通过这个对象 URL，我将这张图片加载到我的页面上。既然已经加载好了，就不用再加载这张图片了，那我就放出对象的URL。那么网址就不再指向这张图片了。

　　window.URL.revokeObjectURL(objectURL);

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