当前位置：首页 > JavaScript

js实现pdf

2026-03-14 01:06:22JavaScript

使用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是另一个强大的JavaScript PDF生成库，适用于Node.js和浏览器环境。

安装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();

使用html2pdf.js转换HTML为PDF

html2pdf.js可以将HTML元素直接转换为PDF，适合已有HTML内容的情况。

安装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 modifyPdf() {
  const existingPdfBytes = await fetch('existing.pdf').then(res => res.arrayBuffer());
  const pdfDoc = await PDFDocument.load(existingPdfBytes);
  const page = pdfDoc.getPages()[0];
  page.drawText('Added text!', { x: 50, y: 50 });
  const pdfBytes = await pdfDoc.save();
  // 保存或下载处理后的PDF
}

浏览器打印API生成PDF

现代浏览器支持通过打印API将网页内容保存为PDF。

示例代码：

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

CSS媒体查询优化打印样式：

@media print {
  body {
    margin: 0;
    padding: 0;
  }
  .no-print {
    display: none;
  }
}

服务端生成PDF（Node.js）

在Node.js环境中，可以使用puppeteer将网页转换为PDF。

安装puppeteer：

npm install puppeteer

示例代码：

js实现pdf

const puppeteer = require('puppeteer');

async function generatePDF() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com', {waitUntil: 'networkidle0'});
  await page.pdf({path: 'example.pdf', format: 'A4'});
  await browser.close();
}