pdfMake - open() 和 print() 函数不工作
pdfMake - open() and print() functions are not working
我正在努力学习如何使用 pdfMake。我正在尝试分别使用 open
和 print
生成或打印信息。但是,当我单击触发事件的按钮时,一个新选项卡会打开一秒钟然后消失。
打开的页面在历史记录中显示为 blob:http://localhost:9999/93c1600e-3c64-42fe-8b44-fe6eeb995b5e
我无法找出错误。我正在关注 pdfMake 的官方 documentation。
请帮忙
function print(){
window.event.preventDefault()
// this is just a simulation of the open event, replacing it with print produces the same result
var docDefinition = { content: {text:'This is an sample PDF printed with pdfMake',fontSize:15} };
pdfMake.createPdf(docDefinition).open();
}
<!DOCTYPE HMTL>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.27/pdfmake.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.27/vfs_fonts.js"></script>
<script src="js/print.js"></script>
</head>
<body>
<main>
<button onclick="print()">Print Card</button>
</main>
</body>
</html>
请检查您浏览器中的任何类型的广告拦截器是否已关闭,然后重试。
我在 window.
中找到了打印解决方案
在您的 .html 文件中放入 iframe
<iframe id="printPdf" name="printPdf"></iframe>
iframe
需要样式来隐藏自己(我不知道为什么,但是如果我在iframe上定义宽度和高度,打印将不起作用):
#printPdf { position: fixed; top: 0px; left: 0px; display: block;
padding: 0px;border: 0px;margin: 0px;
visibility: hidden; opacity: 0;
}
最后,只需调用:
if ('safari') {
pdfMake.createPdf(content).open({}, window.frames['printPdf']);
setTimeout(function() {
window.frames['printPdf'].focus();
window.frames['printPdf'].print();
}, 2000)
} else {
pdfMake.createPdf(content).print({}, window.frames['printPdf']);
}
已在 Chrome v72、Firefox v65、Edge v18、Safari v12 上测试
对于 open(),即使没有广告拦截器也无法正常工作,所以我将其转换为 base64,然后是 blob,然后是 fileURL
var docDefinition = getRWABELPDF(data);
var createPdf = pdfMake.createPdf(docDefinition);
var base64data = null;
createPdf.getBase64(function(encodedString) {
base64data = encodedString;
console.log(base64data );
var byteCharacters = atob(base64data);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var file = new Blob([byteArray], { type: 'application/pdf;base64' });
var fileURL = URL.createObjectURL(file);
window.open(fileURL);
PDFMake 有一个 open issue 解决这个问题。
PDFMake 创建 URLs 从 blob: 到 print/open 生成的 PDF。问题是这种 URL 的模式被许多网站用来向用户显示不需要的弹出窗口。然后 EasyList 列出了这个 URL 模式,广告拦截器开始拦截它。
因此,正如 steffanjj 所建议的,禁用您的广告拦截器,您应该能够 print/open 生成的 PDF。我只是想更详细地解释一下为什么会这样。
这有助于我直接在浏览器中查看。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF Make</title>
<script src='js/pdfmake.min.js'></script>
<script src='js/vfs_fonts.js'></script>
<style>
#viewPdf { position: fixed; top: 0px; left: 0px; display: block; padding: 0px; border: 0px; margin: 0px; width: 100%; height: 100%; }
</style>
</head>
<body>
<iframe id="viewPdf" name="viewPdf"></iframe>
<script>
const docDefinition = {
pageMargins: [ 0, 0, 0, 0 ],
content: 'This is an sample PDF printed with pdfMake'
};
pdfMake.createPdf(docDefinition).open(window.frames['viewPdf']);
</script>
</body>
</html>
我正在努力学习如何使用 pdfMake。我正在尝试分别使用 open
和 print
生成或打印信息。但是,当我单击触发事件的按钮时,一个新选项卡会打开一秒钟然后消失。
打开的页面在历史记录中显示为 blob:http://localhost:9999/93c1600e-3c64-42fe-8b44-fe6eeb995b5e
我无法找出错误。我正在关注 pdfMake 的官方 documentation。
请帮忙
function print(){
window.event.preventDefault()
// this is just a simulation of the open event, replacing it with print produces the same result
var docDefinition = { content: {text:'This is an sample PDF printed with pdfMake',fontSize:15} };
pdfMake.createPdf(docDefinition).open();
}
<!DOCTYPE HMTL>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.27/pdfmake.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.27/vfs_fonts.js"></script>
<script src="js/print.js"></script>
</head>
<body>
<main>
<button onclick="print()">Print Card</button>
</main>
</body>
</html>
请检查您浏览器中的任何类型的广告拦截器是否已关闭,然后重试。
我在 window.
中找到了打印解决方案在您的 .html 文件中放入 iframe
<iframe id="printPdf" name="printPdf"></iframe>
iframe
需要样式来隐藏自己(我不知道为什么,但是如果我在iframe上定义宽度和高度,打印将不起作用):
#printPdf { position: fixed; top: 0px; left: 0px; display: block;
padding: 0px;border: 0px;margin: 0px;
visibility: hidden; opacity: 0;
}
最后,只需调用:
if ('safari') {
pdfMake.createPdf(content).open({}, window.frames['printPdf']);
setTimeout(function() {
window.frames['printPdf'].focus();
window.frames['printPdf'].print();
}, 2000)
} else {
pdfMake.createPdf(content).print({}, window.frames['printPdf']);
}
已在 Chrome v72、Firefox v65、Edge v18、Safari v12 上测试
对于 open(),即使没有广告拦截器也无法正常工作,所以我将其转换为 base64,然后是 blob,然后是 fileURL
var docDefinition = getRWABELPDF(data);
var createPdf = pdfMake.createPdf(docDefinition);
var base64data = null;
createPdf.getBase64(function(encodedString) {
base64data = encodedString;
console.log(base64data );
var byteCharacters = atob(base64data);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var file = new Blob([byteArray], { type: 'application/pdf;base64' });
var fileURL = URL.createObjectURL(file);
window.open(fileURL);
PDFMake 有一个 open issue 解决这个问题。
PDFMake 创建 URLs 从 blob: 到 print/open 生成的 PDF。问题是这种 URL 的模式被许多网站用来向用户显示不需要的弹出窗口。然后 EasyList 列出了这个 URL 模式,广告拦截器开始拦截它。
因此,正如 steffanjj 所建议的,禁用您的广告拦截器,您应该能够 print/open 生成的 PDF。我只是想更详细地解释一下为什么会这样。
这有助于我直接在浏览器中查看。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF Make</title>
<script src='js/pdfmake.min.js'></script>
<script src='js/vfs_fonts.js'></script>
<style>
#viewPdf { position: fixed; top: 0px; left: 0px; display: block; padding: 0px; border: 0px; margin: 0px; width: 100%; height: 100%; }
</style>
</head>
<body>
<iframe id="viewPdf" name="viewPdf"></iframe>
<script>
const docDefinition = {
pageMargins: [ 0, 0, 0, 0 ],
content: 'This is an sample PDF printed with pdfMake'
};
pdfMake.createPdf(docDefinition).open(window.frames['viewPdf']);
</script>
</body>
</html>