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>
相关推荐
行云&流水2 分钟前
打造自己的组件库(二)CSS工程化方案
前端·vue.js·vue3组件库
弗锐土豆1 小时前
一个基于若依(ruoyi-vue3)的小项目部署记录
前端·vue.js·部署·springcloud·ruoyi·若依
1undefined21 小时前
element中的table改造成虚拟列表(不定高),并封装成hooks
前端·vue.js
wangpq1 小时前
element-ui表单使用validateField校验多层循环中的字段
javascript·vue.js
豆苗学前端1 小时前
从零开始教你如何使用 Vue 3 + TypeScript 实现一个现代化的液态玻璃效果(Glass Morphism)登录卡片
前端·vue.js·面试
我命由我123452 小时前
Vue 开发问题:Missing required prop: “value“
开发语言·前端·javascript·vue.js·前端框架·ecmascript·js
快起来别睡了2 小时前
Vue 中组件的生命周期与 v-if、v-show 的区别详解
前端·vue.js
张旭超3 小时前
vue3 + element-plus el-table表格二次封装,支持复选框,排序,分页。
前端·vue.js
亿坊电商3 小时前
VUE混合开发,选哪个PHP框架最顺手?
前端·vue.js·php
程序猿小D3 小时前
[附源码+数据库+毕业论]基于Spring Boot+mysql+vue结合内容推荐算法的学生咨询系统
数据库·vue.js·spring boot·mysql·毕业设计·推荐算法·学生咨询系统