怎样使用JavaScript操作PDF文档（生成、编辑、预览）？-js教程-PHP中文网

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

夜晨

发布： 2025-09-28 10:08:02

原创

724人浏览过

JavaScript结合前后端技术可实现PDF生成、编辑和预览：1. 生成PDF可用jsPDF或html2pdf.js在前端创建简单文档，或用Puppeteer在Node.js生成高质量PDF；2. 编辑PDF可通过PDF-LIB库修改内容，复杂操作建议后端集成PDFKit或Python工具处理；3. 预览PDF可使用<iframe>快速显示，或通过PDF.js实现高度定制的渲染控制。根据需求选择合适方案，避免客户端处理大文件。

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

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

1. 生成 PDF

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

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

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

示例代码：

立即学习“Java免费学习笔记（深入）”；

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。

示例：

AI图像编辑器

使用文本提示编辑、变换和增强照片

查看详情

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，无需下载，有以下方式：

● <iframe> 标签：最简单的方法。

<iframe src="sample.pdf" width="100%" height="500px"></iframe>

登录后复制

● PDF.js（Mozilla 开源库）：功能完整，支持自定义控件。

适用于需要精确控制渲染、搜索、缩放的场景。

基本用法：

<canvas id="pdf-render"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
<script>
  const pdfUrl = 'sample.pdf';
  pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
    return pdf.getPage(1);
  }).then(page => {
    const canvas = document.getElementById('pdf-render');
    const ctx = canvas.getContext('2d');
    const viewport = page.getViewport({ scale: 1.5 });
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    page.render({ canvasContext: ctx, viewport });
  });
</script>

登录后复制