reactjs - 我尝试显示 PDF，但我总是看到一个空白页面

Question

我徒劳地尝试显示通过 REST 接口发送的 PDF 文件。BLOB 在那里，不是空的。我总是得到一个空的PDF。没有错误。

 const getPdf = (id) => {
 const fetchData = async () => {
   const data = await axios
    .get("http://XXXXXX:xxx/xx/xx", {
      params: {
        _id: id,
        gesuchtNach: wert,
        firmenId: "555",
        kundenId: "123",
      },
    })
    .then(function (response) {
      var blob = new Blob([response.data], { type: "application/pdf" });
      var link = document.createElement("a");
      link.href = window.URL.createObjectURL(blob);
      link.download = "Report_" + new Date() + ".pdf";
      link.click();

      /* ALSO TRIED - SAME PROBLEM
      const file = new Blob([response.data], { type: "application/pdf" });
      FileSaver.saveAs(file, "file.pdf");

       */
    })
    .catch(function (error) {
      console.log(error);
    });
 };
fetchData();
};

标签： reactjs

Answer 1

Ciao，我认为您可以使用react-pdf来显示您的 pdf 文件。它非常易于使用。

基本上，您只需将 pdf 文件传递​​给Document组件，例如：

  <Document
    file="somefile.pdf"
    onLoadSuccess={onDocumentLoadSuccess} // function to manage loading succedd
  >
    <Page pageNumber={pageNumber} />
  </Document>

这里是关于 react-pdf 第一步的操作方法，这里是一个工作示例。