首页 前端知识 vue使用vue-office实现docx、excel、pdf在线预览

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

2024-05-22 09:05:03 前端知识 前端哥 957 129 我要收藏

安装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中的全部包。

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9094.html
标签
excel
评论
发布的文章

jQuery初学

2024-05-29 10:05:14

Jquery中$,web开发语言

2024-05-29 10:05:25

jQuery 实现小球撞击动画

2024-05-29 10:05:04

echarts 横向柱状图

2024-05-29 10:05:01

Echarts:读取动态数据

2024-05-29 10:05:53

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!