This is stars and forks stats for /501351981/vue-office repository. As of 29 Mar, 2024 this repository has 1817 stars and 245 forks.
vue-office 支持多种文件(docx、excel、pdf)预览的vue组件库,支持vue2/3。也支持非Vue框架的预览。 《演示效果》 《非Vue框架预览看这里》 功能特色 一站式:提供docx、pdf、excel多种文档的在线预览方案,有它就够了 简单:只需提供文档的src(网络地址)即可完成文档预览 体验好:选择每个文档的最佳预览方案,保证用户体验和性能都达到最佳状态 安装 #docx文档预览组件 npm install @vue-office/docx [email protected] #excel文档预览组件 npm install @vue-office/excel [email protected] #pdf文档预览组件 npm install @vue-office/pdf [email protected] 如果是vue2.6版本或以下还需要额外安装 @vue/composition-api npm install @vue/composition-api/ 使用示例 文档预览场景大致可以分为两种: 有文档网络地址,比如 https://***.docx 文件上传时预览,此时可以获取文件的ArrayBuffer或Blob .docx文件预览 使用网络地址预览 <template> <vue-office-docx :src="docx" style="height: 100vh;" @rendered="rendered" /> </template> <script> //引入VueOfficeDocx组件 import VueOfficeDocx from '@vue-office/docx' //引入相关样式 import '@vue-office/docx/lib/index.css' export default { components:{ VueOfficeDocx }, data(){ return { docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档网络地址,可以是相对地址 } }, methods:{ rendered(){ console.log("渲染完成") } } } </script> 上传文件预览 读取文件的ArrayBuffer <template> <div> <input type="file" @change="changeHandle"/> <vue-office-docx :src="src"/> </div> </template> <script> import VueOfficeDocx from '@vue-office/docx' import '@vue-office/docx/lib/index.css' export default { components: { VueOfficeDocx }, data(){ return { src: '' } }, methods:{ changeHandle(event){ let file = event.target.files[0] let fileReader = new FileReader() fileReader.readAsArrayBuffer(file) fileReader.onload = () => { this.src = fileReader.result } } } } </script> 二进制文件预览 如果后端给的不是CDN地址,而是一些POST接口,该接口返回二进制流,则可以调用接口获取文件的ArrayBuffer数据,传递给src属性。 <template> <vue-office-docx :src="docx" style="height: 100vh;" @rendered="rendered" /> </template> <script> //引入VueOfficeDocx组件 import VueOfficeDocx from '@vue-office/docx' //引入相关样式 import '@vue-office/docx/lib/index.css' export default { components:{ VueOfficeDocx }, data(){ return { docx: '' } }, mounted(){ fetch('你的API文件地址', { method: 'post' }).then(res=>{ //读取文件的arrayBuffer res.arrayBuffer().then(res=>{ this.docx = res }) }) }, methods:{ rendered(){ console.log("渲染完成") } } } </script> excel文件预览 通过网络地址预览示例如下,通过文件ArrayBuffer预览和上面docx的使用方式一致。 <template> <vue-office-excel :src="excel" style="height: 100vh;" @rendered="renderedHandler" @error="errorHandler" /> </template> <script> //引入VueOfficeExcel组件 import VueOfficeExcel from '@vue-office/excel' //引入相关样式 import '@vue-office/excel/lib/index.css' export default { components: { VueOfficeExcel }, data() { return { excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//设置文档地址 } }, methods: { renderedHandler() { console.log("渲染完成") }, errorHandler() { console.log("渲染失败") } } } </script> pdf文件预览 通过网络地址预览示例如下,通过文件ArrayBuffer预览和上面docx的使用方式一致。 <template> <vue-office-pdf :src="pdf" @rendered="renderedHandler" @error="errorHandler" /> </template> <script> //引入VueOfficePdf组件 import VueOfficePdf from '@vue-office/pdf' export default { components: { VueOfficePdf }, data() { return { pdf: 'http://static.shanhuxueyuan.com/test.pdf' //设置文档地址 } }, methods: { renderedHandler() { console.log("渲染完成") }, errorHandler() { console.log("渲染失败") } } } </script> 赞助和微信交流 如果该项目确实帮助到了您,为您节省了时间,请您不吝赞助,请作者喝一杯秋天的奶茶,暖一暖冰冷的心吧,哈哈哈,优化项目真的都是用爱发电^_^,不能打赏的朋友麻烦帮点个免费的赞 打赏的朋友欢迎添加微信或者进入前端开发交流群,交流前端开发中遇到的技术、问题和困惑。 【仅添加打赏过的用户,不定期删除屏蔽朋友圈的好友(为什么打赏了才能微信问问题?那别人为什么要先付出时间去解答你的问题?都是成年人了,人与人之间是价值交换,不是单向付出)】 常见问题 恳请各位大佬不吝点赞,开源不易,感谢支持~~ 我的其他库 v-focus-next:一个Vue指令,使用该指令后,在表单中回车之后可以自动聚焦下一个表单元素,大大提升表单填写的流畅性。 《v-focus-next》 HowToCode:前端编程之道,探讨如何写出高质量的前端代码,总结前端编程的各种方法论、原则、思维模型等。《前端编程之道》
vue-office 支持多种文件(docx、excel、pdf)预览的vue组件库,支持vue2/3。也支持非Vue框架的预览。 《演示效果》 《非Vue框架预览看这里》 功能特色 一站式:提供docx、pdf、excel多种文档的在线预览方案,有它就够了 简单:只需提供文档的src(网络地址)即可完成文档预览 体验好:选择每个文档的最佳预览方案,保证用户体验和性能都达到最佳状态 安装 #docx文档预览组件 npm install @vue-office/docx [email protected] #excel文档预览组件 npm install @vue-office/excel [email protected] #pdf文档预览组件 npm install @vue-office/pdf [email protected] 如果是vue2.6版本或以下还需要额外安装 @vue/composition-api npm install @vue/composition-api/ 使用示例 文档预览场景大致可以分为两种: 有文档网络地址,比如 https://***.docx 文件上传时预览,此时可以获取文件的ArrayBuffer或Blob .docx文件预览 使用网络地址预览 <template> <vue-office-docx :src="docx" style="height: 100vh;" @rendered="rendered" /> </template> <script> //引入VueOfficeDocx组件 import VueOfficeDocx from '@vue-office/docx' //引入相关样式 import '@vue-office/docx/lib/index.css' export default { components:{ VueOfficeDocx }, data(){ return { docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档网络地址,可以是相对地址 } }, methods:{ rendered(){ console.log("渲染完成") } } } </script> 上传文件预览 读取文件的ArrayBuffer <template> <div> <input type="file" @change="changeHandle"/> <vue-office-docx :src="src"/> </div> </template> <script> import VueOfficeDocx from '@vue-office/docx' import '@vue-office/docx/lib/index.css' export default { components: { VueOfficeDocx }, data(){ return { src: '' } }, methods:{ changeHandle(event){ let file = event.target.files[0] let fileReader = new FileReader() fileReader.readAsArrayBuffer(file) fileReader.onload = () => { this.src = fileReader.result } } } } </script> 二进制文件预览 如果后端给的不是CDN地址,而是一些POST接口,该接口返回二进制流,则可以调用接口获取文件的ArrayBuffer数据,传递给src属性。 <template> <vue-office-docx :src="docx" style="height: 100vh;" @rendered="rendered" /> </template> <script> //引入VueOfficeDocx组件 import VueOfficeDocx from '@vue-office/docx' //引入相关样式 import '@vue-office/docx/lib/index.css' export default { components:{ VueOfficeDocx }, data(){ return { docx: '' } }, mounted(){ fetch('你的API文件地址', { method: 'post' }).then(res=>{ //读取文件的arrayBuffer res.arrayBuffer().then(res=>{ this.docx = res }) }) }, methods:{ rendered(){ console.log("渲染完成") } } } </script> excel文件预览 通过网络地址预览示例如下,通过文件ArrayBuffer预览和上面docx的使用方式一致。 <template> <vue-office-excel :src="excel" style="height: 100vh;" @rendered="renderedHandler" @error="errorHandler" /> </template> <script> //引入VueOfficeExcel组件 import VueOfficeExcel from '@vue-office/excel' //引入相关样式 import '@vue-office/excel/lib/index.css' export default { components: { VueOfficeExcel }, data() { return { excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//设置文档地址 } }, methods: { renderedHandler() { console.log("渲染完成") }, errorHandler() { console.log("渲染失败") } } } </script> pdf文件预览 通过网络地址预览示例如下,通过文件ArrayBuffer预览和上面docx的使用方式一致。 <template> <vue-office-pdf :src="pdf" @rendered="renderedHandler" @error="errorHandler" /> </template> <script> //引入VueOfficePdf组件 import VueOfficePdf from '@vue-office/pdf' export default { components: { VueOfficePdf }, data() { return { pdf: 'http://static.shanhuxueyuan.com/test.pdf' //设置文档地址 } }, methods: { renderedHandler() { console.log("渲染完成") }, errorHandler() { console.log("渲染失败") } } } </script> 赞助和微信交流 如果该项目确实帮助到了您,为您节省了时间,请您不吝赞助,请作者喝一杯秋天的奶茶,暖一暖冰冷的心吧,哈哈哈,优化项目真的都是用爱发电^_^,不能打赏的朋友麻烦帮点个免费的赞 打赏的朋友欢迎添加微信或者进入前端开发交流群,交流前端开发中遇到的技术、问题和困惑。 【仅添加打赏过的用户,不定期删除屏蔽朋友圈的好友(为什么打赏了才能微信问问题?那别人为什么要先付出时间去解答你的问题?都是成年人了,人与人之间是价值交换,不是单向付出)】 常见问题 恳请各位大佬不吝点赞,开源不易,感谢支持~~ 我的其他库 v-focus-next:一个Vue指令,使用该指令后,在表单中回车之后可以自动聚焦下一个表单元素,大大提升表单填写的流畅性。 《v-focus-next》 HowToCode:前端编程之道,探讨如何写出高质量的前端代码,总结前端编程的各种方法论、原则、思维模型等。《前端编程之道》
repo | techs | stars | weekly | forks | weekly |
---|---|---|---|---|---|
Void-Crew/Voidcrew-LRP | DMJavaScriptHTML | 3 | 0 | 29 | 0 |
Cdelatorre/books-express-23 | JavaScriptHandlebarsCSS | 0 | 0 | 8 | 0 |
themesberg/flowbite-admin-dashboard | HTMLJavaScriptCSS | 1k | 0 | 237 | 0 |
picocss/examples | HTMLCSSJavaScript | 153 | 0 | 54 | 0 |
midudev/aprendiendo-react | TypeScriptCSSJavaScript | 5.2k | 0 | 856 | 0 |
HorrorPills/ChatGPT-Gnome-Desktop-Extension | JavaScriptMakefile | 451 | 0 | 42 | 0 |
MicrosoftDocs/office-docs-powershell | JavaScriptPowerShell | 567 | -1 | 1.2k | +2 |
Plenituz/anyfront | JavaScriptTypeScriptOther | 73 | 0 | 1 | 0 |
mahdibland/V2RayAggregator | PythonShellJavaScript | 1.1k | 0 | 216 | 0 |
WomenWhoCode/london | SCSSHTMLJavaScript | 13 | +1 | 17 | +1 |