JavaScript结合前后端技术可实现PDF生成、编辑和预览：1. 生成PDF可用jsPDF或html2pdf.js在前端创建简单文档，或用Puppeteer在Node.js生成高质量PDF；2. 编辑PDF可通过PDF-LIB库修改内容，复杂操作建议后端集成PDFKit或Python工具处理；3. 预览PDF可使用<iframe>快速显示，或通过PDF.js实现高度定制的渲染控制。根据需求选择合适方案，避免客户端处理大文件。
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。
示例：
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>
总结建议
● 生成 PDF：前端用 jsPDF 或 html2pdf，后端用 Puppeteer 更稳定。
● 编辑 PDF：优先使用 PDF-Lib，复杂需求结合后端处理。
● 预览 PDF：简单场景用 iframe，需要定制体验用 PDF.js。
基本上就这些。根据项目需求选择合适组合，避免过度依赖客户端处理大文件。
