React中使用file-saver.js无法下载PDF的问题咨询

一、解决直接URL调用saveAs无法保存的问题 #

直接传入URL调用saveAs时，浏览器会根据服务器返回的Content-Disposition头和自身默认行为决定是下载还是打开PDF。如果服务器没设置Content-Disposition: attachment; filename="xxx.pdf"，浏览器就会默认打开PDF。

要强制触发保存，需先将PDF转为Blob对象再调用saveAs，以下是两种可行方案：

方案1：原生Fetch API实现 #

import { saveAs } from 'file-saver';

const downloadPDF = async () => {
  try {
    const response = await fetch('http://www.africau.edu/images/default/sample.pdf');
    if (!response.ok) throw new Error('PDF请求失败');
    const blob = await response.blob();
    saveAs(blob, 'something.pdf');
  } catch (err) {
    console.error('下载出错:', err);
  }
};

方案2：Axios实现 #

import { saveAs } from 'file-saver';
import axios from 'axios';

const downloadPDF = async () => {
  try {
    const response = await axios.get('http://www.africau.edu/images/default/sample.pdf', {
      responseType: 'blob' // 必须指定响应类型为Blob
    });
    saveAs(response.data, 'something.pdf');
  } catch (err) {
    console.error('下载出错:', err);
  }
};

另外注意：你的代码里同时用了import { saveAs } from "file-saver"和var FileSaver = require("file-saver")，属于重复引入，二选一即可。

二、直接通过URL调用saveAs的有效性 #

这种方式有效但局限性大：

• 仅当服务器返回Content-Disposition: attachment头时，才会触发下载；
• 若服务器返回inline（多数默认情况），浏览器会直接打开PDF；
• 无法处理请求错误、下载进度，跨域场景下还可能受CORS限制。

三、是否更推荐Axios获取后保存？ #

是的，这种方式优势更突出：

• 强制下载：不受服务器响应头限制，通过Blob对象确保触发保存；
• 功能完善：可配置请求头、处理跨域、监听下载进度、捕获各类请求错误；
• 兼容性好：对不同浏览器的Blob处理更稳定，适配性更强。

内容的提问来源于stack exchange，提问作者constantlyFlagged