如何将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最终都是下载，而不是显示在浏览器窗口中。有没有一种本机方式来显示PDF，或者是否需要java脚本来实现这一点？

Answer 1

我这里有一个代码围栏，它使用免费的Adobe DC视图SDK准确显示了此功能。除非覆盖本机浏览器查看器，否则无法控制 PDF 体验。我示例的相关代码如下。在我的示例中，PDF 是从另一个域获取的，但“content”参数将接受解析为 PDF 内容的数组缓冲区的任何 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

        }

      );

    });

});

Answer 2

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

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