底层开发实现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 # 项目需求与功能规划
前言遇到一个业务需求就是要进行浏览器的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 # 项目需求与功能规划
