JS导出方式

注意：所有导出接口都必须设置responseType: blob;设置相应数据类型，否则会出现乱码，报错等现象。

1、js-file-download 插件

// 安装
npm install js-file-download --save
// 使用
import fileDownload from 'js-file-download';
/**
data       blob 数据
filename   导出的文件名称
*/
fileDownload(data, filename);

2、IE10 window.navigator.msSaveBlob

// msSaveBlob：只提供一个保存按钮
window.navigator.msSaveBlob(data, filename);
// msSaveOrOpenBlob：提供保存和打开按钮
window.navigator.msSaveOrOpenBlob(data, filename);

注意：
需要判断是否存在msSaveBlob和msSaveOrOpenBlob方法

列：
window.navigator.msSaveBlob(new Blob([data], 
	{
		type: 'application/vnd.ms-excel' // 文件类型
    }),
	fileName + '.xlsx'
);

3、创建a标签下载

// 生成下载路径
let url = window.URL.createObjectURL(
   new Blob([data], {
       type: 'application/vnd.ms-excel'
   })
);
// 创建连接
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', filename);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(url);

4、Excel文件类型

xlsx: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
xls:  application/vnd.ms-excel

5、下载base64格式图片

downImage64(imgUrl, fileName) {
      if (window.navigator.msSaveOrOpenBlob) {
          const bstr = atob(imgUrl.split(',')[1]);
          let n = bstr.length;
          const u8arr = new Uint8Array(n);
          while (n--) {
              u8arr[n] = bstr.charCodeAt(n);
          }
          const blob = new Blob([u8arr]);
          window.navigator.msSaveOrOpenBlob(blob, `${fileName}.png`);
      } else {
          const a = document.createElement('a');
          a.href = imgUrl;
          a.setAttribute('download', `${fileName}.png`);
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
      }
  }

6、补充

由于接口请求是添加了responseType: blob时，对于返回的数据都会转化成Blob类型，这造成接口报错是无法提示出操作。解决办法可以将blob数据转化为字符串。

let blob = new Blob([data], {
	type: 'text/plain'
});
let reader = new FileReader();
const _this = this;
reader.readAsText(blob, 'utf-8');
reader.onload = function () {
	// 方法一
    try {
    	// 处理接口返回错误提示信息
        const result = JSON.parse(reader.result);
        if (result.code === 500) {
            _this.$message.error(result.message);
        }
    } catch (e) {
    	// 由于真正的Excel blob数据是不能转化为Json数据的，所以在异常中进行导出Excel逻辑处理。
    	// 导出逻辑处理。
      
    }
}

// 方法二
const resData = response.data
  if (resData.type === 'application/json') {
    // 说明是普通对象数据，读取信息
    const fileReader = new FileReader()
    fileReader.onloadend = () => {
      const jsonData = JSON.parse(fileReader.result)
      // 后台信息
      console.log(jsonData)
    }
    fileReader.readAsText(resData)
  } else {
    // 下载文件
    downloadFile(resData)
}