html 中加载pdf,在HTML中嵌入PDF的推荐方法？

George Mahar..

9

我们的问题是,出于法律原因,我们不允许在硬盘上临时存储PDF.此外,在浏览器中将PDF显示为"预览"时,不应重新加载整个页面.

首先我们尝试了PDF.jS. 它适用于Firefox和Chrome浏览器中的Base64.但是,我们的PDF格式慢得令人无法接受.IE/Edge根本不起作用.

因此,我们在HTML对象标记中使用Base64字符串进行了尝试.这再次对IE/Edge不起作用(可能与PDF.js相同).在Chrome/Firefox/Safari中再次没问题.这就是我们选择混合解决方案的原因.IE/Edge我们使用IFrame和所有其他浏览器使用object-tag.

IFrame解决方案当然也适用于Chrome和co.我们之前没有将此解决方案用于Chrome的原因是,尽管PDF正确显示,但只要您在预览中点击"下载",Chrome就会向服务器发出新请求.由于PDF显示在IFrame中,因此不再设置所需的隐藏字段pdfHelperTransferData(用于发送PDF生成所需的表单数据).对于此功能/错误,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