如何实现前端打印和PDF导出功能

在现代 web 应用中，有时候我们需要将网页内容打印出来或导出为 PDF 格式，例如生成电子报表、发票或者是保存记录等。本文将介绍如何使用前端技术实现网页打印和 PDF 导出功能。

CSS 媒体查询允许我们为不同媒体类型指定不同样式，如屏幕、打印等。通过使用 @media print 媒体查询，我们可以指定打印时网页的样式。

@media print {
  /* 打印样式 */
}

我们可以在 @media print 中指定需要隐藏或调整样式的元素。例如，可以隐藏导航栏和页脚，只打印页面主要内容。

@media print {
  nav, footer {
    display: none;
  }
}

JavaScript 提供了 window.print() 方法，可以在脚本中调用该方法来触发浏览器的打印功能。

function printPage() {
  window.print();
}

为了方便打印，我们可以添加打印按钮或菜单项，并在点击时调用 printPage() 方法。

<button onclick="printPage()">打印</button>

有许多第三方 JavaScript 库可以将网页内容导出为 PDF 格式。其中一些流行的库包括 jsPDF，pdfmake，html2pdf 等。这些库提供了许多选项和功能，可以满足不同的需求。

例如，使用 jsPDF 可以将网页内容转换为 PDF。

function exportToPDF() {
  const doc = new jsPDF();
  doc.text('Hello world!', 10, 10);
  doc.save('document.pdf');
}

上述代码创建了一个新的 PDF 对象，向其中添加文本并保存为 PDF 文件。

现代浏览器支持将网页内容导出为 PDF 的原生 API。其中一种方法是使用 window.print() 方法，并在打印对话框中选择“另存为 PDF”。

function exportToPDF() {
  window.print();
}

这种方法的优点是无需依赖第三方库，并且可以利用浏览器的打印样式。

通过使用 CSS 媒体查询和 JavaScript 打印 API，我们可以实现网页打印功能。同时，使用第三方库或浏览器原生 API，我们可以将网页内容导出为 PDF 格式。这些功能使我们能够更好地管理和分享网页内容，为用户提供更多选择。