我必须用React预览PDF，所以在尝试了几个库之后，我的最佳解决方案是获取数据并emed它。

const pdfBase64 = //fetched from url or generated with jspdf or other library

  <embed
    src={pdfBase64}
    width="500"
    height="375"
    type="application/pdf"
  ></embed>

您可以像这样使用保存的pdf的相对位置:

例二

<embed src="example.pdf" width="1000" height="800" frameborder="0" allowfullscreen>

Example2

<iframe src="example.pdf" style="width:1000px; height:800px;" frameborder="0" allowfullscreen></iframe>

值得注意的PDF是您应该考虑的选项之一 它有一个免费的计划，除非你打算在pdf文件上进行实时在线协作

将以下iframe嵌入到任何html并享受结果:

<iframe width='1000' height='800' src='http://bit.ly/1JxrtjR' frameborder='0' allowfullscreen></iframe>

Scribd不再要求你把你的文档放在他们的服务器上。如果你和他们一起创建一个账号，你就会得到一个出版商ID。只需要几行JavaScript代码就可以加载存储在您自己服务器上的PDF文件。

有关更多详细信息，请参见开发人员工具。

要将文件流式传输到浏览器，请参阅Stack Overflow问题如何使用。net 2.0将PDF文件流式传输为二进制文件到浏览器-请注意，有一些小的变化，无论您是从文件系统提供文件还是动态生成文件，这都可以工作。

尽管如此，所引用的MSDN文章对世界的看法相当简单，因此您可能希望阅读通过HTTPS成功地将PDF传输到浏览器以及您可能需要提供的一些标题。

使用这种方法，iframe可能是最好的方法。有一个流文件的webform，然后将iframe放在另一个页面上，并将其src属性设置为第一个表单。

我们的问题是，由于法律原因，我们不允许在硬盘上临时存储PDF文件。此外，在浏览器中将PDF显示为预览时，不应该重新加载整个页面。

首先我们尝试了PDF.jS。它与Firefox和Chrome浏览器中的Base64一起工作。然而，对于我们的PDF来说，它慢得令人无法接受。IE/Edge完全不能工作。

因此，我们尝试在HTML对象标记中使用Base64字符串。这同样不适用于IE/Edge(可能与PDF.js的问题相同)。在Chrome/Firefox/Safari中也没有问题。 这就是我们选择混合解决方案的原因。边缘，我们使用IFrame和所有其他浏览器的对象标签。 IFrame解决方案当然也适用于Chrome和其他浏览器。我们没有在Chrome上使用这个解决方案的原因是，尽管PDF显示正确，但当你在预览中点击“下载”时，Chrome会立即向服务器发出新的请求。所需的隐藏字段pdfHelperTransferData(用于发送PDF生成所需的表单数据)不再设置，因为PDF显示在IFrame中。关于此功能/错误，请参阅Chrome在下载PDF时发送两个请求(并取消其中一个)。

现在IE9和IE10的问题仍然存在。对于这些问题，我们放弃了预览解决方案，只是通过单击预览按钮将文档作为下载发送给用户(而不是预览)。我们已经尝试了很多，但即使我们找到了解决方案，为这一小部分用户付出的额外努力也不值得。您可以在这里找到我们的下载解决方案:下载不带IFrame刷新的PDF。

我们的Javascript:

var transferData = getFormAsJson()
if (isMicrosoftBrowser()) {
        // Case IE / Edge (because doesn't recoginzie Pdf-Base64 use Iframe)
        var form = document.getElementById('pdf-helper-form');
        $("#pdfHelperTransferData").val(transferData);
        form.target = "iframe-pdf-shower";
        form.action = "serverSideFunctonWhichWritesPdfinResponse";
        form.submit();
 } else {
        // Case non IE use Object tag instead of iframe
        $.ajax({
            url: "serverSideFunctonWhichRetrivesPdfAsBase64",
            type: "post",
            data: { downloadHelperTransferData: transferData },
            success: function (result) {
                $("#object-pdf-shower").attr("data", result);
            }
        })
 }

我们的HTML:

<div id="pdf-helper-hidden-container" style="display:none">
   <form id="pdf-helper-form" method="post">
        <input type="hidden" name="pdfHelperTransferData" id="pdfHelperTransferData" />
   </form>
</div>

<div id="pdf-wrapper" class="modal-content">
    <iframe id="iframe-pdf-shower" name="iframe-pdf-shower"></iframe>
    <object id="object-pdf-shower" type="application/pdf"></object>
</div>

要检查IE/Edge的浏览器类型，请参阅此处:如何使用JavaScript检测Internet Explorer (IE)和Microsoft Edge ?我希望这些发现能为其他人节省时间。