纯前端 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

如何快速实现无人机RemoteID合规?ArduRemoteID开源方案完整指南

如何快速实现无人机RemoteID合规?ArduRemoteID开源方案完整指南 【免费下载链接】ArduRemoteIDRemoteID support using OpenDroneID 项目地址: https://gitcode.com/gh_mirrors/ar/ArduRemoteID ArduRemoteID是一个专为无人机设计的开源RemoteID解决方案,基于OpenDroneID标准实现,完美支持FAA与欧盟法规要求。通过MAVLink和DroneCAN协议与飞行控制器通信,提供WiFi广播、蓝牙5等多种传输模式,兼容ESP32-S3/C3等主流硬件平台,帮助开发者轻松实现无人机身份识别功能。 🚁 项目核心功能解析 多协议兼容的身份发射系统 ArduRemoteID模块集成了MAVLink与DroneCAN双协议支持,可无缝对接ArduPilot等主流飞控系统。通过RemoteIDModule/transmitter.cpp实现的发射逻辑,能同时广播无人机位置、速度、高度等关键飞行数据,确保监管平台实时获取设备状态。 全平台硬件适配方案 支持ESP3

VLM经典论文阅读:【综述】An Introduction to Vision-Language Modeling

VLM经典论文阅读:【综述】An Introduction to Vision-Language Modeling

VLM经典论文阅读:【综述】An Introduction to Vision-Language Modeling * 【前言】论文简介 🍀 * 1、介绍(Introduction)🐳 * 2、视觉语言模型家族(The Families of VLMs) 🌟 * 2.1 基于Transformer的早期VLM工作(Early work on VLMs based on transformers) * 2.2 基于对比学习的VLM(Contrastive-based VLMs) * 2.2.1 CLIP * 2.3 掩码目标视觉语言模型(VLMs with masking objectives) * 2.3.1 FLAVA * 2.3.

打造你的家庭 AI 助手(三):QQ 机器人接入你的 OpenClaw

打造你的家庭 AI 助手(三):QQ 机器人接入你的 OpenClaw

不得不承认腾讯进步的速度太快了,几条命令就可以接入Openclaw,也不用设置IP白名单了,在 QQ开放平台还增加了专门的Openclaw入口: 没啥好说的,很简单,安装完Openclaw之后,执行如下命令(命令也是生成好的): openclaw plugins install @tencent-connect/openclaw-qqbot@latest openclaw channels add--channel qqbot --token"" openclaw gateway restart 以下内容已经过时了,留作纪念 以下内容已经过时了,留作纪念 以下内容已经过时了,留作纪念 ⚠️ 重要提示:如果是家用宽带,没有申请固定 IP 地址的话,大可以放弃这种方式。由于 QQ 开发平台的白名单限制,机器人会非常不稳定,频繁掉线。建议使用云服务器或有固定 IP 的环境部署。 前言 在完成 OpenClaw 安装后,

Stable Diffusion云端版:Mac/Win都能画,2元起

Stable Diffusion云端版:Mac/Win都能画,2元起 引言:当设计工作室遇上AI绘画需求 上周五下午3点,某设计工作室的艺术总监Lisa接到客户紧急电话:"明天提案需要5套AI生成的概念图,你们能搞定吗?"工作室全员使用MacBook Pro,而主流AI绘画工具通常需要Windows+高端显卡。就在团队焦头烂额时,他们发现了Stable Diffusion云端版——这个支持跨平台访问、2元起用的服务不仅解了燃眉之急,还意外帮他们开辟了AI视觉设计新业务线。 本文将带你快速掌握这个零设备门槛的AI绘画方案。即使你只有一台普通笔记本,也能在10分钟内生成专业级图像。我们会用设计工作室的真实案例,手把手教你: 1. 如何不换设备就玩转Stable Diffusion 2. 客户最爱的3种商用级出图技巧 3. 从应急方案到稳定业务的转型路径 1. 为什么选择云端版?设备解放实战录 1.1 Mac用户的AI绘画困境 设计团队最初尝试在Mac本地部署时遇到三重阻碍: * 兼容性问题:原生Stable Diffusion依赖CUDA,而Mac的M系列芯片使