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>
相关推荐
m0_748230944 分钟前
Rust赋能前端: 纯血前端将 Table 导出 Excel
前端·rust·excel
Swift社区1 小时前
Excel 列名称转换问题 Swift 解答
开发语言·excel·swift
编程百晓君2 小时前
一文解释清楚OpenHarmony面向全场景的分布式操作系统
vue.js
暴富的Tdy2 小时前
【CryptoJS库AES加密】
前端·javascript·vue.js
neeef_se2 小时前
Vue中使用a标签下载静态资源文件(比如excel、pdf等),纯前端操作
前端·vue.js·excel
℘团子এ2 小时前
js和html中,将Excel文件渲染在页面上
javascript·html·excel
z千鑫2 小时前
【前端】入门指南:Vue中使用Node.js进行数据库CRUD操作的详细步骤
前端·vue.js·node.js
生产队队长4 小时前
项目练习:element-ui的valid表单验证功能用法
前端·vue.js·ui
web137656076434 小时前
WebStorm 创建一个Vue项目
ide·vue.js·webstorm
秃头女孩y4 小时前
【React中最优雅的异步请求】
javascript·vue.js·react.js