【记录49】vue2 vue-office在线预览 docx、pdf、excel文档

在线预览 docx、pdf、excel文档

docx

npm install @vue-office/docx vue-demi@0.14.6 指定版本

npm install @vue-office/docx vue-demi

html 复制代码

<template>
    <VueOfficeDocx :src="pdf" style="height: 100vh;" @rendere="rendereHandler" @error="errorHandler" />
</template>

pdf

npm install @vue-office/pdf vue-demi@0.14.6 指定版本

npm install @vue-office/pdf vue-demi

html 复制代码

<template>
    <VueOfficePdf :src="pdf" style="height: 100vh;" @rendere="rendereHandler" @error="errorHandler" />
</template>

excel

npm install @vue-office/excel vue-demi@0.14.6 指定版本

npm install @vue-office/excel vue-demi

html 复制代码

<template>
    <VueOfficeExcel :src="pdf" style="height: 100vh;" @rendere="rendereHandler" @error="errorHandler" />
</template>

vue版本小于2.6的需下载

npm install @vue/composition-api/
vue-office 适用于vue2/3
源码：源码git仓库

javascript 复制代码

// docx
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'

//  pdf
//import VueOfficePdf from '@vue-office/pdf'
//import '@vue-office/docx/lib/index.css'

//  excel
//import VueOfficeExcel from '@vue-office/excel'
//import '@vue-office/excel/lib/index.css'
export default {
    name: 'pdf在线浏览',
    components: {
        VueOfficeDocx
    },
    data () {
        return {
            pdf: 'http://static.shanhuxueyuan.com/test6.docx' 
//            pdf: 'http://static.shanhuxueyuan.com/test6.pdf' 
//            pdf: 'http://static.shanhuxueyuan.com/test6.excel' 
        }
    },
    methods: {
        rendereHandler() {
            console.log('渲染成功');
        },
        errorHandler() {
            console.log('渲染成功');
        },
    }
}
</script>

控制台报错：不影响使用

TypeError: ft.defineComponent is not a function

vue-office发现只适用docx格式，doc的不可以，xlx没找到资源待测

vue-office 文章特点：将docx、pdf、excel三个拆开详情的解说

vue-office 文章特点：将docx、pdf、excel三种格式文件同步讲解，并一起使用

两篇文章都附带案例