vue-office是一个支持多种文件(docx、.xlsx、pdf)预览的vue组件库，支持vue2和vue3。目标是成为使用最简单，功能最强大的文件预览库。
功能特色
一站式：提供docx、.xlsx、pdf多种文档的在线预览方案，有它就够了，不用再四处寻找、测试、集成各种库了
使用简单：只需提供文档的src(网络地址)即可完成文档预览，也支持ArrayBuffer、Blob等多种格式
支持样式：不仅能预览内容，也支持文档样式，最大限度还原office文件内容
性能好：针对数据量较大做了优化
安装
#docx文档预览组件
npm install @vue-office/docx vue-demi
#excel文档预览组件
npm install @vue-office/excel vue-demi
#pdf文档预览组件
npm install @vue-office/pdf vue-demi
如果是vue2.6版本或以下还需要额外安装 @vue/composition-api
npm install @vue/composition-api
使用
<template> <div> <VueOfficeDocx :src="docxSrc" @rendered="onRendered" @error="onError" /> </div></template><script setup> import { ref } from "vue"; // 引入 Word 预览组件 import VueOfficeDocx from "@vue-office/docx"; // 你的 .docx 文件链接 const docxSrc = ref("/doc.docx"); const onRendered = () => { console.log("Word 文档渲染完成！"); }; const onError = (error) => { console.error("渲染 Word 文档时出错:", error); };</script>
<template> <div> <VueOfficeExcel :src="xlsxSrc" @rendered="onRendered" @error="onError" /> </div></template><script setup> import { ref } from "vue"; // 1. 引入 Excel 预览组件 import VueOfficeExcel from "@vue-office/excel"; // 2. 设置 .xlsx 文件链接 const xlsxSrc = ref("/xls.xlsx"); // 3. 监听渲染事件 const onRendered = () => { console.log("Excel 表格渲染完成！"); }; const onError = (error) => { console.error("渲染 Excel 表格时出错:", error); };</script>
<template> <div> <VueOfficePdf :src="pdfSrc" @rendered="onRendered" @error="onError" /> </div></template><script setup> import { ref } from "vue"; // 1. 引入 PDF 预览组件 import VueOfficePdf from "@vue-office/pdf"; // 2. 设置 .pdf 文件链接 const pdfSrc = ref("/pdf.pdf"); // 3. 监听渲染事件 const onRendered = () => { console.log("PDF 文档渲染完成！"); }; const onError = (error) => { console.error("渲染 PDF 文档时出错:", error); };</script>
<template> <div> <VueOfficePptx :src="pptxSrc" @rendered="onRendered" @error="onError" /> </div></template><script setup> import { ref } from "vue"; // 1. 引入 PPTX 预览组件 import VueOfficePptx from "@vue-office/pptx"; // 2. 你的 .pptx 文件链接 const pptxSrc = ref("/pptx.pptx"); // 3. 监听渲染事件 const onRendered = () => { console.log("PPTX 幻灯片渲染完成！"); }; const onError = (error) => { console.error("渲染 PPTX 幻灯片时出错:", error); };</script>
<template> <div> <h4>选择一个 Word 文档进行预览：</h4> <input type="file" @change="handleFileChange" accept=".docx" /> <hr /> <div v-if="!docxSrc">请选择文件</div> <VueOfficeDocx v-else :src="docxSrc" /> </div></template><script setup> import { ref } from "vue"; import VueOfficeDocx from "@vue-office/docx"; import "@vue-office/docx/lib/index.css"; const docxSrc = ref(null); const handleFileChange = (event) => { // 获取用户选择的文件 const file = event.target.files[0]; if (file) { // 将 File 对象直接赋值给 src 属性 docxSrc.value = file; } };</script>
Word (.docx): 底层使用 docx-preview，它能将 .docx 文件转换成 html 进行渲染
Excel (.xlsx): 底层使用大名鼎鼎的 SheetJS (xlsx) 进行解析，并将其渲染成表格
PPTX (.pptx): 底层使用 pptx-preview，将 PPTX 文件解析并渲染为图片序列
PDF: 底层依赖 Mozilla 的 pdf.js，这是目前最主流的纯 JS PDF 渲染引擎
仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！
链接: https://fly63.com/nav/4815
