vue office

github

Github start已经达到3700，看来还是很受小伙伴们喜好的！

html手机预览插件极致易用的前端文件预览插件 Vue Office Node.js

开始安装

Vue3：

#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：

npm install @vue/composition-api

代码示例：

<template> <vue-office-docx :src="docx" style="height: 100vh;" @rendered="renderedHandler" @error="errorHandler" /></template>

非Vue项目：

# docx文件预览库npm i @js-preview/docximport jsPreviewDocx from "@js-preview/docx";import '@js-preview/docx/lib/index.css'//初始化时指明要挂载的父元素Dom节点const myDocxPreviewer = jsPreviewDocx.init(document.getElementById('docx'));# excel文件预览库npm i @js-preview/excelimport jsPreviewExcel from "@js-preview/excel";import '@js-preview/excel/lib/index.css';const myExcelPreviewer = jsPreviewExcel.init(document.getElementById('excel'));# pdf文件预览库npm i @js-preview/pdfimport jsPreviewPdf from "@js-preview/pdf";const myPdfPreviewer = jsPreviewPdf.init(document.getElementById('pdf'), {属性配置src 文档地址request-options 组件内部通过window.fetch进行要求options 一些个性配置，比如宽高档staticFileUrl 这个是pdf特有的，毕竟pdf和其他格式文件不一样官方地址

官网地址：https://501351981.github.io/vue-office/examples/docs/

demo地址：https://501351981.github.io/vue-office/examples/dist/#/docx