如何将远程服务中的 PDF 嵌入到 html 页面中？答案

【问题标题】：How to embed PDF from remote service into html page?如何将远程服务中的 PDF 嵌入到 html 页面中？
【发布时间】：2020-10-02 05:51:09
【问题描述】：

我正在开发一个与现有后端服务交互的 UI。 UI 需要调用后端服务器以获取将显示在现有页面或新选项卡中的 PDF 文件。

我已经尝试了我在 SO 上看到的所有选项：

<iframe src="http://localhost:3131/Reports.aspx?reportName=testReport&clientid=23" width="800px" height="100%"></iframe>

<embed type="application/pdf" src="//http://samelinkasabove" width="800px" height="100%">

<object type="application/pdf" data="http://myreportlink" width="800px" height="100%" />

<a href="http://localhost:32/Reports.aspx?reportName=testReport&clientid=23" target="_blank">View Report</a>

在任何情况下，pdf 都会以下载形式结束，而不是显示在浏览器窗口中。是否有显示 pdf 的本地方式或需要 javascript 来实现这一点？

【问题讨论】：

标签： javascript html pdf adobe-embed-api

【解决方案1】：

我发现服务器正在使用 CrystalReports 生成 PDF 并“导出”它。它使用了一个函数ExportToHttpResponse(...)，方法调用中的第三个参数是bool asAttachment。

那个参数被设置为真。我将其更改为 false 并开始将响应设置为 inline 并且上述显示方法开始起作用。

【讨论】：

【解决方案2】：

我有一个CodePen here，它使用免费的Adobe DC View SDK 准确地显示了这个功能。除非您覆盖本机浏览器查看器，否则您无法控制 PDF 体验。我的示例的相关代码如下。在我的示例中，PDF 是从另一个域获取的，但“content”参数将接受任何解析为 PDF 内容的 ArrayBuffer 的 Promise。您的 PDF 可以存储在任何地方或动态创建，然后显示在 HTML 页面中。

document.addEventListener("adobe_dc_view_sdk.ready", function () {
  /*
  The clientId is tied to a specific domain. To display a PDF hosted 
  on a different domain using the Adobe View SDK, we need to fetch the file 
  first then pass it to the "content" parameter as a Promise. 
  */
  fetch("https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf")
    .then((res) => res.blob())
    .then((blob) => {
      var adobeDCView = new AdobeDC.View({
        // This clientId can be used for any CodePen example
        clientId: "YOUR_CLIENT_ID", 
        // The id of the container for the PDF Viewer
        divId: "adobe-dc-view" 
      });
      adobeDCView.previewFile(
        {
          // The file content
          content: { promise: Promise.resolve(blob.arrayBuffer()) },
          metaData: { fileName: "Bodea Brochure.pdf" }
        },
        {
          embedMode: "FULL_WINDOW", // possible values are "FULL_WINDOW", "SIZED_CONTAINER" and "IN_LINE"
          defaultViewMode: "FIT_WIDTH", // possible values are  "FIT_WIDTH" and "FIT_PAGE"
          showDownloadPDF: true,
          showPrintPDF: true,
          showLeftHandPanel: true,
          showAnnotationTools: true
        }
      );
    });
});

您可以获取自己的凭据here

【讨论】：