如何将来自远程服务的 PDF 嵌入到 html 页面？

Question

我正在开发一个与现有后端服务接口的 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 最终都会作为下载而不是显示在浏览器中 window。是否有显示 pdf 的本机方式，或者是否需要 javascript 才能实现？

Answer 1

我有一个CodePen here that shows exactly this functionality using the free 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

Answer 2

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

该参数被设置为 true。我将其更改为 false，响应开始设置为 inline，上述显示方法开始工作。

如何将来自远程服务的 PDF 嵌入到 html 页面？

How to embed PDF from remote service into html page?

html

javascript

pdf

adobe-embed-api