vue下载文件

最新推荐文章于 2024-08-20 18:30:57 发布

原创最新推荐文章于 2024-08-20 18:30:57 发布 · 437 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了在Vue.js中实现文件下载的方法，包括使用axios发送POST请求，接收服务器返回的文件流，并通过创建a标签来触发文件下载。适用于前端开发者在Vue应用中集成文件下载功能。

原文：https://www.cnblogs.com/zhang-can/p/9116159.html

vue下载文件

download(){
  let self = this;
  let url = self.$store.state.path + "tools/download_file";
  let data = JSON.stringify({
    user: self.$store.state.username,
    file_name: self.plist_file_name
  });
  console.log("data:", data)
  self.$axios(
    {
      method: "post",
      url: url,
      data: data,
      responseType: "blob",    // 指定获取数据的类型为blob
    }
  ).then(
    function (response) {
      data = response.data;
　　　　　　// 创建a标签并点击， 即触发下载
      let url = window.URL.createObjectURL(new Blob([data]));
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", self.plist_file_name);

      document.body.appendChild(link);
      link.click()
    }
  ).catch(function (err) {
    console.log(err)
  })


}

或者

原文：https://www.jianshu.com/p/3a1b07adfe9e

exportData () {
        const form = this.getSearchForm() // 要发送到后台的数据
        axios({ // 用axios发送post请求
          method: 'post',
          url: '/user/12345', // 请求地址
          data: form, // 参数
          responseType: 'blob' // 表明返回服务器返回的数据类型
        })
          .then((res) => { // 处理返回的文件流
            const content = res
            const blob = new Blob([content])
            const fileName = '测试表格123.xls'
            if ('download' in document.createElement('a')) { // 非IE下载
              const elink = document.createElement('a')
              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+下载
              navigator.msSaveBlob(blob, fileName)
            }
        })
      }

我参考上诉代码后写的下载方法

export function postDownload(downloadUrl, params, contentType, callback){
  let headers = {
      'Content-Type': contentType,
      'Authorization':"bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbXBsb3llZU5hbWUiOiJsaXV6aGVucGVuZyIsImlzTm90RXhwaXJlZCI6dHJ1ZSwidXNlcl9uYW1lIjoibGl1emhlbnBlbmciLCJzY29wZSI6WyJvcGVuaWQiXSwidXNlck5hbWUiOiJsaXV6aGVucGVuZyIsImV4cCI6MTU4Nzc4NDUxMSwidXNlcklkIjoiNTAyNCIsImp0aSI6IjkwZGI3NzAyLTNlZjgtNDlmYS05MDE4LTFkZGVhN2MyYjVhZiIsImNsaWVudF9pZCI6ImlpZi13ZWIiLCJlbXBsb3llZUNvZGUiOiJsaXV6aGVucGVuZyIsInRpbWVzdGFtcCI6MTU4NTE5MjUxMTIyOX0.V6hpKanRD0ok0PlBWRmze7TwRuzIg6hsSk0AYM7Ef3OEXZTjN1TkpWIcTPegZBzCZMOv0TCanYCxXm1reMPUbCul__k9iBVpa-A_8ywhjHjqh1lJdqtOU_CDWGluqm-wQ9ahAP5t__s96_O8cFznevbymTGxEBieBhid5jsae4M"
    };
  axios(
    {
      method: "post",
      url: downloadUrl,
      data: params,
      headers: headers,
      responseType: "blob",    // 指定获取数据的类型为blob
    }
  ).then(
    function (response) {
      console.log(response);
      // 前提是服务端要在header设置Access-Control-Expose-Headers: Content-Disposition
      // 前端才能正常获取到Content-Disposition内容
      const disposition = response.headers['content-disposition'];
      let fileName = disposition.substring(disposition.indexOf('filename=') + 9, disposition.length);
      // iso8859-1的字符转换成中文
      fileName = decodeURI(escape(fileName));
      // 去掉双引号
      fileName = fileName.replace(/\"/g, "");
      const content = response.data;
      console.info("rep:", disposition);
      console.info("fileName:", fileName);
      // 创建a标签并点击， 即触发下载
      let url = window.URL.createObjectURL(new Blob([content]));
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", fileName);
      //link.download = "测试下载文件.xls"
      // 模拟
      document.body.appendChild(link);
      link.click();
      // 释放URL 对象
      window.URL.revokeObjectURL(link.href);
      document.body.removeChild(link)
    }
  ).catch(function (err) {
    console.log(err)
  })
}