当前位置：首页 > JavaScript

js实现pdf

2026-02-01 02:53:13JavaScript

使用jsPDF生成PDF

jsPDF是一个流行的JavaScript库，用于在客户端生成PDF文件。它支持文本、图像、表格等多种元素，并且可以自定义页面大小、方向等。

安装jsPDF：

npm install jspdf

基本使用示例：

import { jsPDF } from "jspdf";

const doc = new jsPDF();
doc.text("Hello world!", 10, 10);
doc.save("example.pdf");

使用PDFKit生成PDF

PDFKit是另一个强大的PDF生成库，适用于Node.js和浏览器环境。它提供了更底层的PDF操作能力。

安装PDFKit：

npm install pdfkit

基本使用示例：

const PDFDocument = require('pdfkit');
const fs = require('fs');

const doc = new PDFDocument();
doc.pipe(fs.createWriteStream('output.pdf'));
doc.fontSize(25).text('Some text with an embedded font!', 100, 100);
doc.end();

使用浏览器打印功能生成PDF

现代浏览器支持将网页内容打印为PDF，可以通过CSS设置打印样式。

示例代码：

window.print();

配套CSS：

@media print {
    body {
        background-color: white;
    }
    .no-print {
        display: none;
    }
}

使用html2pdf.js转换HTML为PDF

html2pdf.js能够将HTML元素转换为PDF，保留原始样式和布局。

安装html2pdf.js：

npm install html2pdf.js

使用示例：

import html2pdf from 'html2pdf.js';

const element = document.getElementById('content-to-export');
html2pdf().from(element).save();

使用PDF-lib处理现有PDF

PDF-lib可以创建和修改现有的PDF文档，支持添加文本、图像和表单字段等。

安装PDF-lib：

npm install pdf-lib

使用示例：

import { PDFDocument } from 'pdf-lib';

async function createPdf() {
    const pdfDoc = await PDFDocument.create();
    const page = pdfDoc.addPage([550, 750]);
    page.drawText('Hello World!', { x: 50, y: 700 });
    const pdfBytes = await pdfDoc.save();
    download(pdfBytes, "new.pdf", "application/pdf");
}

使用React-pdf生成PDF

React-pdf是为React应用设计的PDF生成库，采用声明式组件方式。

安装React-pdf：

npm install @react-pdf/renderer

使用示例：

js实现pdf

import { Document, Page, Text, View } from '@react-pdf/renderer';

const MyDocument = () => (
    <Document>
        <Page>
            <View>
                <Text>Hello World!</Text>
            </View>
        </Page>
    </Document>
);