移动Safari下载问题:该操作无法完成。 (webkitblo

2020-11-26  本文已影响0人  流泪手心_521

1.之前的下载方法
附近的结构

<div class="append" v-if="contentDetail.announceAppendixList!=null">
   <div class="append_title">
     <div class="uploadName">附件:</div>
     <div class="append_detail_box">
       <div class="append_detail" v-for="(append,index) in contentDetail.announceAppendixList.announceAppendixList" :key="index" @click="downLoad(append)">
         {{append.appendixName}}
       </div>
     </div>
   </div>
 </div>

2.js

downLoad(append) {
      download(append.appendixPath,this.announceId).then(res => {
        this.downloadFile(res,append.appendixName)
      }) 
    },
    downloadFile(content, fileName) {
      (fileName && fileName.indexOf('.') !== -1) && (fileName = fileName.slice(0, fileName.indexOf('.')));
      const blob = new Blob([content], {
        type: content.type
      })
      if ('download' in document.createElement('a') && navigator.userAgent.indexOf('Edge') <= -1) { // 非IE 及edge下载
        const elink = document.createElement('a')
        fileName && (elink.download = fileName)
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
      } else { // IE10+下载
        fileName ? navigator.msSaveOrOpenBlob(blob, fileName) : navigator.msSaveOrOpenBlob(blob)
      }
    },

这种方法可以在pc端模拟手机下载,但是在真手机上下载不了

试着注释掉判断ie的

downLoad(append) {
      download(append.appendixPath,this.announceId).then(res => {
        this.downloadFile(res,append.appendixName)
      }) 
    },
    downloadFile(content, fileName) {
      (fileName && fileName.indexOf('.') !== -1) && (fileName = fileName.slice(0, fileName.indexOf('.')));
      const blob = new Blob([content], {
        type: content.type
      })
    
        const elink = document.createElement('a')
        fileName && (elink.download = fileName)
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
    
    },

结果发现报错了webkitblobresource错误1,最后就用下面的方面就可以了

解决的办法如下

 downLoad(append) {
      download(append.appendixPath,this.announceId).then(res => {
        this.downloadFile(res,append.appendixName)
      }) 
    },
    downloadFile(content, fileName) {
      (fileName && fileName.indexOf('.') !== -1) && (fileName = fileName.slice(0, fileName.indexOf('.')));
      const blob = new Blob([content], {
        type: content.type
      })
//改的代码如下 开始
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.style.display = 'none';
      a.href = url;
      a.download = fileName;
      document.body.appendChild(a);
      a.click();
      setTimeout(() => {
        window.URL.revokeObjectURL(url); // 释放URL 对象
        document.body.removeChild(a);
      }, 1000);
    },
//结束
上一篇下一篇

猜你喜欢

热点阅读