首页 > 文章 > 前端

JavaScript操作PDF：生成、编辑与预览方法全解析

时间：2025-12-13 13:55:26 203浏览收藏

推广推荐

支持 PC / 移动端，安全直达

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《JavaScript如何操作PDF（生成、编辑、预览）？》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

JavaScript结合前后端技术可实现PDF生成、编辑和预览：1. 生成PDF可用jsPDF或html2pdf.js在前端创建简单文档，或用Puppeteer在Node.js生成高质量PDF；2. 编辑PDF可通过PDF-LIB库修改内容，复杂操作建议后端集成PDFKit或Python工具处理；3. 预览PDF可使用快速显示，或通过PDF.js实现高度定制的渲染控制。根据需求选择合适方案，避免客户端处理大文件。</p></blockquote><p><img src="/uploads/20251213/1765605308693cffbc0eb2b.png" alt="怎样使用JavaScript操作PDF文档（生成、编辑、预览）？"></p><p>JavaScript 本身不能直接操作 PDF 文档，但结合前端和后端技术，可以实现 PDF 的生成、编辑和预览。以下是常见的解决方案和使用方法。</p> <h3>1. 生成 PDF</h3> <p>在浏览器或 Node.js 环境中，可以通过以下库生成 PDF：</p> <font>● <strong>jsPDF</strong>：最流行的客户端 PDF 生成库。</font><br><p>你可以用它创建简单的 PDF 文件，支持添加文本、图片、表格等。</p> <p>示例代码：</p> <pre>import { jsPDF } from "jspdf"; const doc = new jsPDF(); doc.text("Hello world!", 10, 10); doc.save("sample.pdf"); // 下载 PDF </pre> <font>● <strong>html2pdf.js</strong>：基于 jsPDF 和 html2canvas，可将 HTML 元素导出为 PDF。</font><br><p>适合将网页内容（如报表、简历）转为 PDF。</p> <p>示例：</p> <pre>import html2pdf from 'html2pdf.js'; const element = document.getElementById('content'); html2pdf().from(element).save(); </pre> <font>● <strong>Puppeteer（Node.js）</strong>：通过无头浏览器生成高质量 PDF。</font><br><p>适合服务端生成复杂页面的 PDF。</p> <p>示例：</p> <pre>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(); })(); </pre> <h3>2. 编辑 PDF</h3> <p>JavaScript 原生不支持编辑现有 PDF，但可通过以下工具实现：</p> <font>● <strong>PDF-LIB（Node.js / 浏览器）</strong>：功能强大的库，支持读取、修改、合并 PDF。</font><br><p>可以添加文本、图像、水印，或拆分/合并文件。</p> <p>示例：向 PDF 添加文字</p> <pre>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); </pre> <font>● 后端处理（推荐复杂编辑）</font><br><p>对于加密、表单填充、OCR 等高级操作，建议使用 Node.js 调用 <strong>PDFKit</strong> 或与 <strong>Python + PyPDF2 / pdfrw</strong> 集成，或调用 <strong>PDF.js + 后端服务</strong> 处理后再返回。</p> <h3>3. 预览 PDF</h3> <p>在网页中预览 PDF，无需下载，有以下方式：</p> <font>● <strong><iframe> 标签</strong>：最简单的方法。</font><br><pre><iframe src="sample.pdf" width="100%" height="500px"></iframe> </pre> <font>● <strong>PDF.js（Mozilla 开源库）</strong>：功能完整，支持自定义控件。</font><br><p>适用于需要精确控制渲染、搜索、缩放的场景。</p> <p>基本用法：</p> <pre><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> </pre> <h3>总结建议</h3> <p>● 生成 PDF：前端用 <strong>jsPDF</strong> 或 <strong>html2pdf</strong>，后端用 <strong>Puppeteer</strong> 更稳定。<br> ● 编辑 PDF：优先使用 <strong>PDF-Lib</strong>，复杂需求结合后端处理。<br> ● 预览 PDF：简单场景用 <strong>iframe</strong>，需要定制体验用 <strong>PDF.js</strong>。</p> <p>基本上就这些。根据项目需求选择合适组合，避免过度依赖客户端处理大文件。</p><p>文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript操作PDF：生成、编辑与预览方法全解析》文章吧，也可关注golang学习网公众号了解相关技术文章。</p> </div> <div class="labsList"> </div> </div>  <div class="contBoxNor"> <div class="contTit"> <div class="tit">相关阅读</div> <a href="/articlelist.html" class="more">更多></a> </div> <ul class="latestReadList"> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  7个月前  |   <a href="javascript:;" class="aLightGray" title="提升">提升</a> <a href="javascript:;" class="aLightGray" title="箭头函数">箭头函数</a> <a href="javascript:;" class="aLightGray" title="函数表达式">函数表达式</a> <a href="javascript:;" class="aLightGray" title="函数声明">函数声明</a> <a href="javascript:;" class="aLightGray" title="Function构造函数">Function构造函数</a> </div> <div class="tit lineOverflow"><a href="/article/207000.html" title="JavaScript函数定义及示例详解" class="aBlack">JavaScript函数定义及示例详解</a></div> <div class="opt"> <span><i class="view"></i>502</span> <span class="collectBtn user_collection" data-id="207000" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  2年前  |   <a href="javascript:;" class="aLightGray" title="CSS">CSS</a> <a href="javascript:;" class="aLightGray" title="优化">优化</a> <a href="javascript:;" class="aLightGray" title="体验">体验</a> </div> <div class="tit lineOverflow"><a href="/article/72840.html" title="优化用户界面体验的秘密武器：CSS开发项目经验大揭秘" class="aBlack">优化用户界面体验的秘密武器：CSS开发项目经验大揭秘</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="72840" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  2年前  |   <a href="javascript:;" class="aLightGray" title="图片轮播">图片轮播</a> <a href="javascript:;" class="aLightGray" title="微信小程序">微信小程序</a> <a href="javascript:;" class="aLightGray" title="特效">特效</a> </div> <div class="tit lineOverflow"><a href="/article/76259.html" title="使用微信小程序实现图片轮播特效" class="aBlack">使用微信小程序实现图片轮播特效</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="76259" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1年前  |   <a href="javascript:;" class="aLightGray" title="sessionStorage">sessionStorage</a> <a href="javascript:;" class="aLightGray" title="存储能力">存储能力</a> <a href="javascript:;" class="aLightGray" title="限制解析">限制解析</a> </div> <div class="tit lineOverflow"><a href="/article/83771.html" title="解析sessionStorage的存储能力与限制" class="aBlack">解析sessionStorage的存储能力与限制</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="83771" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1年前  |   <a href="javascript:;" class="aLightGray" title="团队合作">团队合作</a> <a href="javascript:;" class="aLightGray" title="冒泡事件">冒泡事件</a> <a href="javascript:;" class="aLightGray" title="促进作用">促进作用</a> </div> <div class="tit lineOverflow"><a href="/article/85057.html" title="探索冒泡活动对于团队合作的推动力" class="aBlack">探索冒泡活动对于团队合作的推动力</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="85057" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> </ul> </div>  <div class="contBoxNor"> <div class="contTit"> <div class="tit">最新阅读</div> <a href="/articlelist.html" class="more">更多></a> </div> <ul class="latestReadList"> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  8分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/419303.html" title="JavaScript打包工具使用全攻略" class="aBlack">JavaScript打包工具使用全攻略</a></div> <div class="opt"> <span><i class="view"></i>414</span> <span class="collectBtn user_collection" data-id="419303" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  10分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/419300.html" title="正则表达式如何高效提取复杂文本？" class="aBlack">正则表达式如何高效提取复杂文本？</a></div> <div class="opt"> <span><i class="view"></i>346</span> <span class="collectBtn user_collection" data-id="419300" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  13分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/419296.html" title="Redoc本地构建解决API认证问题" class="aBlack">Redoc本地构建解决API认证问题</a></div> <div class="opt"> <span><i class="view"></i>167</span> <span class="collectBtn user_collection" data-id="419296" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  16分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/419292.html" title="JS与WASM性能对比详解" class="aBlack">JS与WASM性能对比详解</a></div> <div class="opt"> <span><i class="view"></i>366</span> <span class="collectBtn user_collection" data-id="419292" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  17分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/419291.html" title="CSS定位与Grid布局怎么搭配使用" class="aBlack">CSS定位与Grid布局怎么搭配使用</a></div> <div class="opt"> <span><i class="view"></i>467</span> <span class="collectBtn user_collection" data-id="419291" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  18分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/419290.html" title="JavaScript消息队列与事件溯源详解" class="aBlack">JavaScript消息队列与事件溯源详解</a></div> <div class="opt"> <span><i class="view"></i>248</span> <span class="collectBtn user_collection" data-id="419290" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  21分钟前  |   <a href="javascript:;" class="aLightGray" title="HTML编辑器">HTML编辑器</a> </div> <div class="tit lineOverflow"><a href="/article/419284.html" title="HTML编辑器全局替换技巧分享" class="aBlack">HTML编辑器全局替换技巧分享</a></div> <div class="opt"> <span><i class="view"></i>345</span> <span class="collectBtn user_collection" data-id="419284" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  27分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/419278.html" title="CSS盒模型详解：box-sizing作用与使用方法" class="aBlack">CSS盒模型详解：box-sizing作用与使用方法</a></div> <div class="opt"> <span><i class="view"></i>477</span> <span class="collectBtn user_collection" data-id="419278" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  28分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/419277.html" title="HTML5拼接技巧与整合实战方法" class="aBlack">HTML5拼接技巧与整合实战方法</a></div> <div class="opt"> <span><i class="view"></i>143</span> <span class="collectBtn user_collection" data-id="419277" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  31分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/419272.html" title="HTML课程表注册表单制作教学" class="aBlack">HTML课程表注册表单制作教学</a></div> <div class="opt"> <span><i class="view"></i>224</span> <span class="collectBtn user_collection" data-id="419272" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  46分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/419252.html" title="HTML如何运行一段代码？" class="aBlack">HTML如何运行一段代码？</a></div> <div class="opt"> <span><i class="view"></i>309</span> <span class="collectBtn user_collection" data-id="419252" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  53分钟前  |   <a href="javascript:;" class="aLightGray" title="html">html</a> <a href="javascript:;" class="aLightGray" title="JS">JS</a> </div> <div class="tit lineOverflow"><a href="/article/419243.html" title="JS动态加载外部HTML方法解析" class="aBlack">JS动态加载外部HTML方法解析</a></div> <div class="opt"> <span><i class="view"></i>199</span> <span class="collectBtn user_collection" data-id="419243" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> </ul> </div>  <div class="contBoxNor"> <div class="contTit"> <div class="tit">课程推荐</div> <a href="/courselist.html" class="more">更多></a> </div> <ul class="classRecomList"> <li> <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="img_box"> <img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式"> </a> <dl> <dt class="lineOverflow"> 前端进阶之JavaScript设计模式 </dt> <dd class="cont1 lineOverflow">设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。</dd> <dd class="cont2"> <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="toStudy">立即学习</a> <span>543次学习</span> </dd> </dl> </li> <li> <a href="/course/2.html" title="GO语言核心编程课程" class="img_box"> <img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程"> </a> <dl> <dt class="lineOverflow"> GO语言核心编程课程 </dt> <dd class="cont1 lineOverflow">本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。</dd> <dd class="cont2"> <a href="/course/2.html" title="GO语言核心编程课程" class="toStudy">立即学习</a> <span>516次学习</span> </dd> </dl> </li> <li> <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="img_box"> <img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信"> </a> <dl> <dt class="lineOverflow"> 简单聊聊mysql8与网络通信 </dt> <dd class="cont1 lineOverflow">如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让</dd> <dd class="cont2"> <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="toStudy">立即学习</a> <span>500次学习</span> </dd> </dl> </li> <li> <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="img_box"> <img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战"> </a> <dl> <dt class="lineOverflow"> JavaScript正则表达式基础与实战 </dt> <dd class="cont1 lineOverflow">在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。</dd> <dd class="cont2"> <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="toStudy">立即学习</a> <span>487次学习</span> </dd> </dl> </li> <li> <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="img_box"> <img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局"> </a> <dl> <dt class="lineOverflow"> 从零制作响应式网站—Grid布局 </dt> <dd class="cont1 lineOverflow">本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。</dd> <dd class="cont2"> <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="toStudy">立即学习</a> <span>485次学习</span> </dd> </dl> </li> </ul> </div> </div>  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="footer"> <ul> <li ><a href="/" class="aLightGray"><em class="material-icons">home</em><span>首页</span></a></li> <li class="curr"><a href="/articlelist.html" class="aLightGray"><em class="material-icons">menu_book</em><span>阅读</span></a></li> <li ><a href="/courselist.html" class="aLightGray"><em class="material-icons">school</em><span>课程</span></a></li> <li ><a href="/ai.html" class="aLightGray"><em class="material-icons">smart_toy</em><span>AI助手</span></a></li> <li ><a href="/user.html" class="aLightGray"><em class="material-icons">person</em><span>我的</span></a></li> </ul> </div> <script src="/assets/js/require.js" data-main="/assets/js/require-frontend.js?v=1671101972"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?3dc5666f6478c7bf39cd5c91e597423d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>