vue导出excel文件，wps提示无法打开文件，【responseType: ‘blob‘ 】

标题

解决办法：注释掉main文件中mock引用

// import './mock';

原因： mock改变了XMLHttpRequest，

导致config中responseType: ‘blob’,没起作用，返回二进制PK,而不是Blob对象

附导出方法

“file-saver”: “^2.0.2”

import { saveAs } from 'file-saver';

export const exportFile = (
  res: Blob,
  fileName = '导出文件',
  fileType = 'xlsx'
) => {
  return new Promise((resolve, reject) => {
    const fr = new FileReader();
    fr.readAsText(res);
    fr.onload = (e: any) => {
      // 导出报错
      if (e.target.result.indexOf('code') !== -1) {
        reject(JSON.parse(e.target.result).message);
      } else {
        let type = '';
        switch (fileType) {
          case 'xlsx':
          case 'xls':
            type = 'application/octet-stream';
            break;
          case 'txt':
            type = 'text/plain;charset=utf-8';
            break;
          case 'zip':
            type = 'application/zip';
            break;
          default:
            type = 'application/octet-stream';
            break;
        }
        // 导出成功
        const downloadData = new Blob([res], { type });
        saveAs(downloadData, `${fileName}.${fileType}`);
        resolve(1);
      }
    };
  });
};

后边代码自定义

const handleIntentionModel = () => {
  intentionModel().then(res => {
    exportFile(res.data, '意图测试模板', 'xlsx')
      .then(() => {
        message.success('下载成功');
      })
      .catch(err => {
        message.error(err);
      });
  });
};
    
<IntentTest ref="intentTestRef" :download-fn="handleIntentionModel" @frensh="handleReset" />
    
const handleDownTemplate = () => {
  if (downLoading.value) return;
  downLoading.value = true;
  props.downloadFn().finally(() => {
    downLoading.value = false;
  });
};


export function intentionModel() {
  return request({
    url: INTENTION_MODEL,
    responseType: 'blob',
    method: 'post',
    catchAll: true
  });
}