如何在 react.js 中显示 pdf 文件

Question

我只是尝试使用 react-native-web 为 ios、android 和 web 示例应用程序。在这里，我必须从服务器下载 pdf 文件，同时单击 showpdf 按钮，下载的文件也需要在 android 应用程序和 Windows 浏览器中打开。对于浏览器下载，我使用了以下代码

 fetch('http://www.pdf995.com/samples/pdf.pdf',{ 
      method: 'GET', 
      mode: 'no-cors',
      responseType: 'blob', // important
    headers: {       
      'Content-Type': 'application/json',
    },})
            .then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', item.pdfFileName);
        document.body.appendChild(link);
        link.click();
        this.setState({
          pdf_url:url
        });

下载后我需要打开这个pdf文件。如果有人知道这一点，请帮助。谢谢。

Answer 1

您可以使用<iframe>直接在页面中预览 PDF，将 src 属性设置为 pdf_url。window.open(pdf_url)也是上面提到的一个选项，但它需要用户关闭广告拦截器/弹出窗口拦截器。

在您的render()：

{pdf_url && <iframe src={pdf_url} />}

查看MDN 了解多种显示文件的方式

Answer 2

我建议你看看https://www.npmjs.com/package/react-pdf库，使用它你可以像图像一样简单地显示 pdf

这是在线演示http://projects.wojtekmaj.pl/react-pdf/