无法从 file-saver.js 下载 pdf react

IT技术 javascript reactjs typescript filesaver.js
2022-07-18 02:23:39

我正在尝试从此网址下载 pdf:

http://www.africau.edu/images/default/sample.pdf

我按照示例编写了下面的代码。


import { saveAs } from "file-saver";


const downloadPDF = ()=>{
  var FileSaver = require("file-saver");
  FileSaver.saveAs(
    "http://www.africau.edu/images/default/sample.pdf",
    "somehthing.pdf"
  );
}

但是,当在downloadPDF 按下按钮时调用该函数时。文件未保存。pdf 只是在新选项卡中打开。新选项卡中 pdf 的屏幕截图如下所示。 在此处输入图像描述

如何保存pdf文件?

此外,这种获取 pdf 的方法是否首先有效,或者是 axios.get() 更优选的获取文件的方法,然后通过 FileSaver.saveAs() 保存响应文件(response.body)

如果问题不清楚,请在标记前在评论中告诉我 - 我会进行必要的更新。谢谢

1个回答

似乎FileSaver没有帮助。

但是,如果文件来自服务器,我们建议您首先尝试使用 Content-Disposition 附件响应标头,因为它具有更多的跨浏览器兼容性。

据我所知,有两种方法可以在浏览器中下载文件。

  1. Content-Disposition服务器返回带有带有值的标头attachmentContent-Type带有值的标头的响应application/octet-stream浏览器将提升 SaveDialog 并为您处理此下载。这是首选的下载方式,但这需要您控制服务器。

  2. 您只需在任何地方使用ajaxaxios访问get任何文件的数据。然后你创建一个虚拟链接来下载(像这个)。然后浏览器将促进 SaveDialog 然后将文件保存到磁盘。这适用于小文件,但不适用于大文件,因为您必须先将整个文件存储在内存中,然后才能将其保存到本地磁盘。

我认为选项 2 适合您。这里
的 例子在这个例子中,我放置了一个名为public 文件夹的文件。请注意,服务器必须为您的网站源启用cors否则,您将无法在 javascript 代码中访问该文件。abc.json