Skip to content

Tom-wc/fpzs

Repository files navigation

发票打印助手

专业的电子发票处理工具,支持智能合并、自动识别、报销单生成、批量打印。

所有数据在浏览器本地处理,无需上传服务器,无登录要求,无使用限制。


功能概览

批量上传与智能合并

  • 支持 PDF 格式电子发票,拖拽或点击上传
  • 自动合并为 A4 双联格式(每页放置2张发票),节省50%纸张
  • 可选分割线,便于裁剪
  • 清单位置可选:放最后 / 原地输出 / 抛弃清单
  • 支持 CropBox 智能裁切,只嵌入发票实际可见内容

自动识别与统计

  • 上传后自动提取每张发票的金额、日期、项目名称
  • 识别关键字:价税合计、小写合计、应付金额等多种格式
  • 实时统计面板显示发票数量和总金额
  • 支持增值税专用发票、普通发票、全电发票等各类格式

报销单生成

一键生成符合财务规范的报销单 PDF:

  • 自动模式:从发票中提取数据,直接生成
  • 手动模式:弹出编辑对话框,可修改项目名称、金额、日期后再生成

报销单内容包括:

  • 标准报销单表头(含"记账凭证附件"标注)
  • 明细表格:发生日期、报销内容、单据张数、金额(百万~分逐位填写)
  • 合计行(含中文大写金额,如"壹佰贰拾叁元肆角伍分")
  • 签章栏:主管意见、报销人签章、复核、出纳
  • 多页自动分页,带页码标注

生成后自动与发票合并为一个 PDF,可直接下载或打印。

