美文网首页
移动Safari下载问题:该操作无法完成。 (webkitblo

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

作者: 流泪手心_521 | 来源:发表于2020-11-26 17:54 被阅读0次

    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);
        },
    //结束
    

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/uqdziktx.html