关于导出、下载excel

方法一：
1、接口部分的封装

/**
 * 请求头参数规则 token + client + version + language + timezone
 * @returns {string}
 */
function getAuthenticator() {
  return `${ccutils.getToken()} ${requestHeaderParams.CLIENT_FLAG} ${
    requestHeaderParams.version
  } ${ccutils.getHeaderLanguage()} ${requestHeaderParams.TIMEZONE_FLAG}`;
}

/**
 * 导出
 * @param url
 * @param params
 */
export const getuploadFile = async function(url, params) {
  let res = await axios.get(url, {
    params,
    headers: {
      authenticator: getAuthenticator(),
    },
    responseType: 'blob',
  });
  return res;
};

2、标签

<Button @click="exportTemplate">下载模板</Button>
//当点击模板调用接口后，底部出现导出的内容部分
<a href ref="exportA" style="display:none;"></a>

  /**
   * 下载模板
   */
  async exportTemplate(){
    try{
      let res = await apis.exportUpperLimitExcelTemplateByUser();  //调用导出模板的接口

      let blob = res.data;
      console.log("nowres",res)
      this.$refs.exportA.href = window.URL.createObjectURL(blob);  //通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL
      this.$refs.exportA.download = "客流上限模板.xls"
      this.$refs.exportA.click();
    }catch(e){}
  },

或者另外一个写法，不写a标签在函数中利用js的写法实现，浏览器下方出现导出的excel

let objectUrl = window.URL.createObjectURL(blob)
let a = document.createElement("a");
a.setAttribute("style","display:none");
a.setAttribute("href",objectUrl);
a.setAttribute("download","客流上限模板.xls");
a.click();
URL.revokeObjectURL(objectUrl)

导出接口exportUpperLimitExcelTemplateByUser，返回信息内容为

补充：

a标签的属性：

download：规定被下载的超链接目标。    

href：规定链接指向的页面的 URL。    

hreflang：规定被链接文档的语言。    

media：规定被链接文档是为何种媒介/设备优化的。    

rel：规定当前文档与被链接文档之间的关系。       

target：规定在何处打开链接文档。    

 

type：规定被链接文档的的 MIME 类型。   

target属性

_blank 新窗口打开链接

_self 当前页打开链接

方法二：
将excel模板由后端配置到oss服务器上，前端拿到相关链接，采用window.open

     <a class="martop-content" style="display:block" @click="templateDownload">下载excel模板</a>
     import {POS_SEARCH_TEMPLATE} from "config/data";
     /**
     * 下载模板
     */
    templateDownload() {
      window.open(POS_SEARCH_TEMPLATE);
    },

在data.js中

let httpType = 'http';
if (window.location.href.substr(0, 5) == "https") {
  httpType = 'https';
}
export const POS_SEARCH_TEMPLATE= httpType + "://oss-cport-template.xls";  // 该地址可以直接在浏览器中打开

方法三
前端自己做导出表格不需要后端
js-xlsx

	使用
兼容性	支持vue、react、angular；几乎兼容所有浏览器（IE 8版本以上）灵活性不错

npm install --save xlsx

import * as  XLSX from 'xlsx';  // vue 3.0
// vue2使用import有的属性无法找到，需要 const XLSX = require("xlsx");
const exc_data1 = [
    ['第一列', '第二列'],
    ['aa', 'bb'],
    ['cc', 'dd']
]
function download() {
     let exc = XLSX.utils.book_new();  // 初始化一个excel文件
    let exc_data = XLSX.utils.aoa_to_sheet(exc_data1)  // 传入数据
    XLSX.utils.book_append_sheet(exc, exc_data, 'biaoge名称')  // 将文档插入文件并定义名称
    XLSX.writeFile(exc, "biaoge名称.xlsx")  // 执行下载
}

方法四
vue-json-excel

	使用
兼容性	只支持vue， 使用简单，不灵活

方法五 导出txt wrod
使用 链接: FileSaver.js