找回密码
 新建账号

window.URL.createObjectURL Blob URL无法在Microsoft IE和Edge中打开

[复制链接]
php 发表于 2017/8/23 00:27 | 显示全部楼层 |阅读模式
window.URL.createObjectURL()可以直接生成blob:开头的链接,该链接产生于浏览器端,不会占用服务器资源。
window.URL.createObjectURL()在IE10, IE11以及Microsoft Edge中生成的blob:链接,你不能把它加到一个<a>节点上,也不能直接在浏览器地址栏打开访问,并且得到“Error: 拒绝访问。”错误。open links made by window.URL.createObjectURL in IE/Edge这样的提问到处都是,IE9根本不支持window.URL.createObjectURL创建Blob URLs就更惨了。
Microsoft Internet Explorer / Microsoft Edge和高大上的Google Chrome / Mozilla Firefox对于window.URL.createObjectURL创建Blob链接最直观的区别在于得到的blob:链接形式不一样,分别在微软浏览器和标准浏览器中运行以下代码,得到两种Blob链接形式,第一种为chrome和firefox生成的带有当前域名的标准blob:链接形式,第二种为Microsoft IE和Microsoft Edge生成的不带域名的blob:链接。可以通过window.URL.createObjectURL(new Blob()) . indexOf(location.host) < 0来检测是否是IE或早期生成Object URL不带域名的Edge。如果表达式返回true则时IE或Edge旧版本。
  1. var blob = new Blob(['domain: www.wuxiancheng.cn'], {"type":"text/plain"});
  2. var url = window.URL.createObjectURL(blob);
  3. console.log(url);
  4. var link = document.createElement('a');
  5. link.href = url;
  6. link.target = '_blank';
  7. document.body.appendChild(link);
  8. link.click();
复制代码
  1. blob:https://www.wuxiancheng.cn/86e01467-6654-4b74-98b3-ca25f396bc2f
复制代码
  1. blob:242CACD6-06D5-4145-A6DA-55DBE47409DB
复制代码
解决IE和Edge无法打开Blob URL链接的方法,就是使用微软自己的另一套系统,叫做window.navigator.msSaveOrOpenBlob(blob, filename),这个方法可以将数据生成为文件供浏览器下载为指定的文件名,其中的参数blob就是Blob对象,filename是希望将Blob URL保存的文件名,以下是一个简单示例,IE Edge window.URL.createObjectURL() polyfill,具体细节可以去参考微软官方文档,这种不标准的玩意我也不想多做解释。
  1. if('msSaveOrOpenBlob' in navigator){
  2.         // Microsoft Edge and Microsoft Internet Explorer 10-11
  3.         window.navigator.msSaveOrOpenBlob(blob, filename);
  4. }else{
  5.         // standard code for Google Chrome, Mozilla Firefox etc
  6.         // ......
  7. }
复制代码

手机版|轻松E站

GMT+8, 2024/11/21 16:39

快速回复 返回顶部 返回列表