前端项目下载发票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);
          });
  },
相关推荐
未来之窗软件服务13 分钟前
未来之窗昭和仙君(四十八)开发商品进销存修仙版——东方仙盟筑基期
前端·仙盟创梦ide·东方仙盟·昭和仙君·东方仙盟架构
再睡一夏就好18 分钟前
【C++闯关笔记】使用红黑树简单模拟实现map与set
java·c语言·数据结构·c++·笔记·语法·1024程序员节
MeowKnight95819 分钟前
【数据结构】双链表 二叉树 练习记录
笔记
im_AMBER23 分钟前
Leetcode 43
笔记·学习·算法·leetcode
ceffans33 分钟前
PDF文档中表格以及形状解析-后续处理(线段生成最小多边形)
c++·windows·算法·pdf
Source.Liu34 分钟前
【printpdf】color.rs 文件解析
rust·pdf
风清云淡_A43 分钟前
【REACT16】react老项目版本依赖适配问题
前端·react.js
jump6801 小时前
【react】 useEffect
前端
前端小咸鱼一条1 小时前
16.React性能优化SCU
前端·react.js·性能优化
起风了___1 小时前
Flutter 全局音频播放单例实现(附完整源码)——基于 just_audio 的零依赖方案
前端·flutter