使用pdf.js渲染、jspdf生成，结合文件上传与交互功能，实现前端pdf处理，注意性能与安全。
在网页开发中，处理和渲染PDF文档是一个常见需求。JavaScript 提供了多种方式来实现 PDF 的加载、显示、解析甚至生成。以下是关于如何使用 JavaScript 进行 PDF 文档处理与渲染的实用指南。
使用 PDF.js 渲染 PDF
PDF.js 是由 Mozilla 开发的一个开源库，能够在浏览器中将 PDF 文件渲染为 HTML5 内容，无需依赖外部插件。
基本使用步骤如下：
- 引入 PDF.js 库（可通过 CDN 或 npm 安装）
- 准备一个容器元素用于显示 PDF 页面
- 加载 PDF 文件并解析为 PDFDocumentProxy 对象
- 获取指定页码并渲染到 canvas 上
<canvas id="pdf-render"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
<script>
const url = 'sample.pdf';
pdfjsLib.getDocument(url).promise.then(pdf => {
return pdf.getPage(1);
}).then(page => {
const scale = 1.5;
const viewport = page.getViewport({ scale });
const canvas = document.getElementById('pdf-render');
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = {
canvasContext: context,
viewport
};
return page.render(renderContext).promise;
});
</script>
从 URL 或 Blob 加载 PDF
PDF.js 支持多种数据源，包括远程 URL、File 对象或 Blob。
浚心时尚购物商城程序
下载
时尚购物程序v1.01、全立体设计。此系统由3个Flash动画为主线（正式版带原文件），设计更形象，网站更有吸引力。这种设计在网店系统内绝无仅有，使您的网店与众不同。2、内置音乐播放器，简单灵活的操作即可完成设置，前台任意调用。并带详细说明文件，一看就懂。合理使用此功能，可使网站更富渲染力。3、支持多图显示，每件产品最多可以上传9张图片。4、后台功能强大，销售管理，财务管理，在线支付平台管理等功能
立即学习“Java免费学习笔记（深入）”；
- 对于用户上传的文件，可结合 获取 File 对象
- 使用 URL.createObjectURL 将 File 转为临时 URL 传给 PDF.js
- 也可直接传递 Blob 或 Uint8Array 数据
document.getElementById('file-input').addEventListener('change', function(e) {
const file = e.target.files[0];
if (file && file.type === 'application/pdf') {
const fileReader = new FileReader();
fileReader.onload = function() {
const typedArray = new Uint8Array(this.result);
pdfjsLib.getDocument(typedArray).promise.then(pdf => {
// 渲染第一页
pdf.getPage(1).then(page => {
// 同上渲染逻辑
});
});
};
fileReader.readAsArrayBuffer(file);
}
});
实现基础交互功能
除了静态渲染，还可以添加翻页、缩放、搜索等常用功能。
- 通过 pdf.numPages 获取总页数
- 维护当前页变量，点击按钮时重新调用 getPage()
- 调整 scale 参数实现放大缩小
- 使用 page.getTextContent() 提取文本内容以支持搜索
生成 PDF（反向操作）
若需要从网页内容生成 PDF，推荐使用 jsPDF 库。
- 支持创建空白 PDF 并添加文本、图片、矢量图形
- 可结合 html2canvas 将 DOM 元素转为图像后插入 PDF
- 适合导出报表、简历等场景
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
html2canvas(document.querySelector("#content")).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF();
pdf.addImage(imgData, 'PNG', 0, 0);
pdf.save("output.pdf");
});
基本上就这些。PDF.js 负责查看，jsPDF 负责生成，两者配合能满足大多数前端 PDF 处理需求。注意大文件可能影响性能，建议分页异步加载。安全方面避免直接加载不可信来源的 PDF。不复杂但容易忽略细节，比如跨域问题和内存释放。
