vue在线预览word、excel、PDF

1、安装依赖

复制代码
#docx文档预览组件
npm install @vue-office/docx vue-demi@0.13.11 -S

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

#pdf文档预览组件
npm install @vue-office/pdf vue-demi@0.13.11 -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 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing1 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
玩泥巴的2 小时前
.NET驾驭Word之力:理解Word对象模型核心 (Application, Document, Range)
word·二次开发·office·com互操作
最后一个农民工4 小时前
vue3实现仿豆包模版式智能输入框
前端·vue.js
艾小码7 小时前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
wusp19947 小时前
项目实战——“微商城”前后台【005】之前台项目首页编写
vue.js·vant·底部导航栏
森林的尽头是阳光8 小时前
vue防抖节流,全局定义,使用
前端·javascript·vue.js
计算机毕业设计木哥8 小时前
计算机毕设选题推荐:基于Java+SpringBoot物品租赁管理系统【源码+文档+调试】
java·vue.js·spring boot·mysql·spark·毕业设计·课程设计
zero13_小葵司8 小时前
Vue 3 前端工程化规范
前端·javascript·vue.js
Yolanda_20228 小时前
vue-sync修饰符解析以及切换iframe页面进行保存提示功能的思路
前端·javascript·vue.js