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

Question

I'm developing a UI that interfaces with an existing back-end service. The UI needs to make a call to the back-end server for a PDF file that will either be displayed on the existing page or in a new tab.

I've tried all the options I've seen listed on 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>

In every case, the pdf winds up as a download rather than being displayed in a browser window. Is there a native way to display a pdf or is javascript required to make this happen?

Answer 1

I have a CodePen here that shows exactly this functionality using the free Adobe DC View SDK . You can't control the PDF experience unless you override the native browser viewer. The relevant code for my example is below. In my example, the PDF is fetched from another domain but the "content" parameter will accept any Promise that resolves to an ArrayBuffer for the PDF content. Your PDF can be stored anywhere or created on the fly and then displayed within the HTML page.

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
        }
      );
    });
});

You can get your own credentials here

Answer 2

I found that the server was using CrystalReports to generate the PDF and "export" it. It used a function ExportToHttpResponse(...) and the third parameter in the method call was bool asAttachment .

That parameter was being set to true. I changed it to false and the response began being set to inline and the above display methods began working.