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

开心就好13145202025-07-24 14:04

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);
          });
  },