当前位置：首页 > JavaScript

js实现pdf打印

2026-03-01 13:17:50JavaScript

使用jsPDF库生成PDF并打印

jsPDF是一个流行的JavaScript库，用于在客户端生成PDF文件。安装后，可以通过代码创建PDF内容并触发打印。

js实现pdf打印

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

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

// 添加文本内容
doc.text('Hello, this is a PDF generated by jsPDF!', 10, 10);

// 保存为PDF文件
doc.save('example.pdf');

// 直接打印（需要浏览器支持）
doc.autoPrint();
window.open(doc.output('bloburl'), '_blank');

使用window.print()打印网页内容

如果目标是打印网页的特定部分，可以通过CSS隐藏不需要的内容，并调用window.print()方法。

js实现pdf打印

// 打印整个页面
window.print();

// 打印特定元素
function printElement(elementId) {
    const printContent = document.getElementById(elementId).innerHTML;
    const originalContent = document.body.innerHTML;
    document.body.innerHTML = printContent;
    window.print();
    document.body.innerHTML = originalContent;
}

使用PDF.js渲染并打印PDF

PDF.js是Mozilla开发的库，用于在浏览器中渲染PDF文件。结合打印功能，可以实现PDF的预览和打印。

// 引入PDF.js库
import * as pdfjsLib from 'pdfjs-dist';

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

    // 渲染PDF页面到Canvas
    page.render({
        canvasContext: context,
        viewport: viewport
    }).promise.then(function() {
        // 打印Canvas内容
        const dataUrl = canvas.toDataURL('image/png');
        const printWindow = window.open('', '_blank');
        printWindow.document.write(`<img src="${dataUrl}" onload="window.print()">`);
    });
});

使用html2canvas捕获DOM并生成PDF

html2canvas可以将DOM元素转换为Canvas，再结合jsPDF生成PDF并打印。

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

function printDivAsPDF(elementId) {
    const element = document.getElementById(elementId);
    html2canvas(element).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF();
        pdf.addImage(imgData, 'PNG', 0, 0);
        pdf.autoPrint();
        window.open(pdf.output('bloburl'), '_blank');
    });
}

以上方法适用于不同场景，可以根据需求选择合适的方式实现PDF打印功能。