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

celineWong7

发布于 2020-11-06 12:53:08

3.8K0

发布于 2020-11-06 12:53:08

以前的文件下载可以直接通过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)
}

参考文章：

前端处理文件下载(带请求头) ：采用了原生的XMLHttpRequest方式和blob方式。——此方法试验有效，目前在用。
Vue2 导出Excel + 解决乱码问题 —— axios （下载后台传过来的流文件（excel）后乱码问题）：给出了3种解决方案（都是结合axios请求方式）：有的采用js-file-download方案；有的采用blob方式。——还没有验证，不知道效果如何？？
axios全攻略详细给出了axios的配置，此处主要参考下responseType的配置项。