{"id":13490045,"url":"https://github.com/501351981/vue-office","last_synced_at":"2025-05-16T01:03:16.334Z","repository":{"id":62979389,"uuid":"563632060","full_name":"501351981/vue-office","owner":"501351981","description":"支持word(.docx)、excel(.xlsx,.xls)、pdf、pptx等各类型office文件预览的vue组件集合，提供一站式office文件预览方案，支持vue2和3，也支持React等非Vue框架。Web-based pdf, excel, word, pptx preview library","archived":false,"fork":false,"pushed_at":"2025-01-11T00:40:52.000Z","size":140168,"stargazers_count":4641,"open_issues_count":175,"forks_count":509,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-05-09T00:57:07.928Z","etag":null,"topics":["docx","docx-preview","excel","pdf","pdf-preview","pdf-viewer","vue","xlsx","xlsx-preview"],"latest_commit_sha":null,"homepage":"https://501351981.github.io/vue-office/examples/docs/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/501351981.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-09T02:07:52.000Z","updated_at":"2025-05-08T10:17:02.000Z","dependencies_parsed_at":"2025-01-26T12:00:52.187Z","dependency_job_id":"73595d8e-b3f1-4d10-bc0c-2efaacd37411","html_url":"https://github.com/501351981/vue-office","commit_stats":{"total_commits":220,"total_committers":5,"mean_commits":44.0,"dds":"0.040909090909090895","last_synced_commit":"9b4cf1a64fe9fe6748388a3f3a571d8bc73617d8"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/501351981%2Fvue-office","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/501351981%2Fvue-office/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/501351981%2Fvue-office/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/501351981%2Fvue-office/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/501351981","download_url":"https://codeload.github.com/501351981/vue-office/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254182638,"owners_count":22028340,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["docx","docx-preview","excel","pdf","pdf-preview","pdf-viewer","vue","xlsx","xlsx-preview"],"created_at":"2024-07-31T19:00:39.836Z","updated_at":"2025-05-16T01:03:16.249Z","avatar_url":"https://github.com/501351981.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# vue-office\n\n支持多种文件(**docx、excel、pdf、pptx**)预览的vue组件库，支持vue2/3。也支持非Vue框架的预览。\n\n[《演示效果》](https://501351981.github.io/vue-office/examples/dist/)\n\n[《使用非Vue框架（原生js、React等）、或者Vue里面报错，看这里》](https://501351981.github.io/vue-office/examples/docs/guide/js-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/docx vue-demi@0.14.6\n\n#excel文档预览组件\nnpm install @vue-office/excel vue-demi@0.14.6\n\n#pdf文档预览组件\nnpm install @vue-office/pdf vue-demi@0.14.6\n\n#pptx文档预览组件\nnpm install @vue-office/pptx vue-demi@0.14.6\n```\n如果是vue2.6版本或以下还需要额外安装 @vue/composition-api\n```shell\nnpm install @vue/composition-api\n```\n\n## 使用示例\n\n文档预览场景大致可以分为三种：\n- 有文档CDN地址，比如 https://***.docx，将文档地址字符串传给组件的src属性\n- 通过接口请求获取文件内容，此时可以获取文件的ArrayBuffer或Blob格式数据传给组件的src属性\n- 文件上传时预览，此时可以获取文件的ArrayBuffer或Blob格式数据传给组件的src属性\n\n\u003cdetails\u003e\n\u003csummary\u003edocx文件预览示例 （三种使用方式均有示例）\u003c/summary\u003e\n\n**1. 使用网络地址预览**\n```vue\n\u003ctemplate\u003e\n    \u003cvue-office-docx\n        :src=\"docx\"\n        style=\"height: 100vh;\"\n        @rendered=\"rendered\"\n    /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n//引入VueOfficeDocx组件\nimport VueOfficeDocx from '@vue-office/docx'\n//引入相关样式\nimport '@vue-office/docx/lib/index.css'\n\nexport default {\n    components:{\n        VueOfficeDocx\n    },\n    data(){\n        return {\n            docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档网络地址，可以是相对地址\n        }\n    },\n    methods:{\n        rendered(){\n            console.log(\"渲染完成\")\n        }\n    }\n}\n\u003c/script\u003e\n```\n\n**2. 上传文件预览**\n\n读取文件的ArrayBuffer\n```vue\n\u003ctemplate\u003e\n    \u003cdiv\u003e\n        \u003cinput type=\"file\" @change=\"changeHandle\"/\u003e\n        \u003cvue-office-docx :src=\"src\"/\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport VueOfficeDocx from '@vue-office/docx'\nimport '@vue-office/docx/lib/index.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 =  () =\u003e {\n                this.src = fileReader.result\n            }\n        }\n    }\n}\n\u003c/script\u003e\n```\n\n**3. 二进制文件预览**\n\n如果后端给的不是CDN地址，而是一些POST接口，该接口返回二进制流，则可以调用接口获取文件的ArrayBuffer数据，传递给src属性。\n\n```vue\n\u003ctemplate\u003e\n    \u003cvue-office-docx\n        :src=\"docx\"\n        style=\"height: 100vh;\"\n        @rendered=\"rendered\"\n    /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n//引入VueOfficeDocx组件\nimport VueOfficeDocx from '@vue-office/docx'\n//引入相关样式\nimport '@vue-office/docx/lib/index.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=\u003e{\n            //读取文件的arrayBuffer\n            res.arrayBuffer().then(res=\u003e{\n                this.docx = res\n            })\n        })\n    },\n    methods:{\n        rendered(){\n            console.log(\"渲染完成\")\n        }\n    }\n}\n\u003c/script\u003e\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eexcel 文件预览示例 \u003c/summary\u003e\n\n通过网络地址预览示例如下，通过文件ArrayBuffer预览和上面docx的使用方式一致。\n```vue\n\u003ctemplate\u003e\n    \u003cvue-office-excel\n        :src=\"excel\"\n        style=\"height: 100vh;\"\n        @rendered=\"renderedHandler\"\n        @error=\"errorHandler\"\n    /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n//引入VueOfficeExcel组件\nimport VueOfficeExcel from '@vue-office/excel'\n//引入相关样式\nimport '@vue-office/excel/lib/index.css'\n\nexport default {\n    components: {\n        VueOfficeExcel\n    },\n    data() {\n        return {\n            excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//设置文档地址\n        }\n    },\n    methods: {\n        renderedHandler() {\n            console.log(\"渲染完成\")\n        },\n        errorHandler() {\n            console.log(\"渲染失败\")\n        }\n    }\n}\n\u003c/script\u003e\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003epdf 文件预览示例 \u003c/summary\u003e\n\n通过网络地址预览示例如下，通过文件ArrayBuffer预览和上面docx的使用方式一致。\n```vue\n\u003ctemplate\u003e\n    \u003cvue-office-pdf\n        :src=\"pdf\"\n        style=\"height: 100vh\"\n        @rendered=\"renderedHandler\"\n        @error=\"errorHandler\"\n    /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n//引入VueOfficePdf组件\nimport VueOfficePdf from '@vue-office/pdf'\n\nexport default {\n    components: {\n        VueOfficePdf\n    },\n    data() {\n        return {\n            pdf: 'http://static.shanhuxueyuan.com/test.pdf' //设置文档地址\n        }\n    },\n    methods: {\n        renderedHandler() {\n            console.log(\"渲染完成\")\n        },\n        errorHandler() {\n            console.log(\"渲染失败\")\n        }\n    }\n}\n\u003c/script\u003e\n```\n\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\n\u003csummary\u003epptx 文件预览示例 \u003c/summary\u003e\n\n通过网络地址预览示例如下，通过文件ArrayBuffer预览和上面docx的使用方式一致。\n```vue\n\u003ctemplate\u003e\n    \u003cvue-office-pptx\n        :src=\"pdf\"\n        style=\"height: 100vh\"\n        @rendered=\"renderedHandler\"\n        @error=\"errorHandler\"\n    /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport VueOfficePptx from '@vue-office/pptx'\n\nexport default {\n    components: {\n        VueOfficePptx\n    },\n    data() {\n        return {\n            pdf: 'http://****/test.pptx' //设置文档地址\n        }\n    },\n    methods: {\n        renderedHandler() {\n            console.log(\"渲染完成\")\n        },\n        errorHandler() {\n            console.log(\"渲染失败\")\n        }\n    }\n}\n\u003c/script\u003e\n```\n\n\u003c/details\u003e\n\n# 项目依赖的第三方库\n\n- docx： 基于docx-preview库实现，相关issues暂不处理\n- pdf： 基于pdfjs库实现，实现了虚拟列表增加性能\n- excel: 基于exceljs 和 x-data-spreadsheet实现，全网样式支持更好\n- pptx： 基于自研库 [pptx-preview](https://github.com/501351981/pptx-preview) 实现，源码单独付费向作者索取\n\n# 我要支持作者\n\n如果该项目帮到了您，节省了您宝贵的开发时间，还请您不吝给项目点个免费的赞。\n\n当然了，如果您能请作者喝杯咖啡，哪怕喝瓶娃娃哈矿泉水，也是对作者最真诚的鼓励，打赏用户欢迎添加微信，后续交流前端相关问题。\n\n![](https://501351981.github.io/vue-office/examples/dist/static/wx.png)\n\n如果您有问题要咨询或者解决，可打赏咨询作者，自2024年12月起，可能不会及时处理issues内容，作者也要吃饭，也面临大龄程序员困境。\n\n## 为什么没有开放源码（打赏50+送源码）\n\n我们都知道，如果一件事情没有收益，那是很难长久的，特别是对于一个大龄程序员来说，花费大量的时间\"用爱发电\"对大家来说是非常值得尊敬的，而我感觉对家庭来说可能是不道德的，没有收益，没有正反馈，很难把这个库完善下去，我们也看到了，很多开源库已经多年没有更新了。为了后续开发出更好用的前端office文件预览库，本项目需要大家的支持！\n\n源码需付费向作者索要（_**打赏50**+_），打赏用户（无论多少）均可添加作者微信，交流该库或者前端领域话题，源码不得用于开源（这也是关闭源码的原因之一，有些人直接复制开源作为自己项目）。\n\n## 掘金小册\n\n凝聚作者近10年工作经验的掘金小册[《如何写出高质量的前端代码》](https://juejin.cn/book/7351005935306801188) 已经上线啦，欢迎前端同学关注，希望能够提升大家的前端编码水平。\n\n小册已售 890+份，收到前端同学的高度评价，对提升日常开发效率和质量，有非常大的帮助。\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F501351981%2Fvue-office","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F501351981%2Fvue-office","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F501351981%2Fvue-office/lists"}