在HTML中嵌入PDF的推荐方法是什么?
iFrame吗? 对象? 嵌入?
Adobe是怎么说的呢?
在我的例子中,PDF是动态生成的,因此不能在刷新之前将其上传到第三方解决方案。
在HTML中嵌入PDF的推荐方法是什么?
iFrame吗? 对象? 嵌入?
Adobe是怎么说的呢?
在我的例子中,PDF是动态生成的,因此不能在刷新之前将其上传到第三方解决方案。
当前回答
Scribd不再要求你把你的文档放在他们的服务器上。如果你和他们一起创建一个账号,你就会得到一个出版商ID。只需要几行JavaScript代码就可以加载存储在您自己服务器上的PDF文件。
有关更多详细信息,请参见开发人员工具。
其他回答
我发现这工作得很好,浏览器处理它在firefox。我没有检查IE…
<script>window.location='url'</script>
这是我对AXIOS和Vue.js所做的:
axios({
url: `urltoPDFfile.pdf`,
method: 'GET',
headers: headers,
responseType: 'blob'
})
.then((response) => {
this.urlPdf = URL.createObjectURL(response.data)
})
.catch((error) => {
console.log('ERROR ', error)
})
将urlPDF动态添加到HTML:
<object width='100%' height='600px' :data='urlPdf' type='application/pdf'></object>
值得注意的PDF是您应该考虑的选项之一 它有一个免费的计划,除非你打算在pdf文件上进行实时在线协作
将以下iframe嵌入到任何html并享受结果:
<iframe width='1000' height='800' src='http://bit.ly/1JxrtjR' frameborder='0' allowfullscreen></iframe>
如果可能的话,使用本机解决方案,它总是最好的解决方案,因为它来自本机浏览器(使用embed或iframe),或者你可以使用这个小库来支持你:https://pdfobject.com
大多数人推荐使用著名的pdf。js。它一直工作得很好,直到我需要使用ShadowDOM。有些页面是空白的(白色),有些是黑色的。我不可能知道发生了什么,而且它正在制作中:)。
我们的问题是,由于法律原因,我们不允许在硬盘上临时存储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 ?我希望这些发现能为其他人节省时间。