首页 > 其他分享 >Vue 展示word\excel\pdf 内容

Vue 展示word\excel\pdf 内容

时间:2024-10-31 16:47:38浏览次数:6  
标签:Vue word office excel vue 报错 组件 pdf

Vue 展示word\excel\pdf 内容

1、前言

  • 项目使用的是若依框架,有一个审核的功能,审核弹窗中需要显示出上传的文件内容,而没有原生的组件可以实现该功能。

2、遇到的问题

  1. 使用 iframe 组件、不报错,但最后实现的效果是下载而不是展示出来

  2. 项目是vue2的版本使用@vue-office,直接报错,解决办法放后面

3、解决方法

  • 最终还是使用的@vue-office,解决办法是vue2需要再引入一个依赖"@vue/composition-api"

4、完整代码

1、 在package.json中添加依赖

"@vue-office/docx": "^1.6.2",
"@vue-office/excel": "^1.7.11",
"@vue-office/pdf": "^2.0.7",
"@vue/composition-api": "^1.7.2",

2、 在main.js中定义组件

//引入相关模块
import VueOfficeDocx from '@vue-office/docx/lib'
import VueOfficeExcel from 

标签:Vue,word,office,excel,vue,报错,组件,pdf
From: https://blog.csdn.net/WaXiaoHui/article/details/143395752

相关文章

  • vue3 类组件装饰器模式配置
    2024年10月31日vue3支持装饰器模式插件借助插件vue-facing-decorator实现类组件装饰器转换npminstall--save-devvue-facing-decorator@rollup/plugin-babel@babel/plugin-proposal-decorators@babel/plugin-proposal-class-propertiesvite.config.ts配置//第一种支......
  • vue2之页面生成PDF导出并适应A4页面
    一、技术vue2 、 elementUI、html2canvas  、jsPDF二、技术官网vue2:https://cn.vuejs.org/elementUi:https://element.eleme.cn/#/zh-CNhtml2canvas:https://html2canvas.hertzen.com/jsPDF:https://www.npmjs.com/package/jspdf三、优缺点优......
  • java+vue计算机毕设冬季供热有限公司网站建设【开题+程序+论文+源码】
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着冬季气温的逐渐降低,供热服务成为了城市居民生活中不可或缺的一部分。冬季供热有限公司作为城市供热的主要提供者,承担着保障居民温暖过冬的重要职......
  • java+vue计算机毕设第二课堂学分认定系统【开题+程序+论文+源码】
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景在高等教育日益重视综合素质培养的今天,第二课堂作为第一课堂的有效补充,其在拓宽学生知识面、提升实践能力、增强综合素质等方面发挥着不可替代的作用......
  • vue3知识点:reactive对比ref
    @目录二、常用CompositionAPI5.reactive对比ref本人其他相关文章链接二、常用CompositionAPI问题:啥叫“组合式API”?答案:请看官方文档:https://v3.cn.vuejs.org/guide/composition-api-introduction.html5.reactive对比ref从定义数据角度对比:ref用来定义:基本类型......
  • vue3第一章基础:创建Vue3.0工程,包括使用vue-cli 创建、使用 vite 创建
    @目录一、vue2、vue3、vue-cli版本、vue-router版本的关联关系1.说明2.不同版本的vue对应的vue-router版本和vuex版本二、创建Vue3.0工程1.使用vue-cli创建2.使用vite创建一、vue2、vue3、vue-cli版本、vue-router版本的关联关系1.说明1.VueCLI4.5以下,对应的是Vue2;Vue......
  • Ant Design Vue 的 a-table 行选择分页时bug处理
    有bug的伪代码如下(示例以id来作为rowKey):<a-table:row-selection="{selectedRowKeys:selectedRowKeys,onChange:onSelectChange}":columns="columns"rowKey="id":pagination="pagination":data-source=&q......
  • Vue组件化-插槽Slot
    认识插槽Slot如何使用插槽slot?插槽的默认内容多个插槽的效果具名插槽的使用◼事实上,我们希望达到的效果是插槽对应的显示,这个时候我们就可以使用具名插槽:具名插槽顾名思义就是给插槽起一个名字,<slot>元素有一个特殊的attribute:name;一个不带name的slot,会带有隐......
  • Vue3+Elementplus+Univer-Sheet实现在线excel及其需要注意的点
    1、准备项目环境Vue3自行准备node.js环境2、ElementPlus官网官网安装教程自行参照官网3、Univer插件官网1)官网网址2)开始直接点击GetStarted侧边栏点击  后面直接按照教程走即可 4、配置插件需要注意如果上述插件包已经下载并成功引入vue......
  • 基于SpringBoot+MySQL+SSM+Vue.js的交友系统(附论文)
    获取见最下方名片信息获取见最下方名片信息获取见最下方名片信息演示视频基于SpringBoot+MySQL+SSM+Vue.js的交友系统(附论文)技术描述开发工具:Idea/Eclipse数据库:MySQLJar包仓库:Maven前端框架:Vue/ElementUI后端框架:Spring+SpringMVC+Mybatis+SpringBoo......