vue项目中的下载或者导出

（一）下载vue项目中的本地模板
HTML代码

 <el-button type="primary"
          ><a
            class="down_a"
            :href="download.url"
            :download="download.chineseName"
            >下载</a
          ></el-button
        >

js代码

data(){
	return {
		  download: {
		  //将模板放在vue文件的static文件夹下
	        url: "static/template/exp.xlsx",
	        chineseName: "需要的模板名称",
	      }
	}
}

（二）调用接口导出或者下载
html代码

 				<el-button
                type="success"
                plain
                
                @click="exPortFailBill"
                :loading="exportFileBillLoading"
                >导出</el-button>

js代码
接口定义的文件api.js

export const export = params => {
//path----------->你的接口地址
  return axios.post(`${path}`, '', {
    params: params,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded', //请求的数据类型为form data格式
    },
    responseType: 'blob'
  });
};

//引入导出接口
import {
  export
} from "../../api/api.js";

 //导出失败清单
    exPortFailBill() {
      this.exportFileBillLoading1=true;
      var formData = {};
      export(formData).then((res) => {
        if (res.status === 200) {
         
          const blob = new Blob([res.data]);
          const fileName = "导出.xlsx";
          const linkNode = document.createElement("a");
          linkNode.download = fileName; //a标签的download属性规定下载文件的名称
          linkNode.style.display = "none";
          linkNode.href = URL.createObjectURL(blob); //生成一个Blob URL
          document.body.appendChild(linkNode);
          linkNode.click(); //模拟在按钮上的一次鼠标单击

          URL.revokeObjectURL(linkNode.href); // 释放URL 对象
          document.body.removeChild(linkNode);
          this.$message.success("导出成功!");
        }
        this.exportFileBillLoading1=false;
      });
    },