前端项目下载发票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);
          });
  },
相关推荐
星恒随风6 小时前
四天学完前端基础三件套(JavaScript篇)
开发语言·前端·javascript·笔记
南风微微吹6 小时前
最新国考《行测+申论》历年真题及答案解析电子版pdf(2000-2026年)
pdf
guslegend6 小时前
第9节:前端工程与一键启动
前端·大模型·状态模式·ai编程
羊群智妍6 小时前
2026 免费GEO监测:AI搜索优化实用工具推荐
笔记
南囝coding7 小时前
Anthropic 内部数百个 Claude Code Skills,他们总结的这套方法值得看
前端·后端
wujian83117 小时前
豆包导出pdf方法
人工智能·ai·pdf·豆包·deepseek·ai导出鸭
Dxy12393102167 小时前
如何使用jQuery获取一类元素并遍历它们
前端·javascript·jquery
宵时待雨7 小时前
回溯算法专题2:二叉树中的深搜
开发语言·数据结构·c++·笔记·算法·深度优先
csdn小瓯7 小时前
AI质量评估体系:LLM-as-a-Judge实现与自动化测试实战
前端·网络·人工智能
jiayong237 小时前
第 43 课:任务详情抽屉里的批量处理闭环与删除联动
java·开发语言·前端