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

Hunyuan-MT-7B-WEBUI vs 通用翻译工具,谁更强?

Hunyuan-MT-7B-WEBUI vs 通用翻译工具,谁更强? 你有没有过这样的经历: 复制一段英文技术文档到某翻译网站,点下“翻译”,结果出来的是“该模型正在思考人生”——或者更糟:语序混乱、术语错译、逻辑断裂。再试一次,换种说法,又翻出完全不同的意思。最后只好硬着头皮啃原文,边查词典边猜。 这不是你的问题,是大多数通用翻译工具在面对专业、严谨、结构复杂的文本时的真实表现。 而当你打开 Hunyuan-MT-7B-WEBUI 的网页界面,输入同样一段话,几秒后返回的译文——句式自然、术语统一、逻辑完整,甚至保留了原文的学术语气。更关键的是:它不联网、不上传、不记录,所有操作都在你自己的服务器上完成。 这不是理想化的宣传,而是我们实测中反复验证的结果。今天我们就抛开参数和榜单,用真实场景、真实文本、真实体验,来一场Hunyuan-MT-7B-WEBUI 与主流通用翻译工具的硬碰硬对比。 1. 翻译能力不是“能翻就行”,而是“翻得准、

open-webui 高速下载&Docker本地部署集成远程Ollama

open-webui 高速下载&Docker本地部署集成远程Ollama

open-webui 镜像快速高速下载 docker pull swr.cn-north-4.myhuaweicloud.com/ddn-k8s/ghcr.io/open-webui/open-webui:v0.6.9 https://docker.aityp.com/r/ghcr.io/open-webui/open-webuihttps://docker.aityp.com/r/ghcr.io/open-webui/open-webui 部署教程官网即可 https://docs.openwebui.com/https://docs.openwebui.com/ 启动Ollama在另一台机器上,默认启动,对外开放端口11434 打开ip访问限制,以便于其他机器访问 在open-webui的机器上面测试一下链接 curl http:

网页抓取(Web Scraping)完整技术指南:从原理到实战

在数据驱动的时代,结构化信息已成为企业决策、AI 训练与市场分析的核心资源。网页抓取(Web Scraping) 作为从非结构化网页中提取结构化数据的关键技术,广泛应用于电商、金融、舆情监测、学术研究等领域。 本文将系统解析网页抓取的工作原理、工具链、反爬对抗策略与法律边界,并提供可落地的工程建议。 一、什么是网页抓取? 网页抓取是指通过程序自动访问网页,解析 HTML/JSON 内容,并将目标数据提取、转换为结构化格式(如 CSV、数据库记录)的过程。 与网络爬虫(Crawler)的区别:爬虫:广度优先遍历全站链接(如搜索引擎);抓取:深度聚焦特定页面的数据字段(如商品价格、评论)。 典型应用场景包括: * 电商比价(Amazon、Shopee 商品监控) * 招聘数据聚合(职位趋势分析) * 社交媒体舆情监测(公开评论情感分析) * 学术数据采集(论文元数据批量下载)

Android WebView 版本升级方案详解

Android WebView 版本升级方案详解 目录 1. 问题背景 2. WebViewUpgrade 项目介绍 3. 升级方法详解 4. 替代方案对比 5. 接入与使用步骤 6. 注意事项与限制 7. 总结与建议 问题背景 WebView 版本差异带来的问题 Android 5.0 以后,WebView 升级需要去 Google Play 安装 APK,但即使安装了也不一定能正常工作。像华为、Amazon 等特殊机型的 WebView 的 Chromium 版本一般比较低,只能使用它自己的 WebView,无法使用 Google 的 WebView。 典型问题场景 H.265 视频播放问题: