【免费下载链接】office-open-xml-viewerA browser-based viewer for Office Open XML documents that renders to an HTML Canvas element.项目地址https://gitcode.com/gh_mirrors/of/office-open-xml-viewer点击查看免费下载office-open-xml-viewer 是一个运行在浏览器里的 Office 文档查看器安装 npm 包silurus/ooxml后几行代码就能把 Word.docx、Excel.xlsx、PPT.pptx文件原样渲染到 HTML Canvas 上——不安装 Office、不需要上传服务器文档全程只在本地浏览器中解析和显示。为什么选择 office-open-xml-viewer在线预览 Office 文档过去通常有两条路自己解析 XML工作量大到劝退或者用商业 SDK付费且闭源。office-open-xml-viewer 提供了第三条路纯浏览器渲染解析器用 Rust 编写并编译为 WebAssembly渲染走 Canvas 2D全部在用户本地完成只读、安全文档内没有任何脚本、宏或可执行内容会被运行文件与密码都不离开浏览器三种格式全覆盖DOCX / XLSX / PPTX 各有内置查看器也提供无头引擎让你自由组装 UIMIT 协议免费使用。三种格式都支持什么格式内置查看器典型支持能力Word.docxDocxViewer、DocxScrollViewer表格、图片、图表、公式、页眉页脚、分栏、脚注、批注、修订、纵向书写、查找替换式搜索Excel.xlsxXlsxViewer、XlsxSheetViewer多工作表、合并单元格、冻结窗格、条件格式、迷你图、图表、单元格选择与缩放PPT.pptxPptxViewer、PptxScrollViewer幻灯片母版继承、形状、渐变与阴影、WordArt 变形、表格、图表、音视频播放技术架构Rust WASM 负责解析Canvas 负责绘制项目采用解析与绘制分离的结构这也是它能做得快又稳的关键层次技术说明解析层Rust → WebAssembly每个格式一个 WASM 解析器在 Web Worker 中运行主线程不被阻塞渲染层Canvas 2D API把解析后的文档模型绘制为像素支持按需缩放交互层透明 DOM 叠加层实现文本选中、复制、查找高亮、超链接跳转如果想深入了解实现可以直接看这些入口源码DOCX 解析器packages/docx/parser/src/lib.rsXLSX 解析器packages/xlsx/parser/src/lib.rsPPTX 解析器packages/pptx/parser/src/lib.rs各格式 Viewer 公开 APIpackages/docx/src/viewer.ts、packages/xlsx/src/viewer.ts、packages/pptx/src/viewer.ts安装与构建工具适配一条命令接入最快安装步骤项目以 npm 包形式发布一条命令即可安装npm install silurus/ooxml包是 ESM 格式解析器以真正的.wasm资产文件形式随包发布。webpack 5、Next.js、Vite 8 以及纯script typemodule页面均零配置可用只有两种环境需要手动处理一下详见 README.md 的 Bundler note环境处理方式Vite 7 开发服务器在vite.config中加入optimizeDeps: { exclude: [silurus/ooxml] }esbuild / Angular CLI把.wasm文件复制到产物目录通过wasmUrl加载选项指过去Word 渲染实战三行代码显示一份 DOCX内置查看器接管导航调用方只需要提供一个canvas元素import { DocxViewer } from silurus/ooxml/docx; const canvas document.getElementById(docx-canvas) as HTMLCanvasElement; const docx new DocxViewer(canvas); await docx.load(/document.docx); docx.nextPage(); // 翻到下一页上面是杂志风格 Word 文档的渲染结果图片、页眉、字体层级都按原文档还原Excel 渲染实战自带工作表标签页与缩放滑块XlsxViewer自己管理canvas和底部的工作表标签栏、缩放滑块你只需要给一个容器divimport { XlsxViewer } from silurus/ooxml/xlsx; const container document.getElementById(xlsx-container) as HTMLElement; const xlsx new XlsxViewer(container); await xlsx.load(/workbook.xlsx); xlsx.setSelection(B2:D5); // 程序化设置选中区域如果只要单个工作表的纯净视图自管 canvas用XlsxSheetViewer即可它还支持goToSheet(1)切换工作表。PPT 渲染实战逐张翻页的幻灯片浏览PPT 的用法和 Word 几乎一样同样由调用方提供 canvasimport { PptxViewer } from silurus/ooxml/pptx; const canvas document.getElementById(pptx-canvas) as HTMLCanvasElement; const pptx new PptxViewer(canvas); await pptx.load(/deck.pptx); pptx.nextSlide(); // 切到下一张幻灯片进阶用法连续滚动、Worker 渲染与可选模块像 PDF 阅读器一样连续滚动DocxScrollViewer和PptxScrollViewer把整份文档渲染成一条可垂直滚动的纸张流自动做页面虚拟化只挂载可见区域适合替代逐页翻页的体验import { DocxScrollViewer } from silurus/ooxml/docx; const viewer new DocxScrollViewer(document.getElementById(docx-scroll) as HTMLElement); await viewer.load(/document.docx); // 可用 viewer.scrollToPage(3) 定位Ctrl/⌘ 滚轮无闪烁缩放把渲染也搬出主线程默认mode: main时解析在 Worker、绘制在主线程如果文档很大给.load()传入mode: worker即可让解析、布局、绘制全部在 Worker 内完成主线程只负责贴ImageBitmap滚动和输入始终流畅。按需加载的可选渲染模块公式MathJax、ChartEx 高级图表、3-D 图表、区域地图、TIFF 解码都是独立入口不 import 就不进包体import { math } from silurus/ooxml/math; import { threeD } from silurus/ooxml/three-d; new XlsxViewer(container, { math, threeD, mode: worker });对接 React / Vue / Svelte / Solid 框架示例仓库内置了四个可直接运行的框架示例工程Vite TypeScript每个工程都是独立的 pnpm workspace复制对应模块即可迁移到自己的应用示例总览说明examples/frameworks/README.mdReact 示例入口examples/frameworks/react/src/App.tsxVue 示例入口examples/frameworks/vue/src/App.vue在examples/frameworks目录下运行pnpm install pnpm dev:react # 也可换成 vue / svelte / solid示例组件通过createViewer(container)工厂创建查看器并支持选择本地 DOCX / XLSX / PPTX 文件直接预览——文件不会上传到任何服务器。实用小贴士文本选中、查找与错误处理文本选中与复制给查看器传enableTextSelection: true即可用鼠标选中画布上的文字并原生复制DOCX/PPTX 的超链接点击也依赖这一开关。全文查找findText()/findNext()/findPrev()/clearFind()覆盖完整文档命中位置会高亮并标注所在页/幻灯片/单元格。渐进式布局大文件打开时传progressiveLayout: true首页可画即加载剩余分页在后台继续完成。类型化错误失败以 Promise reject 抛出密码错误、加密方式不支持、资源超限都有稳定code如OoxmlError无需解析报错文本。AI/MCP 集成每个 Viewer 都提供getSelectionContext()把当前选区以只读、可序列化的快照交给外部 AI 助手完整契约见 docs/selection-context.md。安全与隐私设计只读查看器项目明确不支持编辑与另存从根上避免损坏用户文件这一类风险Canvas-only 渲染源文件中的脚本、链接、表单等主动内容一律不执行、不注入 DOM资源上限保护单个压缩包条目、累计解压体积、条目数量均有默认上限128 MiB / 256 MiB / 4096超限抛出OoxmlResourceLimitError默认零网络不发送任何遥测useGoogleFonts: true时才按需从 Google Fonts 加载非拉丁文字字体。小结5分钟回顾npm install silurus/ooxml安装准备一个canvas或容器divnew XxxViewer(...)await viewer.load(文件)完成需要滚动阅读、Worker 渲染、公式图表等进阶能力时按需传选项、按需 import 可选模块。项目采用 MIT 协议完整功能矩阵、错误码与配置项请以仓库根目录的 README.md 为准。祝你渲染愉快 赞分享【免费下载链接】office-open-xml-viewerA browser-based viewer for Office Open XML documents that renders to an HTML Canvas element.项目地址https://gitcode.com/gh_mirrors/of/office-open-xml-viewer点击查看免费下载相关推荐Sunshine 游戏串流完整指南5分钟跑通把 PC 变成私人游戏云Sunshine 游戏串流完整指南5分钟跑通把 PC 变成私人游戏云 主力机在书房跑渲染任务你却想在卧室电视上打 3A 大作。Sunshine 是一款开源5分钟上手ZIZIYI Office免安装、零上传的浏览器Office快速入门指南5分钟上手ZIZIYI Office免安装、零上传的浏览器Office快速入门指南 ZIZIYI Office 是一款基于 WebAssembly 技术的浏览Goldfish扩展开发指南如何为Vault UI添加自定义功能Goldfish扩展开发指南如何为Vault UI添加自定义功能 Goldfish是一款基于VueJS和Vault原生Go API构建的HashiCorp V上一篇原神脚本用视觉识别技术解决重复性操作的效率工具下一篇Spek音频频谱分析工具3个步骤让你快速掌握音频可视化技术创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/26 1:33:13 · 阅读 1.2k 5分钟上手office-open-xml-viewer：浏览器中渲染Word/Excel/PPT的完整入门教程
【免费下载链接】office-open-xml-viewerA browser-based viewer for Office Open XML documents that renders to an HTML Canvas element.项目地址https://gitcode.com/gh_mirrors/of/office-open-xml-viewer点击查看免费下载office-open-xml-viewer 是一个运行在浏览器里的 Office 文档查看器安装 npm 包silurus/ooxml后几行代码就能把 Word.docx、Excel.xlsx、PPT.pptx文件原样渲染到 HTML Canvas 上——不安装 Office、不需要上传服务器文档全程只在本地浏览器中解析和显示。为什么选择 office-open-xml-viewer在线预览 Office 文档过去通常有两条路自己解析 XML工作量大到劝退或者用商业 SDK付费且闭源。office-open-xml-viewer 提供了第三条路纯浏览器渲染解析器用 Rust 编写并编译为 WebAssembly渲染走 Canvas 2D全部在用户本地完成只读、安全文档内没有任何脚本、宏或可执行内容会被运行文件与密码都不离开浏览器三种格式全覆盖DOCX / XLSX / PPTX 各有内置查看器也提供无头引擎让你自由组装 UIMIT 协议免费使用。三种格式都支持什么格式内置查看器典型支持能力Word.docxDocxViewer、DocxScrollViewer表格、图片、图表、公式、页眉页脚、分栏、脚注、批注、修订、纵向书写、查找替换式搜索Excel.xlsxXlsxViewer、XlsxSheetViewer多工作表、合并单元格、冻结窗格、条件格式、迷你图、图表、单元格选择与缩放PPT.pptxPptxViewer、PptxScrollViewer幻灯片母版继承、形状、渐变与阴影、WordArt 变形、表格、图表、音视频播放技术架构Rust WASM 负责解析Canvas 负责绘制项目采用解析与绘制分离的结构这也是它能做得快又稳的关键层次技术说明解析层Rust → WebAssembly每个格式一个 WASM 解析器在 Web Worker 中运行主线程不被阻塞渲染层Canvas 2D API把解析后的文档模型绘制为像素支持按需缩放交互层透明 DOM 叠加层实现文本选中、复制、查找高亮、超链接跳转如果想深入了解实现可以直接看这些入口源码DOCX 解析器packages/docx/parser/src/lib.rsXLSX 解析器packages/xlsx/parser/src/lib.rsPPTX 解析器packages/pptx/parser/src/lib.rs各格式 Viewer 公开 APIpackages/docx/src/viewer.ts、packages/xlsx/src/viewer.ts、packages/pptx/src/viewer.ts安装与构建工具适配一条命令接入最快安装步骤项目以 npm 包形式发布一条命令即可安装npm install silurus/ooxml包是 ESM 格式解析器以真正的.wasm资产文件形式随包发布。webpack 5、Next.js、Vite 8 以及纯script typemodule页面均零配置可用只有两种环境需要手动处理一下详见 README.md 的 Bundler note环境处理方式Vite 7 开发服务器在vite.config中加入optimizeDeps: { exclude: [silurus/ooxml] }esbuild / Angular CLI把.wasm文件复制到产物目录通过wasmUrl加载选项指过去Word 渲染实战三行代码显示一份 DOCX内置查看器接管导航调用方只需要提供一个canvas元素import { DocxViewer } from silurus/ooxml/docx; const canvas document.getElementById(docx-canvas) as HTMLCanvasElement; const docx new DocxViewer(canvas); await docx.load(/document.docx); docx.nextPage(); // 翻到下一页上面是杂志风格 Word 文档的渲染结果图片、页眉、字体层级都按原文档还原Excel 渲染实战自带工作表标签页与缩放滑块XlsxViewer自己管理canvas和底部的工作表标签栏、缩放滑块你只需要给一个容器divimport { XlsxViewer } from silurus/ooxml/xlsx; const container document.getElementById(xlsx-container) as HTMLElement; const xlsx new XlsxViewer(container); await xlsx.load(/workbook.xlsx); xlsx.setSelection(B2:D5); // 程序化设置选中区域如果只要单个工作表的纯净视图自管 canvas用XlsxSheetViewer即可它还支持goToSheet(1)切换工作表。PPT 渲染实战逐张翻页的幻灯片浏览PPT 的用法和 Word 几乎一样同样由调用方提供 canvasimport { PptxViewer } from silurus/ooxml/pptx; const canvas document.getElementById(pptx-canvas) as HTMLCanvasElement; const pptx new PptxViewer(canvas); await pptx.load(/deck.pptx); pptx.nextSlide(); // 切到下一张幻灯片进阶用法连续滚动、Worker 渲染与可选模块像 PDF 阅读器一样连续滚动DocxScrollViewer和PptxScrollViewer把整份文档渲染成一条可垂直滚动的纸张流自动做页面虚拟化只挂载可见区域适合替代逐页翻页的体验import { DocxScrollViewer } from silurus/ooxml/docx; const viewer new DocxScrollViewer(document.getElementById(docx-scroll) as HTMLElement); await viewer.load(/document.docx); // 可用 viewer.scrollToPage(3) 定位Ctrl/⌘ 滚轮无闪烁缩放把渲染也搬出主线程默认mode: main时解析在 Worker、绘制在主线程如果文档很大给.load()传入mode: worker即可让解析、布局、绘制全部在 Worker 内完成主线程只负责贴ImageBitmap滚动和输入始终流畅。按需加载的可选渲染模块公式MathJax、ChartEx 高级图表、3-D 图表、区域地图、TIFF 解码都是独立入口不 import 就不进包体import { math } from silurus/ooxml/math; import { threeD } from silurus/ooxml/three-d; new XlsxViewer(container, { math, threeD, mode: worker });对接 React / Vue / Svelte / Solid 框架示例仓库内置了四个可直接运行的框架示例工程Vite TypeScript每个工程都是独立的 pnpm workspace复制对应模块即可迁移到自己的应用示例总览说明examples/frameworks/README.mdReact 示例入口examples/frameworks/react/src/App.tsxVue 示例入口examples/frameworks/vue/src/App.vue在examples/frameworks目录下运行pnpm install pnpm dev:react # 也可换成 vue / svelte / solid示例组件通过createViewer(container)工厂创建查看器并支持选择本地 DOCX / XLSX / PPTX 文件直接预览——文件不会上传到任何服务器。实用小贴士文本选中、查找与错误处理文本选中与复制给查看器传enableTextSelection: true即可用鼠标选中画布上的文字并原生复制DOCX/PPTX 的超链接点击也依赖这一开关。全文查找findText()/findNext()/findPrev()/clearFind()覆盖完整文档命中位置会高亮并标注所在页/幻灯片/单元格。渐进式布局大文件打开时传progressiveLayout: true首页可画即加载剩余分页在后台继续完成。类型化错误失败以 Promise reject 抛出密码错误、加密方式不支持、资源超限都有稳定code如OoxmlError无需解析报错文本。AI/MCP 集成每个 Viewer 都提供getSelectionContext()把当前选区以只读、可序列化的快照交给外部 AI 助手完整契约见 docs/selection-context.md。安全与隐私设计只读查看器项目明确不支持编辑与另存从根上避免损坏用户文件这一类风险Canvas-only 渲染源文件中的脚本、链接、表单等主动内容一律不执行、不注入 DOM资源上限保护单个压缩包条目、累计解压体积、条目数量均有默认上限128 MiB / 256 MiB / 4096超限抛出OoxmlResourceLimitError默认零网络不发送任何遥测useGoogleFonts: true时才按需从 Google Fonts 加载非拉丁文字字体。小结5分钟回顾npm install silurus/ooxml安装准备一个canvas或容器divnew XxxViewer(...)await viewer.load(文件)完成需要滚动阅读、Worker 渲染、公式图表等进阶能力时按需传选项、按需 import 可选模块。项目采用 MIT 协议完整功能矩阵、错误码与配置项请以仓库根目录的 README.md 为准。祝你渲染愉快 赞分享【免费下载链接】office-open-xml-viewerA browser-based viewer for Office Open XML documents that renders to an HTML Canvas element.项目地址https://gitcode.com/gh_mirrors/of/office-open-xml-viewer点击查看免费下载相关推荐Sunshine 游戏串流完整指南5分钟跑通把 PC 变成私人游戏云Sunshine 游戏串流完整指南5分钟跑通把 PC 变成私人游戏云 主力机在书房跑渲染任务你却想在卧室电视上打 3A 大作。Sunshine 是一款开源5分钟上手ZIZIYI Office免安装、零上传的浏览器Office快速入门指南5分钟上手ZIZIYI Office免安装、零上传的浏览器Office快速入门指南 ZIZIYI Office 是一款基于 WebAssembly 技术的浏览Goldfish扩展开发指南如何为Vault UI添加自定义功能Goldfish扩展开发指南如何为Vault UI添加自定义功能 Goldfish是一款基于VueJS和Vault原生Go API构建的HashiCorp V上一篇原神脚本用视觉识别技术解决重复性操作的效率工具下一篇Spek音频频谱分析工具3个步骤让你快速掌握音频可视化技术创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考