浏览器兼容性(四):本地下载

风晴雪sheep

问题描述

IE 浏览器进行本地下载时,控制台提示 "此页上的代码禁用了反向和正向缓存"
(注:开发环境Angular8.1.0ng-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里,若指定 responseTypeblob,那么得到的返回值也是一个blob对象。

2) URL.createObjectURL()

  • 参数object:用于创建 URLFile 对象、Blob 对象或 MediaSource 对象。
  • 返回值:生成的对象URL. 通过这个URL,可以获取到所指定文件的完整内容
 // objectURL格式 blob:http://XXX
objectURL = URL.createObjectURL(object);
// objectURL 生命周期和创建它的窗口中的 document 绑定, 只能应用内部使用
window.URL.revokeObjectURL(objectURL); // 不需要时释放内存
阅读 2.1k
8 声望
5 粉丝
0 条评论
8 声望
5 粉丝
文章目录
宣传栏