JavaScript高效PDF打印

使用JavaScript直接从网页浏览器打印PDF并非易事，因为浏览器存在不一致性和安全考虑。但是，有几种技术可以有效地触发浏览器对PDF的打印对话框。本文探讨两种常用的方法：利用iframe和使用Print.js库。

目录

• 使用iframe标签打印PDF
• 使用Print.js库打印PDF
• 选择合适的方法

使用iframe标签打印PDF

这种方法很简单，不需要任何外部库。它将PDF嵌入到iframe中，然后从iframe的上下文中触发打印。

实现：

1. 嵌入PDF：使用<iframe>标签，将其src属性设置为PDF的URL，并使用CSS将其隐藏：

<iframe id="pdf-iframe" src="your-pdf-file.pdf" style="display: none;"></iframe>

2. 触发打印：使用JavaScript访问iframe的内容窗口并调用其print()方法：

function printPdf() {
  const iframe = document.getElementById('pdf-iframe');
  if (iframe.contentWindow) { // 检查contentWindow是否存在以防止错误
    iframe.contentWindow.focus(); // 确保在打印前iframe获得焦点
    iframe.contentWindow.print();
  } else {
    console.error("错误：无法访问iframe内容窗口。");
  }
}

3. 添加打印按钮：创建一个调用printPdf()的按钮：

<button onclick="printPdf()">打印PDF</button>

局限性：

• 浏览器兼容性：在不同浏览器中的可靠性有所不同。有些浏览器可能需要用户交互或特定权限。
• 控制有限：对页码范围或打印设置的控制最小。
• 安全性：直接嵌入PDF可能会带来安全风险，具体取决于PDF的来源。

使用Print.js库打印PDF

Print.js提供了一个更强大且功能丰富的解决方案，可以处理浏览器不一致性并提供更好的控制。它是一个轻量级的库，可以轻松集成到您的项目中。

实现：

1. 包含Print.js：使用CDN将Print.js库添加到您的HTML中：

<script src="https://cdnjs.cloudflare.com/ajax/libs/print.js/1.6.2/print.min.js"></script>

2. 触发打印：使用Print.js的printJS()函数：

function printPdf() {
  printJS({
    printable: 'your-pdf-file.pdf',
    type: 'pdf',
  });
}

3. 添加打印按钮（与之前相同）：

<button onclick="printPdf()">打印PDF</button>

优点：

• 改进的浏览器兼容性：有效地处理跨浏览器差异。
• 更多控制：与iframe方法相比，它提供了一些自定义选项。
• 更易于使用：更简单、更直观的API。

选择合适的方法

iframe方法更简单，但可靠性较低，并且控制较少。Print.js提供了一个更强大、功能更丰富且更易于使用的解决方案，但需要添加外部库。最佳选择取决于项目的需要，优先考虑易于实现、所需的控制和浏览器兼容性等因素。