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

前言

遇到一个业务需求，就是要进行浏览器的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 # 项目需求与功能规划