在HTML中嵌入PDF的推荐方法是什么?
iFrame吗? 对象? 嵌入?
Adobe是怎么说的呢?
在我的例子中,PDF是动态生成的,因此不能在刷新之前将其上传到第三方解决方案。
在HTML中嵌入PDF的推荐方法是什么?
iFrame吗? 对象? 嵌入?
Adobe是怎么说的呢?
在我的例子中,PDF是动态生成的,因此不能在刷新之前将其上传到第三方解决方案。
当前回答
我们的问题是,由于法律原因,我们不允许在硬盘上临时存储PDF文件。此外,在浏览器中将PDF显示为预览时,不应该重新加载整个页面。
首先我们尝试了PDF.jS。它与Firefox和Chrome浏览器中的Base64一起工作。然而,对于我们的PDF来说,它慢得令人无法接受。IE/Edge完全不能工作。
因此,我们尝试在HTML对象标记中使用Base64字符串。这同样不适用于IE/Edge(可能与PDF.js的问题相同)。在Chrome/Firefox/Safari中也没有问题。 这就是我们选择混合解决方案的原因。边缘,我们使用IFrame和所有其他浏览器的对象标签。 IFrame解决方案当然也适用于Chrome和其他浏览器。我们没有在Chrome上使用这个解决方案的原因是,尽管PDF显示正确,但当你在预览中点击“下载”时,Chrome会立即向服务器发出新的请求。所需的隐藏字段pdfHelperTransferData(用于发送PDF生成所需的表单数据)不再设置,因为PDF显示在IFrame中。关于此功能/错误,请参阅Chrome在下载PDF时发送两个请求(并取消其中一个)。
现在IE9和IE10的问题仍然存在。对于这些问题,我们放弃了预览解决方案,只是通过单击预览按钮将文档作为下载发送给用户(而不是预览)。我们已经尝试了很多,但即使我们找到了解决方案,为这一小部分用户付出的额外努力也不值得。您可以在这里找到我们的下载解决方案:下载不带IFrame刷新的PDF。
我们的Javascript:
var transferData = getFormAsJson()
if (isMicrosoftBrowser()) {
// Case IE / Edge (because doesn't recoginzie Pdf-Base64 use Iframe)
var form = document.getElementById('pdf-helper-form');
$("#pdfHelperTransferData").val(transferData);
form.target = "iframe-pdf-shower";
form.action = "serverSideFunctonWhichWritesPdfinResponse";
form.submit();
} else {
// Case non IE use Object tag instead of iframe
$.ajax({
url: "serverSideFunctonWhichRetrivesPdfAsBase64",
type: "post",
data: { downloadHelperTransferData: transferData },
success: function (result) {
$("#object-pdf-shower").attr("data", result);
}
})
}
我们的HTML:
<div id="pdf-helper-hidden-container" style="display:none">
<form id="pdf-helper-form" method="post">
<input type="hidden" name="pdfHelperTransferData" id="pdfHelperTransferData" />
</form>
</div>
<div id="pdf-wrapper" class="modal-content">
<iframe id="iframe-pdf-shower" name="iframe-pdf-shower"></iframe>
<object id="object-pdf-shower" type="application/pdf"></object>
</div>
要检查IE/Edge的浏览器类型,请参阅此处:如何使用JavaScript检测Internet Explorer (IE)和Microsoft Edge ?我希望这些发现能为其他人节省时间。
其他回答
同时使用<object>和<embed>将为您提供更广泛的浏览器兼容性。
<object data="http://yoursite.com/the.pdf" type="application/pdf" width="750px" height="750px">
<embed src="http://yoursite.com/the.pdf" type="application/pdf">
<p>This browser does not support PDFs. Please download the PDF to view it: <a href="http://yoursite.com/the.pdf">Download PDF</a>.</p>
</embed>
</object>
如果您不想自己托管PDF文件,或者希望使用额外的安全功能(例如防止用户下载PDF文件)自定义PDF查看器。我建议使用CloudPDF。https://cloudpdf.io
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CloudPDF Viewer</title>
<style>
body, html {
height: 100%;
margin: 0px;
}
</style>
</head>
<body style="height: 100%">
<div id="viewer" style="width: 800px; height: 500px; margin: 80px auto;"></div>
<script type="text/javascript" src="https://cloudpdf.io/viewer.min.js?version=0.1.0-beta.11"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
const config = {
documentId: 'eee2079d-b0b6-4267-9812-b6b9eadb9c60',
darkMode: true,
};
CloudPDF(config, document.getElementById('viewer')).then((instance) => {
});
});
</script>
</body>
</html>
创建一个容器来保存PDF < div id = "例二" > < / div > 告诉PDFObject要嵌入哪个PDF,以及在哪里嵌入它 < script src = " / js / pdfobject.js " > < /脚本> > <脚本PDFObject.embed(“/ pdf / sample-3pp.pdf”、“#例二”),> < /脚本 您可以选择使用CSS来指定视觉样式,包括尺寸、边框、页边距等。 <时尚> .pdfobject-container{高度:500px;} .pdfobject {border: 1px solid #666;} > < /风格
来源:https://pdfobject.com/
更新- adobepdf嵌入API
Adobe发布了他们的adobepdf嵌入API,这是完全免费的。由于他们自己创建了PDF格式,他们的API可能是最好的。
它提供了最高质量的PDF渲染。 您可以完全自定义用户体验并选择如何显示PDF。 您还可以分析PDF的使用情况,以便了解用户如何与PDF交互,包括在页面和搜索上花费的时间。
你所要做的就是创建一个api_key并在代码片段中使用它。
通过file_url显示PDF
下面是代码片段的示例,您可以将其添加到HTML中,并利用它们的API通过file_url显示PDF。你必须添加{location: {url: "url_of_the_pdf"}}配置。
<div id="adobe-dc-view"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView = new AdobeDC.View({clientId: "api_key", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content: { location: { url: "url_of_the_pdf" } },
metaData: { fileName: "file_name_to_display" }
}, {});
});
</script>
将PDF显示为缓冲区
下面是代码片段的示例,如果您有缓冲区(例如本地文件),您可以将其添加到HTML中,并利用它们的API来显示PDF。你必须添加{promise: <FILE_PROMISE>}配置。
<div id="adobe-dc-view"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView = new AdobeDC.View({clientId: "api_key", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content: { promise: <FILE_PROMISE> }
metaData: { fileName: "file_name_to_display" }
}, {});
});
</script>
如果你不想自己托管PDF.JS,你可以试试DocDroid。它类似于谷歌Drive PDF查看器,但允许自定义品牌。