[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-71242":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":25,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":36,"readmeContent":37,"aiSummary":38,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":39,"discoverSource":40},71242,"vue-office","501351981\u002Fvue-office","501351981","支持word(.docx)、excel(.xlsx,.xls)、pdf、pptx等各类型office文件预览的vue组件集合，提供一站式office文件预览方案，支持vue2和3，也支持React等非Vue框架。Web-based pdf, excel, word, pptx preview library","https:\u002F\u002F501351981.github.io\u002Fvue-office\u002Fexamples\u002Fdocs\u002F",null,"JavaScript",5608,609,23,219,0,2,3,30,6,39.36,"MIT License",false,"master",true,[27,28,29,30,31,32,33,34,35],"docx","docx-preview","excel","pdf","pdf-preview","pdf-viewer","vue","xlsx","xlsx-preview","2026-06-12 02:02:49","# vue-office\n\n支持多种文件(**docx、excel、pdf、pptx**)预览的vue组件库，支持vue2\u002F3。也支持非Vue框架的预览。\n\n[《演示效果》](https:\u002F\u002F501351981.github.io\u002Fvue-office\u002Fexamples\u002Fdist\u002F)\n\n[《使用非Vue框架（原生js、React等）、或者Vue里面报错，看这里》](https:\u002F\u002F501351981.github.io\u002Fvue-office\u002Fexamples\u002Fdocs\u002Fguide\u002Fjs-preview.html)\n## 功能特色\n- 一站式：提供word(.docx)、pdf、excel(.xlsx, .xls)、ppt(.pptx)多种文档的在线预览方案，有它就够了\n- 简单：只需提供文档的src(网络地址)即可完成文档预览\n- 体验好：选择每个文档的最佳预览方案，保证用户体验和性能都达到最佳状态\n- 性能好：针对数据量较大做了优化\n\n## 安装\n```shell\n#docx文档预览组件\nnpm install @vue-office\u002Fdocx vue-demi@0.14.6\n\n#excel文档预览组件\nnpm install @vue-office\u002Fexcel vue-demi@0.14.6\n\n#pdf文档预览组件\nnpm install @vue-office\u002Fpdf vue-demi@0.14.6\n\n#pptx文档预览组件\nnpm install @vue-office\u002Fpptx vue-demi@0.14.6\n```\n如果是vue2.6版本或以下还需要额外安装 @vue\u002Fcomposition-api\n```shell\nnpm install @vue\u002Fcomposition-api\n```\n\n## 使用示例\n\n文档预览场景大致可以分为三种：\n- 有文档CDN地址，比如 https:\u002F\u002F***.docx，将文档地址字符串传给组件的src属性\n- 通过接口请求获取文件内容，此时可以获取文件的ArrayBuffer或Blob格式数据传给组件的src属性\n- 文件上传时预览，此时可以获取文件的ArrayBuffer或Blob格式数据传给组件的src属性\n\n\u003Cdetails>\n\u003Csummary>docx文件预览示例 （三种使用方式均有示例）\u003C\u002Fsummary>\n\n**1. 使用网络地址预览**\n```vue\n\u003Ctemplate>\n    \u003Cvue-office-docx\n        :src=\"docx\"\n        style=\"height: 100vh;\"\n        @rendered=\"rendered\"\n    \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n\u002F\u002F引入VueOfficeDocx组件\nimport VueOfficeDocx from '@vue-office\u002Fdocx'\n\u002F\u002F引入相关样式\nimport '@vue-office\u002Fdocx\u002Flib\u002Findex.css'\n\nexport default {\n    components:{\n        VueOfficeDocx\n    },\n    data(){\n        return {\n            docx: 'http:\u002F\u002Fstatic.shanhuxueyuan.com\u002Ftest6.docx' \u002F\u002F设置文档网络地址，可以是相对地址\n        }\n    },\n    methods:{\n        rendered(){\n            console.log(\"渲染完成\")\n        }\n    }\n}\n\u003C\u002Fscript>\n```\n\n**2. 上传文件预览**\n\n读取文件的ArrayBuffer\n```vue\n\u003Ctemplate>\n    \u003Cdiv>\n        \u003Cinput type=\"file\" @change=\"changeHandle\"\u002F>\n        \u003Cvue-office-docx :src=\"src\"\u002F>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nimport VueOfficeDocx from '@vue-office\u002Fdocx'\nimport '@vue-office\u002Fdocx\u002Flib\u002Findex.css'\n\nexport default {\n    components: {\n        VueOfficeDocx\n    },\n    data(){\n        return {\n            src: ''\n        }\n    },\n    methods:{\n        changeHandle(event){\n            let file = event.target.files[0]\n            let fileReader = new FileReader()\n            fileReader.readAsArrayBuffer(file)\n            fileReader.onload =  () => {\n                this.src = fileReader.result\n            }\n        }\n    }\n}\n\u003C\u002Fscript>\n```\n\n**3. 二进制文件预览**\n\n如果后端给的不是CDN地址，而是一些POST接口，该接口返回二进制流，则可以调用接口获取文件的ArrayBuffer数据，传递给src属性。\n\n```vue\n\u003Ctemplate>\n    \u003Cvue-office-docx\n        :src=\"docx\"\n        style=\"height: 100vh;\"\n        @rendered=\"rendered\"\n    \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n\u002F\u002F引入VueOfficeDocx组件\nimport VueOfficeDocx from '@vue-office\u002Fdocx'\n\u002F\u002F引入相关样式\nimport '@vue-office\u002Fdocx\u002Flib\u002Findex.css'\n\nexport default {\n    components:{\n        VueOfficeDocx\n    },\n    data(){\n        return {\n            docx: ''\n        }\n    },\n    mounted(){\n        fetch('你的API文件地址', {\n            method: 'post'\n        }).then(res=>{\n            \u002F\u002F读取文件的arrayBuffer\n            res.arrayBuffer().then(res=>{\n                this.docx = res\n            })\n        })\n    },\n    methods:{\n        rendered(){\n            console.log(\"渲染完成\")\n        }\n    }\n}\n\u003C\u002Fscript>\n```\n\n\u003C\u002Fdetails>\n\n\u003Cdetails>\n\u003Csummary>excel 文件预览示例 \u003C\u002Fsummary>\n\n通过网络地址预览示例如下，通过文件ArrayBuffer预览和上面docx的使用方式一致。\n```vue\n\u003Ctemplate>\n    \u003Cvue-office-excel\n        :src=\"excel\"\n        style=\"height: 100vh;\"\n        @rendered=\"renderedHandler\"\n        @error=\"errorHandler\"\n    \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n\u002F\u002F引入VueOfficeExcel组件\nimport VueOfficeExcel from '@vue-office\u002Fexcel'\n\u002F\u002F引入相关样式\nimport '@vue-office\u002Fexcel\u002Flib\u002Findex.css'\n\nexport default {\n    components: {\n        VueOfficeExcel\n    },\n    data() {\n        return {\n            excel: 'http:\u002F\u002Fstatic.shanhuxueyuan.com\u002Fdemo\u002Fexcel.xlsx'\u002F\u002F设置文档地址\n        }\n    },\n    methods: {\n        renderedHandler() {\n            console.log(\"渲染完成\")\n        },\n        errorHandler() {\n            console.log(\"渲染失败\")\n        }\n    }\n}\n\u003C\u002Fscript>\n```\n\u003C\u002Fdetails>\n\n\u003Cdetails>\n\u003Csummary>pdf 文件预览示例 \u003C\u002Fsummary>\n\n通过网络地址预览示例如下，通过文件ArrayBuffer预览和上面docx的使用方式一致。\n```vue\n\u003Ctemplate>\n    \u003Cvue-office-pdf\n        :src=\"pdf\"\n        style=\"height: 100vh\"\n        @rendered=\"renderedHandler\"\n        @error=\"errorHandler\"\n    \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n\u002F\u002F引入VueOfficePdf组件\nimport VueOfficePdf from '@vue-office\u002Fpdf'\n\nexport default {\n    components: {\n        VueOfficePdf\n    },\n    data() {\n        return {\n            pdf: 'http:\u002F\u002Fstatic.shanhuxueyuan.com\u002Ftest.pdf' \u002F\u002F设置文档地址\n        }\n    },\n    methods: {\n        renderedHandler() {\n            console.log(\"渲染完成\")\n        },\n        errorHandler() {\n            console.log(\"渲染失败\")\n        }\n    }\n}\n\u003C\u002Fscript>\n```\n\n\u003C\u002Fdetails>\n\n\n\u003Cdetails>\n\u003Csummary>pptx 文件预览示例 \u003C\u002Fsummary>\n\n通过网络地址预览示例如下，通过文件ArrayBuffer预览和上面docx的使用方式一致。\n```vue\n\u003Ctemplate>\n    \u003Cvue-office-pptx\n        :src=\"pdf\"\n        style=\"height: 100vh\"\n        @rendered=\"renderedHandler\"\n        @error=\"errorHandler\"\n    \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nimport VueOfficePptx from '@vue-office\u002Fpptx'\n\nexport default {\n    components: {\n        VueOfficePptx\n    },\n    data() {\n        return {\n            pdf: 'http:\u002F\u002F****\u002Ftest.pptx' \u002F\u002F设置文档地址\n        }\n    },\n    methods: {\n        renderedHandler() {\n            console.log(\"渲染完成\")\n        },\n        errorHandler() {\n            console.log(\"渲染失败\")\n        }\n    }\n}\n\u003C\u002Fscript>\n```\n\n\u003C\u002Fdetails>\n\n# 项目依赖的第三方库\n\n- docx： 基于docx-preview库实现，相关issues暂不处理\n- pdf： 基于pdfjs库实现，实现了虚拟列表增加性能\n- excel: 基于exceljs 和 x-data-spreadsheet实现，全网样式支持更好\n- pptx： 基于自研库 [pptx-preview](https:\u002F\u002Fgithub.com\u002F501351981\u002Fpptx-preview) 实现，源码单独付费向作者索取\n\n# 我要支持作者\n## 打赏加微信好友\n如果该项目帮到了您，节省了您宝贵的开发时间，还请您不吝给项目点个免费的赞。\n\n当然了，如果您能请作者喝杯咖啡，哪怕喝瓶娃娃哈矿泉水，也是对作者最真诚的鼓励，打赏用户欢迎添加微信，后续交流前端相关问题。\n\n![](https:\u002F\u002F501351981.github.io\u002Fvue-office\u002Fexamples\u002Fdist\u002Fstatic\u002Fwx.png)\n\n如果您有问题要咨询或者解决，可打赏咨询作者，自2024年12月起，可能不会及时处理issues内容，作者也要吃饭，也面临大龄程序员困境。\n\n\n## 掘金小册\n\n凝聚作者近10年工作经验的掘金小册[《如何写出高质量的前端代码》](https:\u002F\u002Fjuejin.cn\u002Fbook\u002F7351005935306801188) 已经上线啦，欢迎前端同学关注，希望能够提升大家的前端编码水平。\n\n小册已售 1200+份，收到前端同学的高度评价，对提升日常开发效率和质量，有非常大的帮助。\n\n\n","vue-office 是一个支持多种Office文件（如docx、excel、pdf、pptx）在线预览的Vue组件库，同时兼容Vue2和Vue3，并且也能在非Vue框架如React中使用。其核心功能包括一站式提供多种文档格式的预览方案，用户只需提供文档的网络地址或文件内容即可实现预览；该库针对不同类型的文档选择最优预览方案以保证良好的用户体验与性能表现，尤其是在处理大数据量文件时做了专门优化。适用于需要在网页上直接展示Office文档的各种应用场景，比如企业内部管理系统、在线教育平台等。","2026-06-11 03:36:46","high_star"]