vue3实现excel文件预览和打印功能

于 2024-10-04 13:18:14 发布
阅读量49 收藏
点赞数 2
分类专栏： Vue知识学习及项目开发实践 文章标签： Vue3 excel
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bjzhang75/article/details/142702134
版权

文章目录

在前端开发中，有时候一些业务场景中，我们有需求要去实现excel的预览和打印功能，本文将介绍在vue3中如何实现Excel文件的预览和打印。

一、预览excel

关于实现excel文档在线预览的做法，一种方式是通过将文档里的数据处理成html，一种是将文档处理成图片进行预览。

首先我们先讲一下实现html这种方式预览的。Excel预览用的是xlsx这个库。

xlsx

xlsx是一个优秀的表格处理库，是一款适用于浏览器和nodejs的开源电子表格解析库

1、安装

这里值得注意的是，vue2和vue3的引用写法不一样

// vue2 引用 xlsx
import xlsx from
了解本专栏 订阅专栏 解锁全文 超级会员免费看
bjzhang75
关注
专栏目录
订阅专栏
vue3实现excel文件预览和打印
bjzhang75的博客
08-28 1018
excel文件预览」，借用了xlsx库来读取excel文件流，通过XLSX.utils.sheet_to_html来实现在线文件的预览。「eccel文件打印」，借用了vue3-print-nb库来进行用户点击打印按钮时，打印某个区域范围的内容，通过XLSX.utils.sheet_to_json解析文件流转化成JSON数据，再通过v-print指令进行绑定区域打印。
记录--vue3实现excel文件预览和打印
林恒的博客
10-24 1940
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 前言 在前端开发中，有时候一些业务场景中，我们有需求要去实现excel的预览和打印功能，本文在vue3中如何实现Excel文件的预览和打印。 预览excel 关于实现excel文档在线预览的做法，一种方式是通过讲文档里的数据处理成html，一种是将文档处理成图片进行预览。 首先我们先讲一下实现html这种方式预览的。Exce...
Vue前端实现excel的导入、导出、打印功能
热门推荐
Litt_White的博客
12-03 1万+
Vue前端实现excel的导入、导出、打印功能 一、相关依赖 二、excel导入功能 三、table导出excel表格 1.导出行数据 2.导出table数据(也会导出合并单元格） 3.导出二维数据的table数据 4.导出合并单元格table数据 四、table导出excel表格（带样式） 1.导出带样式的excel 五、打印功能 1.直接使用window自带的打印功能： window.print() 2.使用打印插件：vue-print-nb
vue3上传excel并在线预览
z001126的博客
08-22 662
关于实现excel文档在线预览的做法，一种方式是通过讲文档里的数据处理成html，一种是将文档处理成图片进行预览，这里使用的是第一种。
vue3+ts 实现文件在线预览
LuoYi_ly_的博客
12-07 3967
采用vue3+typescript（ts）实现文件在线预览，通过封装第三方实现
vue 实现excel本地预览
m0_55969466的博客
04-20 6631
安装npm依赖 npm i xlsx -S 1、点击button 打开上传文件页面 2、解析数据 3、完整代码 <template> <div class="excel-wrapper"> <!-- 上传按钮 --> <input class="input-file" type="file" @change="exportData" sty...
vue3+ts预览和下载word,pdf,excel
感谢您阅读我的博客，如果您有任何问题或建议，请随时联系我。
06-09 6062
vue3+ts预览和导出文件
SpringBoot+Vue实现各种文件预览（附源码）
无所谓^_^博客
02-02 2323
在做项目时，文件的上传和预览必不可少。继上篇介绍了minio的文件上传，本文将介绍如何实现文件预览功能。大家如果没看过上篇文章建议大家先看下。SpringBoot整合minio实现断点续传、分片上传（附源码）项目下载kkFileView 为文件文档在线预览解决方案，该项目使用流行的spring boot搭建，易上手和部署，基本支持主流办公文档的在线预览，如doc,docx,xls,xlsx,ppt,pptx,pdf,txt,zip,rar,图片,视频,音频等等。
vue 实现在线预览Excel-LuckyExcel/LuckySheet实现方案
jmszl1991的博客
11-06 2871
由于后台给到的数据，就是二进制数据。因为他们导出和预览实际上用的是同一个接口。那么，我们需要将二进制数据解析为文件对象，通过luckyexcel的方法转变为json对象，然后通过luckysheet显示出来。：引入luckysheet，只能通过CDN或者直接引入静态资源的形式，不能npm install。个人建议直接下载资源引入。如上两步，就可以显示项目预览excel的需求了。：自行整理下路径，不要错了。
vue前端解析word,pdf,exl,图片，视频等文件预览，支持base64格式文件 预览
04-06
vue前端解析word,pdf,exl,图片，视频等文件预览，支持base64格式文件转Blob流 预览。实现前端选择文件 直接在页面展示，或者请求后端获取base64 string 字符串 转码 在前端页面展示
vue2/3 - 超详细读取本地excel文件，本地上传 .xlsx / .xls 文件后解析并显示预览功能（附超级详细的示例源码+注释，新手小白直接开箱即用）
高级前端工程师
04-14 3195
vue如何预览excel文件详细教程，vue 实现excel本地预览详细教程，vue读取本地xls文件，vue nuxt 怎么读取本地excel文件，vue nuxt前端使用xlsx插件读取excel文件数据，vue读取excel并显示。vue中使用xlsx读取excel文件，vue导入导出excel文件，vue读取本地xlsx文件，Vue 读取excel文件的两种方式，Vue读取本地excel转换为json，vue读取本机的excel文件，vue中使用xlsx读取excel文件，vue读写excel详细示
Vue - 本地上传 Excel 文件页面表格预览，使用 ant design vue 表格 table 组件配合预览 xls 电子表格读取与显示功能（配合 Ant Design Vue / 带分页）
王佳斌
01-25 3203
效果图 如果您需要急用，请 点击此处 克隆 Gitee 仓库直接运行，这和文章最终配置的效果一样。 前言 如果您需要 Vue + Element 实现，请访问 这篇文章。 当前端通过接口成功上传一个 Excel 表格文件后，页面表格需要显示并预览内容，以便用户查看。 在开始之前，您需要提前准备好 Vue + Ant Design Vue 环境。 一、安装插件 首先在项目根目录打开终端，执行如下安装命令： # 无需顶部 import 引入 npm install xlsx 二、完整代码 如果您有
Python 在Excel中创建、更新和删除数据透视表
nuclear2011的博客
09-27 1370
本文介绍了如何使用Python在Excel中添加、更新和删除数据透视表。包含详细的介绍和代码示例。
【Linux】Linux环境基础开发工具使用
Lumos_yyyx的博客
09-28 1052
vim的三种模式，分别是命令模式（command mode）、插入模式（Insert mode）和底行模式（last line mode）。正常/普通/命令模式：插入模式：末行模式：在命令模式下，即可进入该模式。
防止错误输入！Excel单元格限制输入内容的三种有效方式
Chinland'Blog
09-30 1062
如果限制Excel输入内容？试试这3种方法！
EXCEL图片链接快速批量转成图片
DefineJ的博客
09-30 254
【代码】EXCEL图片链接快速批量转成图片。
Excel中查找某个值的位置，用位置取值
smilejingwei的博客
09-29 340
有 2022 年 1 月的日销售额统计表如下所示：找出销售额最大的是哪一天，在 C2 单元格里输入：=spl("=E(?返回结果 12接着找出销售额最大的那天的前 5 天和后 5 天的销售额：=spl("=E(?1).to(?2-5,?
【EXCEL数据处理】000009 案列 EXCEL单元格数字格式。文本型数字格式和常规型数字格式的区别
最新发布
宝码香车的博客
09-30 1076
哈喽，大家好，今天给大家分享一篇文章！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎。
帮我用vue2.0实现excel文件预览的功能
04-26
好的，我可以为您提供一些参考。您可以使用第三方库“SheetJS”来处理Excel文件，并使用Vue组件来实现预览功能。以下是一个简单的示例代码： 1. 首先安装SheetJS： ``` npm install --save xlsx ``` 2. 创建一个Vue组件： ``` <template> <div> <input type="file" @change="onFileChange"/> <table v-if="showTable"> <tr v-for="(row, index) in rows" :key="index"> <td v-for="(cell, indexCell) in row" :key="indexCell">{{cell}}</td> </tr> </table> </div> </template> <script> import XLSX from 'xlsx' export default { data() { return { showTable: false, rows: [] } }, methods: { onFileChange(event) { let file = event.target.files[0] let reader = new FileReader() reader.onload = (event) => { let binaryData = event.target.result let workbook = XLSX.read(binaryData, { type: 'binary' }) let worksheet = workbook.Sheets[workbook.SheetNames[0]] let rows = XLSX.utils.sheet_to_json(worksheet, { header: 1 }) this.showTable = true this.rows = rows } reader.readAsBinaryString(file) } } } </script> ``` 3. 在需要显示预览的地方使用该组件即可。 需要注意的是，此示例只是一个简单的演示，您可能需要根据实际情况进行修改和完善。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

bjzhang75

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值