JS如何从URL获取PDF文件并将其存储到变量中

这个需求可以实现，核心前提是目标PDF链接配置了跨域资源共享（CORS）规则，允许你所在的站点发起请求，否则浏览器会基于同源策略拦截请求，此时纯前端无法直接处理，需要搭配后端代理请求。

实现逻辑 #

• 用fetch API发起GET请求拉取PDF资源
• 将响应结果转换为Blob或者ArrayBuffer格式存储在变量中，两种格式可根据后续使用场景选择：
  • Blob适合后续直接下载、生成预览链接等场景
  • ArrayBuffer适合需要读取、操作PDF二进制内容的场景

参考代码 #

// 异步获取PDF并存储到变量
async function fetchPdf(pdfUrl) {
  try {
    const res = await fetch(pdfUrl);
    if (!res.ok) throw new Error(`请求错误：${res.status}`);
    
    // 存储为Blob格式
    const pdfBlob = await res.blob();
    // 如需ArrayBuffer格式使用下行代码
    // const pdfBuffer = await res.arrayBuffer();

    // pdfBlob就是存储了完整PDF内容的变量，可自行处理
    console.log(`PDF获取完成，文件大小：${(pdfBlob.size/1024/1024).toFixed(2)}MB`);
    return pdfBlob;
  } catch (error) {
    console.error('PDF获取失败：', error);
  }
}

// 调用方法
const pdfFile = await fetchPdf('替换为你的PDF链接');

常见问题说明 #

• 跨域报错的话，要么让PDF所在服务的运维配置允许你站点的CORS规则，要么走你自己的后端服务代理转发PDF请求再返回给前端
• 大体积PDF获取时建议添加加载提示，避免用户等待期间无感知
• 如需页面内预览PDF，可通过URL.createObjectURL(pdfBlob)生成临时资源链接，赋值给iframe的src属性即可

内容的提问来源于stack exchange，提问作者Tea Without Sugar