rust(pdfium)底层开发实现wasm包给vue3调用

An_s2026-08-04 13:10

前言

遇到一个业务需求，就是要进行浏览器的PDF功能开发，研究之后发现是使用PDFium进行的，分win/linux/android/ios，还有一个wasm(给浏览器)

开始

你可以下载PDFium进行二次编译，生成你需要的文件，然后在使用rust进行调用开发

也可以来到这个地址下载对应的安装包

这篇不讲C++编译如何操作，感兴趣可以自行AI一下

因为可能涉及偏隐秘的东西，我是想开源码的，但是最后还是算了，显示项目架构即可。

效果图

调用链

复制代码

Vue 3 阅读器界面
        ↓
TypeScript 渲染与交互层
        ↓
wasm-bindgen 生成的接口
        ↓
Rust PDF 核心模块
        ↓
pdfium-render
        ↓
PDFium 引擎

项目架构

复制代码

pdf-project/
├── rust-pdf/                       # Rust PDF 核心与 WASM 接口
│   ├── src/
│   │   ├── lib.rs                 # WASM 对外接口入口
│   │   ├── document.rs            # PDF 文档加载、信息读取与生命周期管理
│   │   ├── page.rs                # PDF 页面相关操作
│   │   ├── renderer.rs            # 页面渲染与像素数据生成
│   │   ├── text.rs                # 文本提取与全文搜索
│   │   ├── annotation.rs          # 高亮、下划线等批注管理
│   │   └── error.rs               # 错误类型与异常转换
│   ├── Cargo.toml                 # Rust 包、依赖及编译配置
│   └── 使用.md                    # Rust 模块使用说明
│
├── vue3-pdf-viewer/               # Vue 3 PDF 阅读器
│   ├── src/
│   │   ├── components/
│   │   │   └── PdfViewer.vue      # PDF 阅读器核心界面
│   │   ├── main.ts                # Vue 应用入口
│   │   ├── App.vue                # 根组件
│   │   ├── wasm.ts                # Rust WASM 初始化与接口封装
│   │   ├── renderer.ts            # 前端 PDF 渲染流程
│   │   ├── canvas.ts              # Canvas 绘制与操作
│   │   ├── annotation.ts          # 前端批注交互
│   │   ├── worker.ts              # Web Worker 后台处理
│   │   └── env.d.ts               # TypeScript 环境声明
│   ├── public/
│   │   ├── pkg/                   # Rust 生成的 WASM JS 绑定
│   │   ├── pdfium.js              # PDFium JavaScript 加载器
│   │   └── pdfium.wasm            # PDFium WebAssembly 模块
│   ├── index.html                 # HTML 入口
│   ├── package.json               # 前端依赖及脚本
│   ├── tsconfig.json              # TypeScript 配置
│   └── vite.config.ts             # Vite 构建配置
│
├── README.md                      # 项目介绍、接口和构建说明
└── 需求文档.md                    # 项目需求与功能规划