纯前端 PNG/JPG 转 PDF 工具实现方案

纯前端图片转 PDF 工具实现

这是一个完全运行在浏览器中的图片转 PDF 工具，核心优势在于不依赖后端服务，所有文件处理均在本地完成，有效保护用户隐私。支持拖拽上传、图片排序、预览及批量导出，代码开源且易于部署。

功能特性

• 纯前端架构：基于 jsPDF 配合 FileReader API，无服务端依赖。
• 隐私安全：图片全程本地处理，不会上传至任何第三方服务器。
• 格式兼容：支持 PNG、JPG、BMP、TIFF，SVG 会自动转换为 PNG 后嵌入。
• 灵活输出：可选择合并为单页 PDF 或多页独立 PDF。
• 交互体验：支持拖拽排序、文件名排序、图片缩放预览及操作日志提示。

使用流程

1. 打开项目页面，拖入或点击选择多张图片。
2. 根据需要调整图片顺序。
3. 选择输出模式（合并或独立）。
4. 点击导出按钮下载生成的 PDF 文件。

注意：首次加载需从 CDN 引入 jsPDF 库，请保持网络连接正常。

技术实现细节

核心依赖 jsPDF v2.5.1，编码采用 UTF-8 以避免中文乱码。兼容性覆盖主流现代浏览器（Chrome、Edge、Firefox、Safari）。

关键逻辑点包括：

• 利用 FileReader 将本地文件读取为 DataURL。
• 针对 SVG 格式进行自动转换处理。
• 通过 addPage() 方法实现多页布局控制。
• UI 层采用响应式设计，集成拖拽排序与模态框预览。

部署指南

项目结构极简，仅包含一个 index.html 文件。

• 仓库地址：https://github.com/longsongline/png-to-pdf

1. Fork 仓库并进入 Settings 配置。
2. 在 Pages 设置中，Source 选择 main 分支及 / (root) 目录。
3. 保存后等待约一分钟，即可访问生成的 HTTPS 地址。

注意事项

• 编码问题：确保 index.html 以 UTF-8 无 BOM 格式保存，推荐直接在编辑器中修改。
• 性能限制：受限于浏览器内存，建议单图不超过 10MB。
• 分辨率：默认按 A4 尺寸居中缩放，保持原始比例。

本项目遵循 MIT 协议，允许自由修改与分发。