vue 带token下载——XMLHttpRequest + blob 下载文件流(vue导出excel乱码问题)

以前的文件下载可以直接通过a标签链接跳转,或者window.open()等都是打开页面方式直接处理。
但这次的vue项目中,因为后台需要通过请求头部信息拿token信息,就导致上面的直接打开页面方式失效,只能通过blob实现流文件的下载。

从网上查了些方法,后面采用了下面这种实现方式。具体每个模块的代码意思还不是很清楚,后续会在补充,此处直接先给出源码。

/** 导出需要携带token,此处采用原生XMLHttpRequest去下载文件流 */
import { getToken } from '@/utils/auth'
export function exportByXML(params){
  let baseURL = process.env.BASE_API;

  function createObjectURL(object) { 
    return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object); 
  }
  var xhr = new XMLHttpRequest();
  var formData = new FormData();
  xhr.open('get', baseURL + params.url);  //url填写后台的接口地址,如果是post,在formData append参数(参考原文地址)
  xhr.setRequestHeader("Authorization", getToken());
  xhr.responseType = 'blob';
  xhr.onload = function (e) {
      if (this.status == 200) {
          var blob = this.response;
          var filename = params.fileName;
          // console.log(this.response)
           if (window.navigator.msSaveOrOpenBlob) {
              navigator.msSaveBlob(blob,filename);
          } else {
            var a = document.createElement('a');
           var url = createObjectURL(blob);
           a.href = url;
           a.download = filename;
           document.body.appendChild(a);
           a.click();
           window.URL.revokeObjectURL(url);
          }
      }
  };
  xhr.send(formData);
}
// auth.js 文件内容
import Cookies from 'js-cookie'
const TokenKey = 'Admin-Token'
export function getToken() {
  return Cookies.get(TokenKey)
}

参考文章:

推荐阅读更多精彩内容