Html 从javascript嵌入标签打印Pdf
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18835648/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Print Pdf from javascript embed tag
提问by mmaceachran
I have a PDF file and I am trying to print it via Javascript. I have tried this embed trick: Silent print a embedded PDFhowever, the print function never becomes available, it is always undefined.
我有一个 PDF 文件，我正在尝试通过 Javascript 打印它。我试过这个嵌入技巧： 然而，无声打印嵌入的 PDF，打印功能永远不可用，它总是未定义的。
I have tried the Iframe trick with this code:
我已经用这个代码尝试了 Iframe 技巧：
function printPDF() {
if(document.getElementById("pdfDocument").contentWindow.document.readyState === "complete") {
document.getElementById("pdfDocument").focus();
document.getElementById("pdfDocument").contentWindow.print();
} else {
setInterval(printPDF(), 1000);
}
}
(pdfDocument is the ID of the iframe) This does pop up the print dialogue, but printing a blank page. I would love the embed tag way to work. But why is the print function never becoming available?
(pdfDocument 是 iframe 的 ID) 这确实弹出了打印对话框，但打印了一个空白页。我会喜欢嵌入标签的工作方式。但是为什么打印功能永远无法使用呢？
Most of the posts on this subject are quite old. What is the best HTML5/jQuery way to do it? (or just regular JS at this point)
大多数关于这个主题的帖子都很旧。最好的 HTML5/jQuery 方法是什么？（或者此时只是普通的 JS）
EDIT:
编辑：
here is the JS code for the embed tag:
这是 embed 标签的 JS 代码：
function printPDF() {
alert(document.getElementById("pdfDocument").print);
//Wait until PDF is ready to print
if (typeof document.getElementById("pdfDocument").print == 'undefined') {
setTimeout(function(){printPDF();}, 1000);
} else {
var x = document.getElementById("pdfDocument");
x.print();
}
}
This keeps altering "undefined" every second. The Print option is never available. Any Ideas?
这每秒都在改变“未定义”。打印选项永远不可用。有任何想法吗？
回答by philhan
I put a bounty on this questions a week or so ago and it's expired. I'm going to post what I learned here after a lot of research for anyone in the future who might find this.
一周左右前，我悬赏这个问题，但它已过期。经过大量研究后，我将在这里发布我所学到的知识，供将来可能会发现此内容的任何人使用。
PDF's are displayed differently based on browser, browser version, browser configuration, and Operating System. There are a lot of variables so I'll talk about the most common situations here.
PDF 的显示方式因浏览器、浏览器版本、浏览器配置和操作系统而异。有很多变量，所以我将在这里讨论最常见的情况。
On all browsers I was unable to call any sort of print() method through Javascript, I was only able to use PdfActions. The OPENACTION would call print. I embedded these into the PDF using iText.
Chrome uses Adobe's viewer, which doesn't give access to any sort of print() method but does execute PdfActions embedded in the PDF. So you can embed an 'OpenAction' in a PDF and have the PDF call print whenever it's opened from any application that looks at those actions.
Firefox (above a certain version, all recent versions though) uses the Adobe viewer in Windows, which also recognizes PdfActions. However, in OSX it loses support for the Adobe viewer and switches to the baked in Firefox viewer (pdf.js). Which does not support PdfActions.
IE: I didn't really test much on IE. Mostly because I gave up on printing PDF's from Javascript after Firefox didn't work on OSX (a req. for me).
在所有浏览器上，我无法通过 Javascript 调用任何类型的 print() 方法，我只能使用 PdfActions。OPENACTION 将调用打印。我使用 iText 将这些嵌入到 PDF 中。
Chrome 使用 Adobe 的查看器，它不能访问任何类型的 print() 方法，但会执行嵌入在 PDF 中的 PdfActions。因此，您可以在 PDF 中嵌入“OpenAction”，并在从查看这些操作的任何应用程序打开时打印 PDF 调用。
Firefox（特定版本以上，但所有最新版本）使用 Windows 中的 Adobe 查看器，它也识别 PdfActions。但是，在 OSX 中，它失去了对 Adobe 查看器的支持并切换到了 Firefox 查看器 (pdf.js)。哪个不支持 PdfActions。
IE：我并没有在 IE 上进行太多测试。主要是因为在 Firefox 不能在 OSX 上工作后，我放弃了从 Javascript 打印 PDF（对我来说是一个要求）。
My PDF's were being generated by a server that I control so I ended up making service changes in my server and adding a get PNG service that generated a PNG based on the same markup that the PDF generation uses. Browsers handle images much better than PDFs, which I knew going in, but hoped that I would just be able to re-use the PDF generation service since it's used elsewhere in my code.
我的 PDF 是由我控制的服务器生成的，所以我最终在我的服务器中进行了服务更改，并添加了一个 get PNG 服务，该服务根据 PDF 生成使用的相同标记生成了一个 PNG。浏览器比 PDF 处理图像要好得多，我知道 PDF 是这样处理的，但希望我能够重新使用 PDF 生成服务，因为它在我的代码中的其他地方使用过。
It doesn't answer the question, but it's all the information I have. My suggestion to anyone who might find this in the future: ditch PDF if possible in this case and go simpler. Otherwise, please update this question if you know how to call print() through Javascript in FF preview pdf viewer in OSX.
它没有回答问题，但这是我拥有的所有信息。我对将来可能会发现此问题的任何人的建议：在这种情况下，如果可能，请放弃 PDF 并变得更简单。否则，如果您知道如何在 OSX 的 FF 预览 pdf 查看器中通过 Javascript 调用 print()，请更新此问题。
-Phil
-菲尔
回答by Rama Kathare
With Javascript, I am not sure we can do this. However can be achieved using script injection into the pdf file. If my understanding is correct this is what Google does.
使用 Javascript，我不确定我们可以做到这一点。但是可以使用脚本注入到 pdf 文件中来实现。如果我的理解是正确的，这就是谷歌所做的。
For example.
例如。
- Open the url : https://drive.google.com/viewerng/viewer?url=http://www.energy.umich.edu/sites/default/files/pdf-sample.pdf
- Now click on print icon.
- As you can see a new window with print command injected into the pdf is opened. Once the pdf is loaded the built in print command is triggered. You can see the print triggered whenever you refresh the page. That means the print behavior is attached to the document load event.
- 打开网址：https: //drive.google.com/viewerng/viewer?url =http: //www.energy.umich.edu/sites/default/files/pdf-sample.pdf
- 现在点击打印图标。
- 如您所见，打开了一个带有注入到 pdf 中的打印命令的新窗口。加载 pdf 后，将触发内置打印命令。您可以在刷新页面时看到触发的打印。这意味着打印行为附加到文档加载事件。
We can use iTextSharp to simulate above behavior.
我们可以使用 iTextSharp 来模拟上述行为。
回答by Arseny Smoogly
There is a way to render the whole pdf in a browser (instead of embedding an external application), which gives you full access to browser APIs in regard to the pdf.
有一种方法可以在浏览器中呈现整个 pdf（而不是嵌入外部应用程序），这使您可以完全访问与 pdf 相关的浏览器 API。
This is Mozilla's pdf implementation in JavaScript: https://github.com/mozilla/pdf.js/
And this is the showcase: http://mozilla.github.io/pdf.js/web/viewer.html(notice the print button on upper right).
这是 Mozilla 在 JavaScript 中的 pdf 实现：https: //github.com/mozilla/pdf.js/
这是展示：http: //mozilla.github.io/pdf.js/web/viewer.html（注意右上角的打印按钮）。
Check out the viewer code here for the details on how it works: https://github.com/mozilla/pdf.js/blob/master/web/viewer.js
在此处查看查看器代码以了解其工作原理的详细信息：https: //github.com/mozilla/pdf.js/blob/master/web/viewer.js
On the minus side — it's going to be way harder, than just embedding.
On the plus side, it will actually work.
不利的一面是——这将比嵌入更难。
从好的方面来说，它实际上会起作用。
回答by stomy
In Chrome you can run:
在 Chrome 中，您可以运行：
var toolbar = document.querySelector('#toolbar');
toolbar.shadowRoot.querySelector('#print').click();
