使用Javascript、HTML5、AngularJS从浏览器打印嵌入的PDF
使用Javascript、HTML5、AngularJS从浏览器打印嵌入的PDF
提问于 2014-11-12 08:28:37
我从我的服务器将一个Base64编码的PDF作为字符串加载到我的JavaScript中。我的客户端应用程序使用的是AngularJS，HTML5。
我的HTML如下所示：
<div id="printablePdfContainer">
<iframe id="printablePdf" width="100%" height="100%"></iframe>
</div>我的JavaScript看起来像这样：
var pdfName = 'data:application/pdf;base64,' + data[0].PrintImage;
var embeddedPdf = document.getElementById('printablePdf');
embeddedPdf.setAttribute('src', pdfName);
$scope.printDocument(embeddedPdf);我的printDocument函数如下所示：
$scope.printDocument = function() {
var test = document.getElementById('printablePdf');
if (typeof document.getElementById('printablePdf').print === 'undefined') {
setTimeout(function(){$scope.printDocument();}, 1000);
} else {
var x = document.getElementById('printablePdf');
x.print();
}
};printDocument函数取自堆栈溢出(Silent print an embedded PDF)中的一个预先存在的问题，该问题给出了打印嵌入式PDF的答案。然而，这似乎不再起作用。我总是得到“未定义”的
typeof document.getElementById('printablePdf').print === 'undefined'检查一下。似乎.print并不存在或者别的什么。
所以，我的问题是:如何在不打开弹出窗口的情况下使用JavaScript在HTML5中打印嵌入的PDF？
回答 1
Stack Overflow用户
发布于 2017-12-22 08:23:39
要打印base64 pdf，您需要避免数据URI没有来源的事实，因此会被现代浏览器阻塞。
请参阅MDN：Data URLs上日期URL页面上的注释。
为了解决这个问题，必须直接引用相同的pdf，或者将pdf转换为对象/ blob url。
请参阅creating an object/blob URL上的MDNs说明
function b64toBlob(b64Data, contentType) {
var byteCharacters = atob(b64Data)
var byteArrays = []
for (let offset = 0; offset < byteCharacters.length; offset += 512) {
var slice = byteCharacters.slice(offset, offset + 512),
byteNumbers = new Array(slice.length)
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i)
}
var byteArray = new Uint8Array(byteNumbers)
byteArrays.push(byteArray)
}
var blob = new Blob(byteArrays, { type: contentType })
return blob
}
var pdfObjectUrl = URL.createObjectURL(b64toBlob(data[0].PrintImage, 'application/pdf'))
var embeddedPdf = document.getElementById('printablePdf')
embeddedPdf.setAttribute('src', pdfObjectUrl)
// Then to print
embeddedPdf.contentWindow.print()
一旦数据位于object URL中，浏览器的安全性就不会阻止contentWindow。print方法将存在于iframe的contentWindow上。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26877165
复制相关文章
相似问题