vue在线预览word、excel、PDF

1、安装依赖

复制代码
#docx文档预览组件
npm install @vue-office/docx [email protected] -S

#excel文档预览组件
npm install @vue-office/excel [email protected] -S

#pdf文档预览组件
npm install @vue-office/pdf [email protected] -S

如果是vue2.6版本或以下还需要额外安装 @vue/composition-api

复制代码
npm install @vue/composition-api -S

2、预览WORD代码

复制代码
<template>
  <div>
    <vue-office-docx :src="docx" style="height: 100vh;" @rendered="rendered" />
  </div>
</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>

<style lang="scss" scoped></style>

3、预览EXCEL

复制代码
<template>
  <div>
    <vue-office-excel :src="excel" style="height: 100vh;" @rendered="renderedHandler" @error="errorHandler" />
  </div>
</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>

<style lang="scss" scoped></style>

4、预览PDF

复制代码
<template>
  <div>
    <vue-office-pdf :src="pdf" @rendered="renderedHandler" @error="errorHandler" />
  </div>
</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>

<style lang="scss" scoped></style>

5、项目参考地址

复制代码
https://github.com/501351981/vue-office.git
相关推荐
凉豆菌1 小时前
在html中如何创建vue自定义组件(以自定义文件上传组件为例,vue2+elementUI)
vue.js·elementui·html
广西千灵通网络科技有限公司1 小时前
基于 springboot+vue+elementui 的办公自动化系统设计(
vue.js·spring boot·elementui
YuShiYue4 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
一个专注写代码的程序媛4 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
vvilkim4 小时前
React 与 Vue:两大前端框架的深度对比
vue.js·react.js·前端框架
CodeCraft Studio4 小时前
Excel处理控件Aspose.Cells教程:使用 Python 在 Excel 中进行数据验
开发语言·python·excel
장숙혜4 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
时间之城4 小时前
笔记:记一次使用EasyExcel重写convertToExcelData方法无法读取@ExcelDictFormat注解的问题(已解决)
java·spring boot·笔记·spring·excel
BillKu4 小时前
Vue3父子组件数据双向同步实现方法
前端·javascript·vue.js
VBAMatrix5 小时前
审计效率升级!快速匹配Excel报表项目对应的Word附注序号
excel·审计·财务报表·会计师事务所·审计工具