登录
首页 >  文章 >  前端

JavaScript如何操作PDF文档？生成编辑预览全攻略

时间：2026-04-06 22:30:17 276浏览 收藏

JavaScript虽无法原生操作PDF，但通过jsPDF、html2pdf.js、Puppeteer、PDF-LIB和PDF.js等成熟工具链，可高效实现PDF的前端生成、轻量编辑与高度定制化预览；本文系统梳理了各场景下的最佳实践方案——从简单文本导出到服务端高质量渲染，从水印添加到多页合并，再到免下载在线阅读，帮你避开性能陷阱、选对技术组合，在Web应用中流畅驾驭PDF全流程。

怎样使用JavaScript操作PDF文档（生成、编辑、预览）？

JavaScript 本身不能直接操作 PDF 文档，但结合前端和后端技术，可以实现 PDF 的生成、编辑和预览。以下是常见的解决方案和使用方法。

1. 生成 PDF

在浏览器或 Node.js 环境中，可以通过以下库生成 PDF：

● jsPDF：最流行的客户端 PDF 生成库。

你可以用它创建简单的 PDF 文件，支持添加文本、图片、表格等。

示例代码：

import { jsPDF } from "jspdf";

const doc = new jsPDF();
doc.text("Hello world!", 10, 10);
doc.save("sample.pdf"); // 下载 PDF
● html2pdf.js：基于 jsPDF 和 html2canvas，可将 HTML 元素导出为 PDF。

适合将网页内容（如报表、简历）转为 PDF。

示例：

import html2pdf from 'html2pdf.js';

const element = document.getElementById('content');
html2pdf().from(element).save();
● Puppeteer（Node.js）：通过无头浏览器生成高质量 PDF。

适合服务端生成复杂页面的 PDF。

示例：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setContent('<h1>Hello PDF</h1>');
  await page.pdf({ path: 'output.pdf', format: 'A4' });
  await browser.close();
})();

2. 编辑 PDF

JavaScript 原生不支持编辑现有 PDF，但可通过以下工具实现：

● PDF-LIB（Node.js / 浏览器）：功能强大的库，支持读取、修改、合并 PDF。

可以添加文本、图像、水印，或拆分/合并文件。

示例：向 PDF 添加文字

import { PDFDocument } from 'pdf-lib';
import fs from 'fs';

const pdfBytes = fs.readFileSync('input.pdf');
const pdfDoc = await PDFDocument.load(pdfBytes);

const pages = pdfDoc.getPages();
const firstPage = pages[0];
firstPage.drawText('Edited with JavaScript', { x: 100, y: 100 });

const modifiedPdf = await pdfDoc.save();
fs.writeFileSync('edited.pdf', modifiedPdf);
● 后端处理（推荐复杂编辑）

对于加密、表单填充、OCR 等高级操作，建议使用 Node.js 调用 PDFKit 或与 Python + PyPDF2 / pdfrw 集成，或调用 PDF.js + 后端服务 处理后再返回。

3. 预览 PDF

在网页中预览 PDF，无需下载，有以下方式：

●