当前位置：首页 > JavaScript

js实现pdf打印

2026-01-30 22:12:11JavaScript

使用jsPDF库生成PDF并打印

jsPDF是一个流行的JavaScript库，用于在客户端生成PDF文件。安装后可通过npm或直接引入CDN链接。

js实现pdf打印

// 引入jsPDF
import jsPDF from 'jspdf';

// 创建PDF实例
const doc = new jsPDF();

// 添加内容
doc.text('Hello World!', 10, 10);

// 打印PDF
doc.autoPrint();
window.open(doc.output('bloburl'));

使用浏览器原生打印功能

通过CSS媒体查询控制打印样式，调用window.print()触发浏览器打印对话框。

js实现pdf打印

<style>
@media print {
  .no-print {
    display: none;
  }
}
</style>

<button onclick="window.print()">打印页面</button>
<div class="no-print">此内容不会出现在打印结果中</div>

使用PDF.js渲染并打印

Mozilla的PDF.js库可解析和渲染现有PDF文件，支持自定义打印逻辑。

// 加载PDF文件
pdfjsLib.getDocument('document.pdf').promise.then(pdf => {
  pdf.getPage(1).then(page => {
    const viewport = page.getViewport({ scale: 1.0 });
    const canvas = document.createElement('canvas');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    page.render({ canvasContext: canvas.getContext('2d'), viewport });

    // 打印Canvas内容
    canvas.toBlob(blob => {
      const url = URL.createObjectURL(blob);
      const printWindow = window.open(url);
      printWindow.onload = () => printWindow.print();
    });
  });
});

使用html2canvas+jsPDF组合方案

先通过html2canvas将DOM转为Canvas，再用jsPDF生成可打印的PDF。

html2canvas(document.body).then(canvas => {
  const imgData = canvas.toDataURL('image/png');
  const pdf = new jsPDF();
  pdf.addImage(imgData, 'PNG', 0, 0);
  pdf.autoPrint();
  pdf.save('document.pdf'); // 或使用output('bloburl')在新窗口打开
});