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>
相关推荐
Damon小智37 分钟前
玩转ClaudeCode:通过Excel-MCP实现数据清洗并写入Excel
ai·excel·ai编程·claude·chrome devtools·rpa·claude code
@大迁世界1 小时前
第03章: Vue 3 组合式函数深度指南
前端·javascript·vue.js·前端框架·ecmascript
二十雨辰1 小时前
vite与ts的结合
开发语言·前端·vue.js
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 25 - Watch:清理 SideEffect
前端·javascript·vue.js
我的div丢了肿么办2 小时前
vue3使用h函数如何封装组件和$attrs和props的区别
前端·javascript·vue.js
我的写法有点潮2 小时前
竟然被element-plus背刺了
前端·javascript·vue.js
岁月宁静2 小时前
AI 聊天消息长列表性能优化:后端分页 + 前端虚拟滚动
前端·vue.js·人工智能
Olrookie2 小时前
若依前后端分离版学习笔记(十九)——导入,导出实现流程及图片,文件组件
前端·vue.js·笔记
墨客希2 小时前
通俗易懂的理解Vue.js
vue.js·flutter
浩男孩2 小时前
🍀终于向常量组件下手了,使用TypeScript 基于 TDesign二次封装常量组件 🚀🚀
前端·vue.js