vue中下载pdf文件

最新推荐文章于 2024-06-18 14:30:43 发布

可恨的资本家

最新推荐文章于 2024-06-18 14:30:43 发布

阅读量7.9k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Tttrycatch/article/details/125318207

版权

js代码

    /** 导出履约码  */
    hrefClick() {
      const query = { fileName: this.fileName };
      exportNew(query)
        .then((res) => {
          const blob = new Blob([res], {
            type: "application/pdf;chartset=UTF-8",
          });
          const a = document.createElement("a");
          const URL = window.URL || window.webkitURL;
          const herf = URL.createObjectURL(blob);
          a.href = herf;
          // 这里后台不给文件名字需要自己写
          a.download = '履约码文件.pdf';
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          window.URL.revokeObjectURL(herf);
        })
        .catch((err) => {
          // 创建blob对象，解析流数据
          const blob = new Blob([err], {
            // 如何后端没返回下载文件类型，则需要手动设置：type: 'application/pdf;chartset=UTF-8' 表示下载文档为pdf，如果是word则设置为msword，excel为excel
            type: "application/pdf;chartset=UTF-8",
          });
          const a = document.createElement("a");
          // 兼容webkix浏览器，处理webkit浏览器中href自动添加blob前缀，默认在浏览器打开而不是下载
          const URL = window.URL || window.webkitURL;
          // 根据解析后的blob对象创建URL 对象
          const herf = URL.createObjectURL(blob);
          // 下载链接
          a.href = herf;
          // 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf'
          a.download = '履约码文件.pdf';
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          // 在内存中移除URL 对象
          window.URL.revokeObjectURL(herf);
        });
    },

接口调用

// 删除人员管理
export function exportNew(query) {
  return request({
    url: '/fulfillment/person/exportCode',
    method: 'post',
    params: query,
    responseType:'blob',
    headers: { "Content-Type": "multipart/form-data" }
  })
}