vue使用vue-office实现docx、excel、pdf在线预览

安装vue-office

docx文档预览组件

npm install @vue-office/docx vue-demi复制

excel文档预览组件

npm install @vue-office/excel vue-demi复制

pdf文档预览组件

npm install @vue-office/pdf vue-demi复制

如果是vue2.6版本或以下还需要额外安装 @vue/composition-api

npm install @vue/composition-api复制

<template>
    <div v-if="previewType">
        <vue-office-docx :src="previewUrl" style="height: 100vh;" v-if="previewType== '.docx'" />
        <vue-office-excel :src="previewUrl" style="height: 100vh;" v-else-if="previewType== '.xlsx'" />
        <vue-office-pdf :src="previewUrl" v-else />
    </div>
</template>
 
<script>
//引入VueOfficeDocx,VueOfficeExcel,VueOfficePdf组件
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'
import VueOfficePdf from '@vue-office/pdf'
//引入相关样式
import '@vue-office/docx/lib/index.css'
import '@vue-office/excel/lib/index.css'
export default {
    components: {
        VueOfficeDocx,
        VueOfficeExcel,
        VueOfficePdf
    },
    props: {
        previewUrl: {
            type: String,
            default: ''
        },
        previewType: {
            type: String,
            default: ''
        }
    },
}
</script>复制

如安装依赖运行后，出现**.defineComponent is not a function

一般是通过CDN的方式加载了vue.js文件，且CDN中的vue版本和开发环境安装的vue版本不一致。

package.json中vue版本不是指定的固定版本，而是在版本前面带"^"或"~"符号，这里的含义是使用符合条件的新版本，而不是看到的这个版本。

{
  "vue": "^2.6.10"
}复制

修改package.json中 vue 和 vue-template-compiler的版本，将版本前面的"^"或"~"符号去掉，具体版本号和CDN中的vue版本保持一致。

{
  "vue": "2.6.10",
  "vue-template-compiler": "2.6.10"
}复制

删除 package-lock.json 文件 和 node_modules中的全部包。

重新安装所有依赖，然后运行查看效果。