vue 实现导出excel或文件两种方法

  1. 第一种是后端返回二进制流,通过new Blob将二进制流转成Url,记得加上responseType: 'blob'!!!

    this.$api.请求接口(params).then((res) => {
            let excelName = decodeURI(
              res.headers["content-disposition"].split(";")[1].split("=")[1]
            );//截取响应头的文件后缀
            const link = document.createElement("a"); // 创建a标签
            let blob = new Blob([res.data], {
              type: "application/vnd.ms-excel;charset=UTF-8",
            }); // 设置文件类型
            link.style.display = "none";
            link.href = URL.createObjectURL(blob); // 将文件流转化为blob地址
            link.setAttribute("download", excelName);//文件名,而不是写死.excel之类
            document.body.appendChild(link);//创建
            link.click();//点击事件
            document.body.removeChild(link);//移除
          });
    
    ------------------------------------------------------------------
    //记得在api请求加上  responseType: 'blob'!!!
        export const 请求接口= (params) => {
           return request({
             url: url.EXPORT_LEDGER,
             method: "post",
             data: params,
             responseType: 'blob',//设置请求的类型为blob文件流的形式
            });
          };
  2. 第二种是后端返回的Url路径

    this.$api.请求接口(params).then((res)=>{
             const {fileUrl} =res.data
            //fileUrl 例如:XXXX.docx或XXXX.excel
            let name = fileUrl.lastIndexOf(".");
            let suffix = fileUrl.substring(name);//截取后缀名
            const link = document.createElement("a"); // 创建a标签
            link.style.display = "none";
            link.href = fileUrl; 
            link.setAttribute("download", `自定义名${suffix}`);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            this.$message.success("操作成功");
        })

    后记:你什么都不缺,缺的只是一份重新开始的勇气!!!

你可能感兴趣的:(javascript,前端,vue)