vue-office：Web 端 Office 文件预览工具库

vue-office 是一个支持多种文件预览的 Vue 插件工具库，能够处理 Word、Excel、PDF 等各类 Office 文件，兼容 Vue2、Vue3 及其他非 Vue 框架，支持在线地址和上传文件的预览。

在线预览

插件安装

// docx文档预览组件
npm install @vue-office/docx vue-demi

// excel文档预览组件
npm install @vue-office/excel vue-demi

// pdf文档预览组件
npm install @vue-office/pdf vue-demi

在 Vue 中使用

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

<script>
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'

export default {
  components: {
    VueOfficeDocx
  },
  data() {
    return {
      docx: 'xxx.docx' // 设置文档网络地址，可以是相对地址
    }
  },
  methods: {
    renderedHandler() {
      console.log("渲染完成")
    },
    errorHandler() {
      console.log("渲染失败")
    }
  }
}
</script>

其他方式使用

// npm
npm i @js-preview/docx

import jsPreviewDocx from "@js-preview/docx";
import '@js-preview/docx/lib/index.css'

// 初始化
const myDocxPreviewer = jsPreviewDocx.init(document.getElementById('docx'));
myDocxPreviewer.preview('xxx.docx').then(res => {
  console.log('预览完成');
}).catch(e => {
  console.log('预览失败', e);
});

功能和特性

• 支持 Word、Excel、PDF 等多种类型的 Office 文件预览。
• 支持在线链接地址和上传文件的预览，可以解析 ArrayBuffer、Blob 等格式。
• 支持文件格式相关配置，如渲染行数、列数、宽、高等样式设置，支持事件监听功能。

资源推荐

关注《前端资源推荐》公众号，获取各种前端组件、UI 框架、JS 插件、动画库、开源项目等资源，欢迎投稿和分享！

• GitHub: vue-office
• 官方文档: vue-office 文档
• 在线预览: 在线预览示例