一键打印

  • 点击打印按钮直接调用浏览器打印对话框
  • 自动打印合并后的完整 PDF(含报销单 + 发票)
  • 支持下载合并 PDF 文件(文件名:报销单_YYYYMMDD.pdf

文件复制

解决同一发票需要打印多份的问题:

  • 每个原始文件旁显示蓝色"复制"按钮
  • 点击创建副本,文件名自动添加 _副本X 后缀
  • 副本通过修改文件尾部字节实现 MD5 值变化,绕过去重验证
  • 副本自动参与合并和打印流程
  • 可创建多个副本,无数量限制

CSV 导出

  • 导出发票统计数据为 CSV 表格
  • 包含发票号码、金额、日期等字段

预览面板

  • 右侧滑出式预览面板,实时显示合并后的 PDF
  • 支持缩放控制(放大/缩小/适应宽度)
  • 报销单生成后自动切换为完整预览(报销单 + 发票)
  • 删除报销单后自动恢复原始发票预览

操作反馈

  • 复制、打印、生成等操作均有 Toast 通知提示
  • 处理中显示动画加载提示
  • 操作完成后自动消失

支持的发票类型

  • 增值税专用发票
  • 增值税普通发票
  • 电子发票(全电发票)
  • 其他标准格式电子发票(PDF 含可提取文本)

安装与启动

环境要求

项目 要求
操作系统 Windows 7 / 10 / 11
运行环境 Node.js 12.0 及以上
浏览器 Chrome / Edge / Firefox(现代浏览器)
磁盘空间 50MB 以上

方法一:双击启动(推荐)

  1. 双击 启动服务器.bat,等待终端显示"服务器已启动"
  2. 双击 打开浏览器.bat,自动打开应用页面

方法二:命令行启动

cd 项目目录
node server.js

启动后访问:

修改端口

编辑 server.js,修改 PORT 变量,或通过环境变量指定:

set PORT=3000
node server.js

使用流程

基本打印流程

上传发票 PDF → 自动合并为 A4 双联 → 预览 → 打印/下载

报销单流程

上传发票 → 自动识别金额/日期 → 点击"生成报销单" → 报销单+发票合并 → 下载/打印

多份打印流程

上传发票 → 点击"复制"按钮 → 生成副本 → 所有文件一起合并打印

部署方式

本地使用

直接运行 node server.js,适合个人使用。

局域网共享

启动服务器后,同一局域网内的其他设备通过本机 IP 访问:

http://192.168.x.x:8000/main.html

需确保防火墙允许对应端口的入站连接。

Nginx 部署(生产环境)

项目附带 nginx.conf 配置文件,支持 HTTPS。使用前修改:

  • server_name — 你的域名
  • root — 项目文件路径
  • ssl_certificate / ssl_certificate_key — SSL 证书路径
nginx -t        # 测试配置
nginx -s reload # 重载

项目结构

├── index.html              # 应用首页
├── main.html               # 功能主页面(核心)
├── server.js               # Node.js HTTP 服务器(仅用内置模块,无依赖)
├── 启动服务器.bat           # Windows 启动脚本
├── 打开浏览器.bat           # 浏览器打开脚本
├── nginx.conf              # Nginx 部署配置
├── manifest.json           # PWA 配置
├── 404.html                # 404 页面
└── static/
    ├── css/                # 样式(Tailwind CSS)
    ├── js/
    │   ├── custom/                     # 自定义功能模块
    │   │   ├── expense-report-core.js  # 发票数据提取与报销单生成
    │   │   ├── file-copy-print.js      # 文件复制与打印拦截
    │   │   ├── notifications.js        # Toast 通知组件
    │   │   ├── print-guard.js          # 打印按钮拦截与 PDF 打印
    │   │   └── stats-widget.js         # 发票统计面板
    │   ├── invoice-tool-ui.js          # 发票工具主 UI(React)
    │   ├── alert-dialog.js             # PDF 合并引擎(pdf-lib)
    │   ├── pdfjs-lib.js                # PDF 解析渲染(pdfjs-dist)
    │   └── ...                         # React/Next.js 运行时
    ├── font/               # 本地化字体(Geist Sans/Mono)
    └── picture/            # 图片资源

技术架构

技术 用途
Next.js 静态导出 应用框架,纯前端无后端
React UI 组件与状态管理
pdf-lib PDF 创建、合并、页面嵌入
pdfjs-dist (v4.8.69) PDF 文本提取与页面渲染
html2canvas + jsPDF 报销单 HTML → PDF 转换
Tailwind CSS 样式系统
Node.js HTTP 开发/部署用静态文件服务器

所有依赖已打包在 static/js/ 中,无需 npm install,无外部网络依赖。

注意:PDF 渲染和文字识别依赖 CDN 加载字符映射文件(cmaps),首次使用时浏览器需要从 CDN 下载相关资源,因此第一次上传发票后预览和识别会稍慢(约 2-5 秒)。后续操作浏览器会缓存这些资源,速度恢复正常。建议首次使用时保持网络畅通。


故障排除

页面空白或加载失败

  • 确认服务器已启动(终端显示"服务器已启动")
  • 按 F12 检查浏览器控制台是否有资源加载错误
  • 确认 static/ 目录文件完整

端口被占用

  • 修改 server.js 中的端口号
  • 或查看占用:netstat -ano | findstr 8000

发票识别不准确

  • 确保 PDF 为标准电子发票(非扫描件)
  • 加密或损坏的 PDF 无法正常解析
  • 仅支持含可提取文本的 PDF

局域网无法访问

  • 检查防火墙是否放行对应端口
  • 确认使用服务器本机 IP 地址访问

打印无反应

  • 确认浏览器未阻止弹窗
  • 尝试使用下载功能,手动打开 PDF 打印

🙏 致谢

感谢使用发票打印助手!如果这个项目对您有帮助,欢迎⭐Star支持!


Made with ❤️ by 发票打印助手团队

许可证

MIT

⬆ 回到顶部

About

非常推荐使用的一个纯前端的网页应用,支持批量上传发票,复制需要重复打印的发票,整合下载所有操作一目了然,好不好用用看!

Resources

Stars

Watchers

Forks

Packages

 
 
 

Contributors