0

我正在开发一个与现有后端服务交互的 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 来实现这一点？

4

2 回答 2

1

我这里有一个 CodePen ，它使用免费的Adob​​e 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
        }
      );
    });
});

您可以在此处获取自己的凭据

于 2020-06-12T15:25:42.057 回答
0

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

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

于 2020-06-15T12:59:12.070 回答