打印pdf而不用在视觉上打开它
我想要构建的是通过单击按钮我想触发PDF文件的打印,但不打开它。
+-----------+ | Print PDF | +-----------+ ^ Click *---------> printPdf(pdfUrl)
我第一次尝试它的方式是使用iframe:
var $iframe = null; // This is supposed to fix the onload bug on IE, but it's not fired window.printIframeOnLoad = function() { if (!$iframe.attr("src")) { return; } var PDF = $iframe.get(0); PDF.focus(); try { // This doesn't work on IE anyways PDF.contentWindow.print(); // I think on IE we can do something like this: // PDF.document.execCommand("print", false, null); } catch (e) { // If we can't print it, we just open it in the current window window.location = url; } }; function printPdf(url) { if ($iframe) { $iframe.remove(); } $iframe = $('', { class: "hide", id: "idPdf", // Supposed to be a fix for IE onload: "window.printIframeOnLoad()", src: url }); $("body").prepend($iframe); }
这适用于Safari(桌面和iOS)和Chrome(我们可以将它概括为webkit吗?)。
在Firefox上, PDF.contentWindow.print()
以permission denied
错误结束(即使pdf是从同一个域加载的)。
在IE(11)上, onload
处理程序无法正常工作。
现在,我的问题是:是否还有另一种更好的方法来打印PDF,而无需在视觉上将其打开给用户?
跨浏览器的事情在这里至关重要。 我们应该尽可能多地支持浏览器。
实现这一目标的最佳方法是什么? 我的开始是好的吗? 怎么完成它?
我们现在在2016年,我觉得在整个浏览器中实施这仍然很痛苦。
更新 :此链接详细介绍了一个优雅的解决方案,涉及编辑第一页的页面属性并在页面打开时添加操作。 适用于所有浏览器(因为浏览器将执行放置在actions部分中的JavaScript)。 需要Adobe Acrobat Pro。
2016年似乎没有给印刷问题带来新的进步。 有一个类似的问题,并使打印跨浏览器我使用PDF.JS解决它,但不得不对源代码进行单线程添加(他们要求你在任何方面建立它)。
想法:
- 从https://mozilla.github.io/pdf.js/getting_started/#download下载预构建的稳定版本,并将“build”和“web”文件夹添加到项目中。
-
viewer.html
文件是使用丰富的界面呈现PDF并包含打印function的文件。 我在该文件中添加了一个链接到我自己的JavaScript,它只是在延迟后触发window.print()。
添加到查看器的链接:
autoPrint.js
javascript:
(function () { function printWhenReady() { if (PDFViewerApplication.initialized) { window.print(); } else { window.setTimeout(printWhenReady, 3000); } }; printWhenReady(); })();
-
然后,我可以在iframe的src中调用
viewer.html?file=
并隐藏它。 由于Firefox,必须使用可见性,而不是显示样式:
结果:在短暂延迟后显示打印对话框,其中PDF对用户隐藏。
在Chrome,IE,Firefox中测试过。
花了几个小时的时间试图弄清楚这一点,这里有很多搜索是我确定的…
用于打印的HTML5 Web API规范指示其中一个printing steps
必须触发beforeprint ,一个简单的事件(一个不可取消的事件),到正在打印的Document的窗口对象(以及任何嵌套的浏览上下文,这个与iframe相关,以允许在打印之前更改文档。 此步骤是浏览器的内部步骤,而不是您可以调整的步骤。 在此过程中,浏览器的打印对话框有时会显示文件的预览(Chrome会执行此操作)…因此,如果您的目标是永远不会将文件显示给查看器,则可能会卡住。
最接近实现这一目标的方法是创建一个index.html
文件,该文件有一个按钮,其中包含提供上下文的data- *属性。 将data-print-resource-uri
属性中的path / filename.ext更改为您自己的本地文件。
Express Express
Welcome to Express
然后在print.js
文件中,我尝试了一些东西,但从来没有让它工作(留下我在评论中玩过的不同的东西)。
// Reference vars var printButton = document.getElementById('printFile'); var printFrame = document.getElementById('printf'); // onClick handler printButton.onclick = function(evt) { console.log('evt: ', evt); printBlob('printf', printButton.getAttribute('data-print-resource-uri'), printButton.getAttribute('data-print-resource-type')); } // Fetch the file from the server function getFile( fileUri, fileType, callback ) { var xhr = new XMLHttpRequest(); xhr.open('GET', fileUri); xhr.responseType = 'blob'; xhr.onload = function(e) { // Success if( 200 === this.status ) { // Store as a Blob var blob = new Blob([this.response], {type: fileType}); // Hang a URL to it blob = URL.createObjectURL(blob); callback(blob); } else { console.log('Error Status: ', this.status); } }; xhr.send(); } function printBlob(printFrame, fileUri, fileType) { // Debugging console.log('inside of printBlob'); console.log('file URI: ', fileUri); console.log('file TYPE: ', fileType); // Get the file getFile( fileUri, fileType, function(data) { loadAndPrint(printFrame, data, fileType); }); } function loadAndPrint(printFrame, file, type) { // Debugging console.log('printFrame: ', printFrame); console.log('file: ', file); window.frames[printFrame].src = file; window.frames[printFrame].print(); /* // Setup the print window content var windowContent = ''; windowContent += '' windowContent += 'Print canvas '; windowContent += '' windowContent += ''; windowContent += ''; windowContent += ''; // Setup the print window var printWin = window.open('','','width=340,height=260'); printWin.document.open(); printWin.document.write(windowContent); printWin.document.close(); printWin.focus(); printWin.print(); printWin.close(); */ }
我认为,如果你能使用Blob
正常工作,那么在你想要的跨浏览器方法中可能会发挥最佳效果。
我找到了一些关于这个主题的参考资料,可能会有所帮助:
-
如何使用JavaScript将pdf文件直接发送到打印机?
-
仅使用url打印网页而无需打开新窗口?