vue-office:word(.docx)、pdf、excel(.xlsx,.xls)格式文件预览

vue-office:word(.docx)、excel(.xlsx,.xls)格式文件预览

组件安装
bash 复制代码
// docx文档预览组件
npm install @vue-office/docx vue-demi@0.14.6

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

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

注意:如果是vue2.6版本或以下还需要额外安装 @vue/composition-api,不然会报错

bash 复制代码
npm install @vue/composition-api --save
引用使用

docx

html 复制代码
<template>
 <div class="dashboard-container">
    <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

    <el-dialog
      title="docx文件预览"
      :visible.sync="dialogVisible"
      width="60%">
      <VueOfficeDocx :src="url" style="height: 60vh;" @rendered="rendered"></VueOfficeDocx>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'

export default {
    components:{
        VueOfficeDocx
    },
    data(){
        return {
            url: 'eee.docx' //设置文档网络地址,或者相对地址
        }
    },
    methods: {
        rendered(){
            console.log("渲染完成")
        }
    }
}
</script>

xlsx xls

html 复制代码
<VueOfficeExcel :src="url" style="height: 60vh;" :options="options" @rendered="renderedHandler"
        @error="errorHandler"></VueOfficeExcel>
html 复制代码
<script>
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'
    export default {
    components: {
        VueOfficeExcel
    },
    data() {
        return {
            excel: 'eee.xlsx'//设置文档地址,
            options: {
                xls: true //设为true,可预览xls
            }
        }
    },
    methods: {
        renderedHandler() {
            console.log("渲染完成")
        },
        errorHandler() {
            console.log("渲染失败")
        }
    }
}
</script>
相关推荐
lalalalalalalala1 小时前
开箱即用的 Vue3 无限平滑滚动组件
前端·vue.js
前端Hardy1 小时前
8个你必须掌握的「Vue」实用技巧
前端·javascript·vue.js
久爱@勿忘2 小时前
第二章:创建登录页面
前端·vue.js·elementplus
Jinxiansen02112 小时前
Vue 3 中父子组件双向绑定的 4 种方式
javascript·vue.js·ecmascript
木依2 小时前
Vue3 Element plus table有fixed列时错行
javascript·vue.js·elementui
行云&流水2 小时前
打造自己的组件库(二)CSS工程化方案
前端·vue.js·vue3组件库
弗锐土豆3 小时前
一个基于若依(ruoyi-vue3)的小项目部署记录
前端·vue.js·部署·springcloud·ruoyi·若依
1undefined23 小时前
element中的table改造成虚拟列表(不定高),并封装成hooks
前端·vue.js
wangpq3 小时前
element-ui表单使用validateField校验多层循环中的字段
javascript·vue.js
豆苗学前端3 小时前
从零开始教你如何使用 Vue 3 + TypeScript 实现一个现代化的液态玻璃效果(Glass Morphism)登录卡片
前端·vue.js·面试