如何打印pdf.js文档？

Question

我使用pdf.js生成了一个文档，它可以正确显示。然而，我却找不到打印按钮。请问如何添加按钮以便让用户打印呢？

我正在使用Chrome浏览器。

- Dejo

---

一旦显示，提供<button onclick=window.print()>打印页面</button> - 如果您只想打印，则嵌入iframe。 - dandavis

Answer 1

尝试使用javascript函数window.print();，它将打开打印对话框。

您将需要在html中添加一个按钮，该按钮触发该命令 - 在pdf中不可能实现此功能。

因此，您需要使用iFrame，并使用类似以下内容的代码：

function printIt() {
    var wnd = window.open('http://your-pdf-url');
    wnd.print();
}

<input type="button" value="Print" onclick=printIt()>

window.print()无法正常工作，因为它会打印出周围的html内容。

编辑：

从您的评论中，我现在知道您想要打印canvas元素的内容 - 这要简单得多。

您不需要使用iframe，可以将按钮放在同一页上，并使用window.print();。

为了仅打印canvas元素并隐藏周围的内容（如按钮），您可以使用以下css语法：

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

@media print指定了只有在打印时才适用于网页的CSS代码。如果您现在将类.no-print分配给除画布元素以外的所有内容，则只会打印PDF。

如果您觉得更容易，也可以使用以下CSS代码：

@media print
{    
    *
    {
        display: none;
    }
    canvas 
    {
        display: inline;
    }
}

- maja

---

谢谢，但问题是我没有PDF的URL。我从服务器获取了PDF的base64表示形式，将其转换为数组，并从中创建了pdf.js文档。 - Dejo

@Dejo：您正在通过浏览器访问您的PDF文件 - 因此必须有一个URL开始生成PDF。如果将其放入iframe中，则还可以使用var wnd = document.getElementById("myframe").contentWindow;。 - maja

谢谢，但这并不容易，因为它是在画布元素中呈现的。 - Dejo

使用window.print()和几行仅打印的CSS来隐藏非PDF内容。 - dandavis

无法工作，它只显示一个空白页面。 难道不应该等待PDF加载吗？ - Anenth

Answer 2

如果您想保持一切有序，并尽可能少地使用jquery，可以尝试类似以下的内容：

<a href="#PATH_TO_PDF.pdf" target="_blank"  onclick="window.print()"> print PDF </a>

- KarateKid22

---

这只会打印父页面。 - Don D

Answer 3

我已经寻找这个问题的解决方案很久了，然后我发现了这个JS插件：

http://printjs.crabbly.com/

它像魔法一样运行！

- Jonathan Roy

---

我不是那个点踩的人，但我必须指出这个库在 FireFox 上不起作用。 - Haroldo_OK