浏览器兼容性（四）：本地下载

问题描述

IE 浏览器进行本地下载时，控制台提示 "此页上的代码禁用了反向和正向缓存"
(注：开发环境Angular8.1.0，ng-zorro-antd：~8.0.2，前端容器nginx：1.10.1。)

经常使用下载方法及不足

1）document.execCommand()

• 不足：前提需获取到图片的src，若使用插件生成的是canvas，只能获取到它的canvas.toDataURL() base64位码，则使用该方法无效。

pic = window.open('', "_blank", "") ;
pic.document.execCommand("saveAs", false, name); // 只有IE6，7，8支持

2）download

• 不足：没法对动态生成的内容进行下载，如页面上某一段文本信息或页面的实时截图等。

function download(localImage, filename) {
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = localImage;
  a.download = filename;
  a.click();
  document.body.removeChild(a);
}

兼容性解决方案

• IE浏览器：window.navigator.msSaveBlob()
• 谷歌、火狐等浏览器：new Blob() , window.URL.createObjectURL()
• 思路：将图片地址利用 canvas 获取 base64 格式文件，再由 base64 转换为 blob 类型，最后利用URL.createObjectURL() 方法获取 blob 文件的地址，此类型地址传入 a 标签可实现直接下载。

saveToHtml(sText) {
    try {
        this.exportHtml(this.setting.fileName + '.html', sText);
    } catch (err) {
        alert("Error parsing html:\n" + err.message);
    }
}

exportHtml(name, data) {
    let urlObject = window.URL || window['webkitURL'] || window;
    // 将文本或者JS字符串信息借助Blob转换成二进制
    let export_blob = new Blob([data]);
    if (navigator.userAgent.indexOf("Trident") > -1) {
        window.navigator.msSaveBlob(export_blob, name);
        // window.navigator.msSaveOrOpenBlob(export_blob, name);
    } else {
        // 做为`<a>`元素的`href`属性，配合`download`属性，实现下载
        let save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
        save_link['href'] = urlObject.createObjectURL(export_blob);
        save_link['download'] = name;
        let ev = document.createEvent("MouseEvents");
        ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        save_link.dispatchEvent(ev);
    }
}

其余

1) new Blob([data])

• 用来建立 URL 的 file 对象或者 blob 对象
• File对象：是一个文件。好比用input type="file"标签来上传文件，那么里面的每一个文件都是一个File对象。
• Blob对象：是相似文件对象的二进制数据。在XMLHttpRequest里，若指定 responseType 为 blob，那么获得的返回值也是一个blob对象。

2) URL.createObjectURL()

• 参数object：用于建立 URL 的 File 对象、Blob 对象或 MediaSource 对象。
• 返回值：生成的对象URL. 经过这个URL,能够获取到所指定文件的完整内容

// objectURL格式 blob:http://XXX
objectURL = URL.createObjectURL(object);
// objectURL 生命周期和建立它的窗口中的 document 绑定, 只能应用内部使用
window.URL.revokeObjectURL(objectURL); // 不须要时释放内存