如何在reactjs的新标签中打开pdf？

Posted 2023-02-22

【中文标题】如何在reactjs的新标签中打开pdf？

【英文标题】：How to open a pdf in new tab in reactjs?

【发布时间】：2017-05-24 12:46:56

【问题描述】：

我们将 pdf 文档保存在数据库中，来自 webapi 我是 作为字节数组返回，现在从 UI 我必须在新选项卡中打开 pdf 浏览器，用户应该能够下载pdf。我怎样才能 实现这个打开和下载pdf文档的需求？

【问题讨论】：

看看这篇文章：***.com/questions/41504668/… 有一些答案，似乎答案可能在 React 模块 react-pdf 或 react-pdfjs 中

@Jayce444 我也这样做了，但问题是我们无法下载打开的 pdf。如果您右键单击，它将保存为图像。但我的要求是下载打开的 pdf。

@Jayce444 你有什么更好的解决方案吗？

【参考方案1】：

你可以这样使用：

<a href='/api/v1/print/example.pdf' target='_blank' rel='noopener noreferrer'>

【讨论】：

我试过 window.open(this.state.path, "_blank");但它在路径正确时无法识别路径：无法获取 /Decoding.pdf 并且在浏览器中加载资源失败：服务器响应状态为 404（未找到）错误即将到来

@jack 你能写出路径包含什么吗？

【参考方案2】：

以下代码对我有用

try 
    await axios
      .get(uri.ApiBaseUrl + "AccountReport/GetTrialBalancePdfReport", 
        responseType: "blob",
        params: 
          ...searchObject,
        ,
      )
      .then((response) => 
        //Create a Blob from the PDF Stream
        const file = new Blob([response.data],  type: "application/pdf" );
        //Build a URL from the file
        const fileURL = URL.createObjectURL(file);
        //Open the URL on new Window
         const pdfWindow = window.open();
         pdfWindow.location.href = fileURL;            
      )
      .catch((error) => 
        console.log(error);
      );
   catch (error) 
    return  error ;
  

【讨论】：

感谢。但请记住，它不适用于 Safari。

【参考方案3】：

2020 年的解决方案

   import Pdf from '../Documents/Document.pdf';

   <a href=Pdf without rel="noopener noreferrer" target="_blank">
      <button trailingIcon="picture_as_pdf" label="Resume">
        PDF
      </button>
   </a>

【讨论】：

谢谢。唯一对我有用的解决方案。唯一真正使用本地文件中的 PDF 的解决方案

太好了，很高兴它可以帮助你@Alexander