前端项目下载发票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 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60615 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了5 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅5 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
wdfk_prog5 小时前
[Linux]学习笔记系列 -- [drivers][input]input
linux·笔记·学习
崔庆才丨静觅5 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
ouliten6 小时前
cuda编程笔记(36)-- 应用Tensor Core加速矩阵乘法
笔记·cuda
崔庆才丨静觅6 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment6 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅6 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端