前端项目下载发票pdf文件要求改文件名笔记

1、a链接(修改失败,存在跨域)

javascript 复制代码
<el-table-column
              align='right'
              label="下载地址"
              width="200">
              <template slot-scope="{row}">
                <a :href="row.dataUrl" download="文件名">下载</a>
              </template>
            </el-table-column>

2、后端返回二进制文件前端下载

html 复制代码
<el-table-column

              align='right'
              label="操作"
              width="">
              <template slot-scope="{row}">
                <el-button size="mini" type="primary" @click="downLoadInvoice(row)">下载</el-button>
              </template>
            </el-table-column>
javascript 复制代码
  import download from "@/api/download";


async downLoadInvoice(row){
      download.exportPDF('/api/charge-settlement/download-invoice', {businessCode:row.businessCode,dataUrl:row.dataUrl,name:row.downloadInvoiceName}, `${row.downloadInvoiceName}.pdf`);
}
javascript 复制代码
    exportPDF(url, data, fileName) {
      axios({
              method: "post",
              baseURL: ROOT,
              withCredentials: true,
              responseType: "blob",
              timeout: 500000,
              url: url,
              headers: {
                  'Access-Control-Allow-Origin': '*',
                  'Content-Type': 'application/json',
                  token: store.getters.token ? getToken() : null,
              },
              data: data
          })
          .then(response => {
              const blob = new Blob([response.data], { type: "application/vnd.ms-excel" });
               let file_name = fileName || this.getDateTime() + ".pdf";
              const linkNode = document.createElement('a');
              //ie浏览器下载
              if (!!window.ActiveXObject || "ActiveXObject" in window || navigator.userAgent.indexOf("Edge") > -1) {
                  navigator.msSaveBlob(blob, fileName);
              } else {
                  linkNode.download = file_name; //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);
              }

          }).catch(function(error) {
              console.log(error);
          });
  },
相关推荐
程序员猫哥4 分钟前
前端开发,一句话生成网站
前端
Younglina25 分钟前
一个纯前端的网站集合管理工具
前端·vue.js·chrome
木头程序员26 分钟前
前端(包含HTML/JavaScript/DOM/BOM/jQuery)基础-暴力复习篇
开发语言·前端·javascript·ecmascript·es6·jquery·html5
卖火箭的小男孩28 分钟前
# Flutter Provider 状态管理完全指南
前端
小雨青年28 分钟前
鸿蒙 HarmonyOS 6|ArkUI(01):从框架认知到项目骨架
前端
Null15531 分钟前
浏览器唤起本地桌面应用(基础版)
前端·浏览器
云半S一31 分钟前
pytest的学习过程
经验分享·笔记·学习·pytest
AI视觉网奇41 分钟前
ue5.7 配置 audio2face
笔记·ue5
pas1361 小时前
31-mini-vue 更新element的children
前端·javascript·vue.js
wordbaby1 小时前
TanStack Router 实战:如何构建经典的“左侧菜单 + 右侧内容”后台布局
前端·react.js