前端开发之通过vue-office组件实现文件预览

前端开发之通过vue-office组件实现文件预览

  • 前言
  • 效果图
    • docx文件
    • xlsx文件
    • pdf文件
  • vue中简单案例
  • 1、安装组件
  • 2、vue中代码

前言

在实现文件预览的时候我们可以通过vue-office组件来实现文件的预览效果

效果图

docx文件

在这里插入图片描述

xlsx文件

在这里插入图片描述

pdf文件

在这里插入图片描述

vue中简单案例

1、安装组件

整体安装和分开安装:vue-demi可同时兼容vue3和vue2的组件库
npm install --save @vue-office/docx @vue-office/excel @vue-office/pdf vue-demi//docx文档预览组件
npm install @vue-office/docx vue-demi//excel文档预览组件
npm install @vue-office/excel vue-demi//pdf文档预览组件
npm install @vue-office/pdf vue-demi

vue的版本是2.6的 还需要安装
@vue/composition-api

2、vue中代码

<template><div class="vueOffice-container"><el-upload class="upload-demo" action="" :on-change="handleChange" :file-list="fileList" :limit="1" multiple><el-button size="small" type="primary">点击上传</el-button><div class="el-upload__tip"><slot name='tip'>请上传文件</slot></div></el-upload><div style="width: 40%; height: 840px"><vue-office-docx v-if="isdocx" :src="url" @rendered="rendered" style="width: 100%; height: 100%" /><vue-office-excel v-if="isexcel" :src="url" @rendered="rendered" style="width: 100%; height: 100%" /><vue-office-pdf v-if="ispdf" :src="url" @rendered="rendered" style="width: 100%; height: 100%" /></div></div>
</template><script>
// 引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
// 引入相关样式
import '@vue-office/docx/lib/index.css'
// 引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
// 引入相关样式
import '@vue-office/excel/lib/index.css'
// 引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'export default {name: 'vueOffice',components: { VueOfficeDocx, VueOfficeExcel, VueOfficePdf },data () {return {url: '',isdocx: false,isexcel: false,ispdf: false,fileList: []}},created () { },mounted () {methods: {rendered () {console.log('渲染完成')},previewFile (url) {// 根据文件格式显示预览内容const fileExtension = url.split('.').pop().toLowerCase()if (fileExtension === 'xlsx') {this.isexcel = truethis.isdocx = falsethis.ispdf = false}if (fileExtension === 'docx') {this.isdocx = truethis.isexcel = falsethis.ispdf = false}if (fileExtension === ('pdf' || 'PDF')) {this.isdocx = falsethis.isexcel = falsethis.ispdf = true}},handleChange (file, fileLists) {this.url = URL.createObjectURL(file.raw)this.previewFile(file.name)}}
}
</script><style lang="less" scoped>
.vueOffice-container {
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/580007.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

进行菜单程序分支,判断奇偶数,闰年,质数,完全平方数,回文数,素数,大小写字母等等

一、主要目的 通过编写一个简单的Java程序&#xff0c;加深对于条件语句和循环语句的理解&#xff0c;并练习使用Scanner类获取用户输入 二、主要内容 编写一个程序&#xff0c;根据用户输入的选项&#xff0c;执行相应的操作。用户可以选择判断一个整数是否为奇数、判断一个…

RabbitMQ入门指南(九):消费者可靠性

专栏导航 RabbitMQ入门指南 从零开始了解大数据 目录 专栏导航 前言 一、消费者确认机制 二、失败重试机制 三、失败处理策略 四、业务幂等性 1.通过唯一标识符保证操作的幂等性 2.通过业务判断保证操作的幂等性 总结 前言 RabbitMQ是一个高效、可靠的开源消息队列系…

词表示:语言与计算的桥梁

目录 前言1 什么是词表示2 独热表示3 上下文表示4 分布式表示结语 前言 在自然语言处理领域&#xff0c;词语的表示是一个基本挑战。将词语转换为计算机可以理解的符号&#xff0c;衡量词语之间的相似度&#xff0c;捕捉它们之间复杂的关系&#xff0c;是使机器能够理解和处理…

Bluetooth Mesh 入门学习干货,参考Nordic资料(更新中)

蓝牙网状网络&#xff08;Bluetooth mesh&#xff09;概念 概述 蓝牙Mesh Profile | Bluetooth Technology Website规范&#xff08;Mesh v1.1 后改名Mesh ProtocolMesh Protocol | Bluetooth Technology WebsiteMesh Protocol&#xff09;是由蓝牙技术联盟(Bluetooth SIG)开…

mysql的统计数据count

1、count原理 count()方法的目的是计算当前sql语句查询得到的非NULL的行数。 count方法的大原则是server层会从innodb存储引擎里读来一行行数据&#xff0c;并且只累计非null的值。但这个过程&#xff0c;根据count()方法括号内的传参&#xff0c;有略有不同。 2、count使用…

EasyExcel实现动态表头(注解实现)

要实现上述动态头&#xff0c;按每日统计&#xff0c;每月统计&#xff0c;每年统计。而时间是一直变化&#xff0c;所以我们需要表头也一直动态生成。 首先&#xff0c;我们需要定义所需要实体类 public class CountDayData {ExcelProperty(value "业务员姓名")p…

css 设置字体渐变色和阴影

一、需求 我们平时写样式的时候可能遇到需要将字体设置成渐变色&#xff0c;这样能使界面整体美化提升&#xff0c;那么css怎么去实现这个功能呢&#xff1f;下面我介绍一种常用的方法&#xff0c;欢迎大家补充 二、渐变实现 先看效果图&#xff1a; 直接上代码&#xff1a; /…

Seem环境安装

创建虚拟环境 conda create -n seem python3.8 conda activate seem 安装相关依赖&#xff1a;&#xff08;不按照的话会报错&#xff09; sudo apt-get install openmpi-bin libopenmpi-devconda install gcc_linux-64pip install mpi4py 导入环境 export PYTHONPATH$(pwd…

开发效率之把握需求、减少返工

前言 当年初入软件开发行业的我&#xff0c;拿到需求就莽&#xff0c;要设计没设计&#xff0c;要分析没分析&#xff0c;结果就是没理清楚需求&#xff0c;致使频频返工。 需求没理解对&#xff0c;做得再多再好也白搭。 估算需求把握程度 假如每个IF分支的“是”加一分&…

【VS】如何把wpf项目打包成exe文件

要将WPF项目打包为.exe文件&#xff0c;您可以使用Visual Studio的发布功能。以下是一些简单的步骤&#xff1a; 打开您的WPF项目。在Visual Studio的顶部菜单栏中&#xff0c;选择“生成”&#xff08;Build&#xff09;选项&#xff0c;然后选择“发布”&#xff08;Publish…

2024 年全球顶级的 3 款 桌面 PDF 转换工具

桌面 PDF 转换器工具是一种软件应用程序&#xff0c;使用户能够将 PDF 文件与不同的文件格式相互转换。奇客PDF转换、Nitro Pro 和 Foxit PhantomPDF 是市场上最好的桌面 PDF 转换工具。 在选择最好的 PDF 转换器软件时&#xff0c;需要考虑的一个重要因素是它与其他软件的集成…

使用栈求表达式的值【数据结构】

中缀表达式转后缀表达式 转换流程&#xff1a; 初始化一个运算符栈。自左向右扫描中缀表达式&#xff0c;当扫描到操作数时直接连接到后缀表达式上。当扫描到操作符时&#xff0c;和运算符栈栈顶的操作符进行比较。如果比栈顶运算符高&#xff0c;则入栈。如果比栈顶运算符低…

nvm 的安装及使用 (Node版本管理器)

目录 1、nvm 介绍 2、nvm安装 3、nvm 使用 4、node官网可以查看node和npm对应版本 5、nvm安装指定版本node 6、安装cli脚手架 1、nvm 介绍 NVM 全称 node.js version management &#xff0c;专门针对 node 版本进行管理的工具&#xff0c;通过它可以安装和切换不同版本的…

React使用 useImperativeHandle 自定义暴露给父组件的实例方法(包括依赖)

关键词 React useImperativeHandle 摘要 useImperativeHandle 是 React 提供的一个自定义 Hook&#xff0c;用于在函数组件中显式地暴露给父组件特定实例的方法。本文将介绍 useImperativeHandle 的基本用法、常见应用场景&#xff0c;以及如何处理其依赖项&#xff0c;以帮…

JavaScript函数表达式

JavaScript函数表达式是一种将函数赋值给变量的方式。函数表达式可以以匿名形式或具名形式存在。 匿名函数表达式&#xff1a; var func function() {// 函数的逻辑 }在上面的例子中&#xff0c;将一个匿名函数赋值给变量func。 具名函数表达式&#xff1a; var func fun…

数据链路层解读

基本介绍 概述 数据链路层使用的信道主要有两种类型 点对点信道。使用一对一的点对点通信方式的信道。广播信道。使用一对多的广播通信方式的信道。由于广播信道上连接的主机很多&#xff0c;必须使用专用的共享信道协议来协调这些主机的数据发送&#xff0c;因此通信过程比较…

【Windows】共享文件夹拍照还原防火墙设置(入站,出站设置)---图文并茂详细讲解

目录 一 共享文件夹(两种形式) 1.1 普通共享与高级共享区别 1.2 使用 二 拍照还原 2.1 是什么 2.2 使用 三 防火墙设置&#xff08;入栈&#xff0c;出站设置&#xff09; 3.1 引入 3.2 入站出站设置 3.2.1入站出站含义 3.3入站设置 3.4安装jdk 3.5使用tomcat进行访…

sql_lab之sqli中的堆叠型注入(less-38)

堆叠注入&#xff08;less-38&#xff09; 1.判断注入类型 http://127.0.0.3/less-38/?id1 and 12 -- s 没有回显 http://127.0.0.3/less-38/?id1 and 11 -- s 有回显 则说明是单字节’注入 2.查询字段数 http://127.0.0.3/less-38/?id1 order by 4 -- s 报错 http:/…

python统计一段话中出现每个字的次数

要统计文本中每个字的出现的次数,可以使用Python中的字典来存储每个字及其出现的次数。以下是一个简单的示例代码: text = "这是一个示例文本,用于统计每个字的个数。"# 统计每个字的个数 word_count = {} for word in text:if word in word_count:word_count[wo…

智能优化算法应用:基于人工兔算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于人工兔算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于人工兔算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.人工兔算法4.实验参数设定5.算法结果6.参考文…