当前位置：首页 > article >正文

vue-office：word（.docx）、pdf、excel（.xlsx，.xls）格式文件预览

article 2025/2/22 2:04:30

vue-office：word（.docx）、excel（.xlsx，.xls）格式文件预览

组件安装

// 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，不然会报错

npm install @vue/composition-api --save

引用使用

docx

<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

<VueOfficeExcel :src="url" style="height: 60vh;" :options="options" @rendered="renderedHandler"
        @error="errorHandler"></VueOfficeExcel>

<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>