纯前端 PNG/JPG 转 PDF 工具(无需服务器,源码分享)

纯前端 PNG/JPG 转 PDF 工具(无需服务器,源码分享)

纯前端 PNG/JPG 转 PDF 工具(无需服务器,源码分享)

✨ 一个完全运行在浏览器中的图片转 PDF 工具,不依赖后端、不上传文件、保护隐私,支持拖拽、排序、预览、批量导出,代码开源,一键部署!

🌐 在线演示

👉 https://longsongline.github.io/png-to-pdf/

在这里插入图片描述

打开即可使用,无需注册、无需登录,所有处理都在你的浏览器中完成!


📦 功能特性

  • 纯前端实现:基于 jsPDF + FileReader,无任何服务端依赖
  • 隐私安全:图片不会上传到任何服务器,全程本地处理
  • 多格式支持:PNG、JPG、BMP、TIFF、SVG(自动转 PNG)
  • 灵活输出
    • 合并为单个 PDF(每张图一页)
    • 每张图生成独立 PDF
  • 交互友好
    • 拖拽上传 / 点击选择
    • 图片预览(带缩放)
    • 手动排序 / 按文件名排序
    • 删除选中 / 清空全部
    • 文件大小显示、操作日志提示

💻 使用方法

  1. 打开 在线工具
  2. 拖入或点击选择多张图片
  3. 调整顺序(可选)
  4. 选择输出模式
  5. 点击「导出 PDF」即可下载!
⚠️ 首次加载会从 CDN 加载 jsPDF 库(约 100KB),请确保网络畅通。

🧩 技术实现

  • 核心库jsPDF v2.5.1
  • 编码规范:UTF-8(避免中文乱码)
  • 兼容性:现代浏览器(Chrome / Edge / Firefox / Safari)

关键逻辑:

  • 使用 FileReader 读取本地文件为 DataURL
  • SVG 自动转为 PNG 再嵌入 PDF
  • 利用 addPage() 实现多页布局
  • 响应式 UI + 拖拽排序 + 图片预览模态框

📂 源码 & 部署

🔗 GitHub 仓库

🚀 如何部署自己的版本?

  1. Fork 本仓库
  2. 进入仓库 → Settings → Pages
  3. 设置 Source 为 main 分支 + / (root)
  4. 保存,等待 1 分钟
  5. 访问:https://你的用户名.github.io/png-to-pdf/
💡 完全免费!GitHub Pages 自动提供 HTTPS。

📝 注意事项

  • 中文乱码问题
    请确保 index.htmlUTF-8 无 BOM 编码保存(推荐直接在 GitHub 网页编辑器修改)。
  • 大图处理慢
    浏览器内存有限,建议单图不超过 10MB。
  • PDF 分辨率
    默认按 A4 尺寸居中缩放,保持原始比例。

❤️ 开源协议

本项目为 MIT 协议,欢迎 Fork、Star、提 PR!

如果你觉得有用,欢迎点赞 👍 或分享给需要的朋友!


作者:longsongline
更新时间:2026年3月
关键词:前端工具、图片转PDF、纯前端、jsPDF、GitHub Pages、无后端

Read more

前端监控:别让你的应用在黑暗中运行

前端监控:别让你的应用在黑暗中运行 毒舌时刻 这应用运行得跟幽灵似的,出了问题都不知道。 各位前端同行,咱们今天聊聊前端监控。别告诉我你还在等用户反馈问题,那感觉就像在没有监控的仓库里放贵重物品——能放,但丢了都不知道。 为什么你需要前端监控 最近看到一个项目,用户反映页面经常崩溃,但开发团队根本不知道问题出在哪里。我就想问:你是在做应用还是在做猜谜游戏? 反面教材 // 反面教材:没有监控 function App() { const [data, setData] = React.useState([]); useEffect(() => { async function fetchData() { try { const response = await fetch('/api/data'); const result = await response.json(); setData(result); } catch (error)

前端动画库:让你的网站动起来

前端动画库:让你的网站动起来 毒舌时刻 前端动画?这不是用CSS就够了吗? "CSS动画简单,我只用CSS"——结果复杂动画难以实现, "JavaScript动画性能差,我不用"——结果交互体验差, "Framer Motion?GSAP?没听说过,肯定不如CSS"——结果错过了更强大的动画能力。 醒醒吧,前端动画不是简单的CSS过渡,而是需要根据场景选择合适的工具! 为什么你需要这个? * 用户体验:流畅的动画提升用户体验 * 交互反馈:动画可以提供清晰的交互反馈 * 视觉吸引力:动画让网站更具视觉吸引力 * 品牌识别:独特的动画风格可以强化品牌识别 反面教材 /* 反面教材:过度使用CSS动画 */ .animation { /* 复杂的CSS动画,难以维护 */ animation: rotate 2s linear infinite, scale 1s ease-in-out infinite

理解什么是AI Agent,看懂这篇就够了

理解什么是AI Agent,看懂这篇就够了

一、什么是AI Agent? 1.1 基本定义 AI Agent(人工智能代理)是一种能够感知环境、自主决策并执行动作的智能实体。与传统AI系统不同,Agent不仅能回答问题,还能主动完成一系列复杂任务。 简单来说,如果把大语言模型(LLM)比作一个"超级大脑",那么AI Agent就是给这个大脑装上了"手脚"和"工具",让它能够像人类一样主动行动,而不仅仅是被动回答问题。 1.2 关键特性 * ✅ 自主性:能在没有人类直接干预的情况下运作 * ✅ 反应性:对周围环境和接收到的信息作出及时响应 * ✅ 目标导向:拥有明确的目标或任务,并为之努力 * ✅ 学习能力:通过经验不断改进自身的性能和策略 1.3 与传统AI的区别 传统AI:像个听话的工具,你说&

Web 可访问性最佳实践:构建人人可用的前端界面

Web 可访问性最佳实践:构建人人可用的前端界面 代码如诗,包容如画。让我们用可访问性的理念,构建出人人都能使用的前端界面。 什么是 Web 可访问性? Web 可访问性(Web Accessibility)是指网站、工具和技术能够被所有人使用,包括那些有 disabilities 的人。这意味着无论用户的能力如何,他们都应该能够感知、理解、导航和与 Web 内容交互。 为什么 Web 可访问性很重要? 1. 法律要求:许多国家和地区都有法律法规要求网站必须具有可访问性。 2. 扩大用户群体:约 15% 的世界人口生活有某种形式的 disability,可访问性可以让更多人使用你的网站。 3. SEO 优化:搜索引擎爬虫依赖于可访问性良好的网站结构。 4. 更好的用户体验:可访问性改进通常会使所有用户受益,而不仅仅是那些有 disabilities 的用户。 5. 社会责任: