我尝试显示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();
};

Answer 1

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

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

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

Here第一步的how-to-how-to-how，以及here一个工作示例。