js文件下载常用

Lemon今天学习了吗

已于 2022-08-16 11:10:23 修改

阅读量927

点赞数

分类专栏： js 文章标签： javascript 开发语言

于 2022-05-24 10:39:18 首次发布

原文链接：https://blog.csdn.net/ljy123w/article/details/123438648

版权

js 专栏收录该内容

54 篇文章 5 订阅

订阅专栏

场景：在很多系统或者项目中都会用到文件下载或者是浏览功能。

方法：

方法一：创建a标签

    //创建a标签
    <div @click="downloadFile(item)">点击下载</div>

    // pd端下载
    downloadFile(data) {
        if (data && data.url) {
            const info = JSON.parse(data.url);
            var url = this.global.server + 'rest/file/download' + '?name=' + info[0].name + '&id=' + info[0].id;
            var link = document.createElement('a');
            link.href = url;
            link.download = '下载文件.pdf' // 下载后文件名
            document.body.appendChild(link);
            link.click(); //点击下载
            document.body.removeChild(link); //下载完成移除元素
        } else {
            this.utils.warning('转换下载资料信息失败!');
        }
    },

原理：

download的属性是HTML5新增的属性。href属性的地址必须是非跨域的地址，如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口)，download 属性就会失效，点击链接会变成导航预览。此时，如果是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器会自动下载，但是如果使用浏览器可以解析的文件，比如.txt,.png,.pdf....浏览器就会采取预览模式；所以，对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream，如果为application/pdf浏览器则会判断文件为 pdf ，自动执行预览的策略)。

缺点：

a标签只能做get请求，所有url有长度限制
无法获取下载进度
无法在header中携带token做鉴权操作
跨域限制
无法判断接口是否返回成功
IE兼容问题

方法二：文件流下载

参考博文： js保存文件流_lixiaoer757的博客-CSDN博客_js保存文件流

getFiles (name, id, url) {
      downloadFiles({
        name: name,
        id: id
      }).then(res => {
        const reader = new FileReader()
        const type = name.substr(name.lastIndexOf('.') + 1)
        const _types = {
          pdf: {
            type: 'application/pdf'
          }
        }
        // 创建一个新的对象URL，该对象URL可以代表某一个指定的file对象或者bold对象。
        let blob = window.URL.createObjectURL(res, _types[type] || {})
        if (res.type === 'application/json') {
          blob = url
        }
        // readAsText 方法可以将 Blob 或者 File 对象转根据特殊的编码格式转化为内容(字符串形式)
        reader.readAsText(res)
        reader.onload = function (e) {
          const link = document.createElement('a')
          link.style.display = 'none'
          link.href = blob
          if (res.type === 'application/json') {
            link.setAttribute('target', '_blank')
          }
          //decodeURI() 对一个编码后的 URI 进行解码
          link.setAttribute('download', decodeURI(name))
          document.body.appendChild(link)
          link.click()
          console.log(link)
          document.body.removeChild(link)
          window.URL.revokeObjectURL(blob)
        }
      })
    }
  }

方法三：window.open下载

<body>
  <button 
    onclick="downloadEvt('http://192.168.66.183:13666/download?name=HAP.pdf')">
    window.open下载
  </button>
 
  <script>
    function downloadEvt(url) {
    //可以下载大文件(G以上)
      window.open(url, '_self');
    }
  </script>
 
</body>

方法四：location.href下载

<body>
  <button 
    onclick="downloadEvt('http://192.168.66.183:13666/download?name=HAP.pdf')">
    location.href下载
  </button>
 
  <script>
    function downloadEvt(url) {
      window.location.href = url;
    }
  </script>
</body>