使用pdf.js打印PDF

Question

我正在使用pdf.js将一个单页面的PDF嵌入到网页中，我希望能够只打印PDF而不是整个HTML页面。这是否可行？

- colincameron

---

你使用什么浏览器？我让 viewer.js 中的 supportsPrinting 方法默认返回 true，这样我就可以在 Chrome 中使用 pdf.js 提供的打印功能。 - KristofMols

Answer 1

我之前使用pdf.js将一个pdf文档加载到画布上。

这个画布只包含一页。以下是适用于单页的解决方法：

  var canvas = document.getElementById('pdfPage');
  var win = window.open('', '', '');
  var html = "<img src='" + canvas.toDataURL() + "'>";
  win.document.write(html);
  win.document.close();
  win.focus();
  win.print();
  win.close();

我仍需了解多页所需的内容。如果有发现，我会编辑此答案。

我必须说这种方法并不是最佳选择，因为它并没有以“相机就绪”的方式或者说原始形式打印pdf页面。它打印的是pdf页面的图像。区别在于应该不存在的边距和页眉/页脚，因为它们在原始文档中并不存在。因此，我将寻找一种能够像pdf.js查看器打印那样以原始形式打印并忠实于原始文档的方法。

- toddmo

---

你找到什么了吗？ - The Unknown Dev

@Jamil，请搜索我的答案以获取PDF文件。我已经不在那家公司了。 - toddmo

Answer 2

我们可以将以下代码放在 viewer.js 文件末尾，这将自动打印 PDF：

(function () {
    function printWhenReady() {
        try{
            if (PDFViewerApplication.initialized) {
                window.print();
            }
            else {
                window.setTimeout(printWhenReady, 3000);
            }
        }catch(ex){
            window.setTimeout(printWhenReady, 3000);
        }
    };

    printWhenReady();
})();

- JPatel

Answer 3

您可以使用Print.js库来打印PDF文件。

访问以下网址：https://printjs.crabbly.com/

- A Tsai Kao

Answer 4

JPatel的答案为我提供了一个适合我的解决方案。

我有一个带版本控制的文档管理系统。如果我选择一个文档或特定版本，我将得到一个预览。我想要能够从一个按钮中打印可见的预览。

PDF容器如下：

<object id="@_pdfPreviewId" type="application/pdf" data="@GetOpenPdfPath()"></object>

我使用 Blazor，所以 @_pdfPreviewId 是一个随机生成的 ID，并且 @GetOpenPdfPath() 返回预览文件的下载路径。

现在：

1. 我将新的下载 URL 输入到预览中
2. 当用户按下打印按钮时，我调用以下 JS 函数：

async function print(pdfContainerId) {
    var container = document.getElementById(pdfContainerId);
    var pdfWindow = container.contentWindow;

    var app = pdfWindow.PDFViewerApplication;

    while (!(app.initialized && app.downloadComplete)) {
        await delay(1000);
    }

    pdfWindow.print();
}

const delay = ms => new Promise(res => setTimeout(res, ms));

现在循环会一直执行，直到预览准备好，然后出现这个漂亮的对话框...

...出现了

- Gabriel Weidmann

Answer 5

我终于解决了问题。

我不能在这里发布我的代码，但是这是我所做的：

我将PDF渲染到两个画布上，一个小画布用于缩略图，一个巨大的画布用于打印（隐藏）。然后我有一个打印按钮，它会打开一个包含一个img标签的新窗口，该标签包含使用toImageURL()的巨大画布的内容。在新窗口上调用print()函数，然后调用close()自动关闭它一旦打印完成。

这导致几乎全尺寸的PDf打印，尽管带有浏览器中通常的页面编号和日期戳。

- colincameron

---

一切都在我的答案中。你只需要阅读文档并思考一下，而不是盲目地复制粘贴一些你不理解的代码。 - colincameron

我更喜欢盲目复制粘贴代码，而不是阅读答案告诉我应该自己多思考的建议。 - BvuRVKyUVlViVIc7

我在文档中没有找到toImageURL。但是我在文档中找到了toDataURL()。我使用它并且成功地使它工作了。 - Ryand.Johnson

接受的答案得分为负数是很奇怪的，这不应该发生。 - Imran Zahoor

@ImranZahoor 我想人们不喜欢我解释我所做的事情，而不是只发布代码（这些代码属于客户，所以我无法分享）。 - colincameron