pdfMake - open()和print()函数不起作用

时间:2017-04-29 06:36:32

标签: javascript html html5 pdf pdfmake

我正在尝试学习如何使用 pdfMake 。我正在尝试使用openprint分别生成或打印信息。但是,当我点击触发事件的按钮时,新标签会打开一秒钟并消失。 打开的页面在历史记录中显示为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>

4 个答案:

答案 0 :(得分:13)

请检查浏览器中的任何类型的广告拦截器是否已关闭,然后重试。

答案 1 :(得分:0)

我在同一窗口中找到了打印解决方案。

在您的.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上测试

答案 2 :(得分:0)

对于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);

答案 3 :(得分:0)

PDFMake针对此问题有一个open issue

PDFMake创建以 blob:开头的URL,以打印/打开生成的PDF。问题是许多网站都使用这种URL模式来向用户显示不需要的弹出窗口。然后EasyList列出了该网址格式,广告拦截器开始屏蔽它。

因此,按照steffanjj的建议,禁用广告拦截器,您应该能够打印/打开生成的PDF。我只是想更详细地说明为什么会这样。