vue 一键“导出文件流”

 1.后台返回的文件流效果图。

 

 2.src下建一个util文件夹里面再建一个util文件，存全局js代码

/**
 * @author yxm 
 * @description  导出文件流
 * @param { String } content 文件流
 * @param { String } paraName 文件名+后缀名

*/
export function getContentExport(content, paraName) {
    if (!content) {
      return;
    }
    const blob = new Blob([content]);
    if ("download" in document.createElement("a")) {
      // 非IE下载
      const elink = document.createElement("a");
      elink.download = paraName;
      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, file);
    }
    this.$message({
      type: 'success',
      message: '操作成功!'
    });
}

3.页面引入并使用

import {getContentExport } from '@/util/util'

created() {
    getContentExport(res.data,'客户对账单.xls')
}