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

Answer 2

我发现服务器正在使用水晶报告来生成PDF并“导出”它。它使用了一个函数，方法调用中的第三个参数是 。ExportToHttpResponse(...)bool asAttachment该参数被设置为 true。我将其更改为 false，并且响应开始设置为，并且上述显示方法开始工作。inline