前端实现pdf文件流/pdf链接下载(下载pdf空白问题)

1,116 阅读2分钟

pdf链接在浏览器中默认是无法直接下载的,会打开预览pdf的页面

解决:发送请求链接内容,链接返回流再进行下载。

// pdf下载
import axios from "axios";


const downloadFile = (url) => {
//url是pdf链接
  axios
    .get(url, {
      responseType: "arraybuffer",
    })
    .then((res: any) => {
      let fileName = '文件名'
      download(res, fileName);
    });
};
const download = (res, filename) => {
  // 创建blob对象,解析流数据
  const blob = new Blob([res.data]);
  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 = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  // 在内存中移除URL 对象
  window.URL.revokeObjectURL(herf);
};

前端axios请求二进制数据流转换生成PDF文件空白问题(终极解决方案)

axios请求二进制数据转换生成PDF空白问题,使用axios请求后端接口,后端返回的二进制流文件,需要转换成PDF,但是在postman中直接保存文件是可以打开的;

原因分析:

问题分析1:responseType类型

一般二进制参数有两种:

  • "arraybuffer" => response 是一个包含二进制数据的 JavaScript ArrayBuffer。
  • "blob" => response 是一个包含二进制数据的 Blob 对象。

这里要根据后端返回的数据类型,更换参数!

问题分析2: axios封装问题

更换了各种responseType的类型,使用了各种PDF生产方法,打开的一直是空白状态,网上找了各种教程,一直没有好的解决方法。

这时候我怀疑起了axios的问题,如上代码,在使用axios之前,我们对其进行了各种错误的拦截、请求头加入token、判断错误码等等一系列的操作,然后引入axios。 没错,答案就在这里,如果你究极一切方法都没有解决PDF空白问题,那么一定是你axios封装的一些问题,这时候你直接 import axios from 'axios' // 引入原生的axios,不作封装处理 ,

问题迎刃而解!

解决方案:

使用原生的axios,不做封装处理,更改responseType类型为 blob

import axios from 'axios' // 引入原生的axios,不作封装处理
 await axios({
      method: 'GET',
      headers: { token },
      url: `api/export`,
      params: { discountPrint },
      responseType: 'blob' // 更改responseType类型为 blob
    }).then(res => {
      data = res
    }).catch(err => {
      console.log(err)
    })

// 转换pdf
const blob = new Blob([res.data], { type: 'application/pdf' });
const url = window.URL.createObjectURL(blob);
window.open(url)

至此,弹出出窗口打开的PDF文件为正常状态 问题解决!