前端实现pdf文件流/pdf链接下载

最新推荐文章于 2025-06-01 14:46:19 发布

lxsssss

最新推荐文章于 2025-06-01 14:46:19 发布

阅读量4.2k

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端 pdf javascript

本文链接：https://blog.csdn.net/HelloWorldLJY/article/details/128117662

这篇博客介绍了如何通过Axios库处理PDF链接，以实现直接下载而非在浏览器中预览。通过设置响应类型为'arraybuffer'，获取PDF内容后，利用Blob对象创建下载链接，并通过创建隐藏的HTML 'a'标签模拟点击下载。同时，提供了downloadFile和download两个辅助函数，确保文件能被正确命名并下载到本地。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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