热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

xlsx插件,导入导出Excel(vue中导入导出表格

xlsx插件,导入导出Excel(vue中导入导出表格)工具包,插件12篇文章1订阅订阅专栏-##vue文件中直接写函数,完成的测试1).安装xlsx,yarnaddxlsx12)

xlsx插件,导入导出Excel (vue中导入导出表格)
工具包,插件
12 篇文章1 订阅
订阅专栏
- ## vue文件中直接写函数,完成的测试
1). 安装xlsx,
yarn add xlsx
1
2). importExcel.vue(实现了 导入表格 )

1
导入的表格如图(电脑上的excel文件):
导入后的效果如图:
3). exportExcel.vue (实现了导出表格);
可直接复制了测试,使用 的前提是安装了element.

1
页面效果如图:
打印结果如图:
导出的数据效果:
- ## 参考 网上的导入导出代码,示例如下:测试成功
1. 安装xlsx
yarn add xlsx
1
2. 封装并使用
dealwithExcelUtil.js 在 封装在
**src**下的utils文件夹下
dealwithExcelUtil.js
import XLSX
from 'xlsx';
/** 注意:导出的时候,headers中的key值 与data 中每一个item的属性名一一对应,最终表格显示的是data的每一个item的属性值。
* 导出Excel的处理函数--针对table
* @param {Array} headers: [{key: 'name', title: '姓名'}, {key: 'grad', title: '年级'},{key:'department',title:'部门'}]
* @param {Array} data : [{ name: '张三', grade: '2017级',department:'前端部门'},{ name: '李四', grade: '2017级',department:'java部门'}]
* @param {String} fileName: '导出结果.xlsx' // 默认的文件名
*
*/
import XLSX
from 'xlsx'
function importExcel (file) {
// 获取上传的文件对象
const { files } = file.target
// 通过FileReader对象读取文件
const fileReader = new FileReader()
fileReader.onload
= event => {
try {
const { result } = event.target
// 以二进制流方式读取得到整份excel表格对象
const workbook = XLSX.read(result, { type: 'binary' })
let data
= [] // 存储获取到的数据
// 遍历每张工作表进行读取(这里默认只读取第一张表)
for (const sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
// 利用 sheet_to_json 方法将 excel 转成 json 数据
data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]))
// break; // 如果只取第一张表,就取消注释这行
}
}
console.log(data)
// 这里拿到的是,导入的table里的数据,数组对象格式;[{姓名: "张三", 年级: "2017级", 部门: "前端部门", __rowNum__: 1},{姓名: "李四", 年级: "2017级", 部门: "程序部门", __rowNum__: 2}]
return data
}
catch (e) {
// 这里可以抛出文件类型错误不正确的相关提示
console.log('文件类型不正确')
}
}
// 以二进制方式打开文件
fileReader.readAsBinaryString(files[0])
}
function exportExcel (headers, data, fileName
= '导出结果.xlsx') {
const _headers = headers
.map((item, i)
=> Object.assign({}, { key: item.key, title: item.title, position: String.fromCharCode(65 + i) + 1 }))
.reduce((prev, next)
=> Object.assign({}, prev, { [next.position]: { key: next.key, v: next.title } }), {})
const _data = data
.map((item, i)
=> headers.map((key, j) => Object.assign({}, { content: item[key.key], position: String.fromCharCode(65 + j) + (i + 2) })))
// 对刚才的结果进行降维处理(二维数组变成一维数组)
.reduce((prev, next) => prev.concat(next))
// 转换成 worksheet 需要的结构
.reduce((prev, next) => Object.assign({}, prev, { [next.position]: { v: next.content } }), {})
// 合并 headers 和 data
const output = Object.assign({}, _headers, _data)
// 获取所有单元格的位置
const outputPos = Object.keys(output)
// 计算出范围 ,["A1",..., "H2"]
const ref = `${outputPos[0]}:${outputPos[outputPos.length - 1]}`
// 构建 workbook 对象
const wb = {
SheetNames: [
'mySheet'],
Sheets: {
mySheet: Object.assign(
{},
output,
{
'!ref': ref,
'!cols': [{ wpx: 45 }, { wpx: 100 }, { wpx: 200 }, { wpx: 80 }, { wpx: 150 }, { wpx: 100 }, { wpx: 300 }, { wpx: 300 }]
}
)
}
}
// 导出 Excel
XLSX.writeFile(wb, fileName)
}
export
default { importExcel, exportExcel }
1
testExcel.vue


页面效果如图:
导出的表格,效果、数据如图:
( 将导出的表格直接导入后 )导入的表格,打印如下:
参考了:https:
//www.cnblogs.com/MrZhujl/p/11720923.html 和 https://blog.csdn.net/qq_33603809/article/details/91880948
————————————————
版权声明:本文为CSDN博主「ddx2019」的原创文章,遵循CC
4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https:
//blog.csdn.net/ddx2019/article/details/104048180

 


原文链接:https://www.cnblogs.com/webSnow/p/15765468.html



推荐阅读
  • 原标题:vue+element_ui上传文件,并传递额外参数需求:文件大小验证文件类型验证额外参 ... [详细]
  • 基于Node.js、EJSExcel、Express与Vue.js构建Excel转JSON工具:首阶段——Vue.js项目初始化及开发环境配置
    在近期的一个H5游戏开发项目中,需要将Excel数据转换为JSON格式。经过调研,市面上缺乏合适的工具满足需求。因此,决定利用Node.js、EJSExcel、Express和Vue.js自行构建这一工具。本文主要介绍项目的第一阶段,即Vue.js项目的初始化及开发环境的配置过程,详细阐述了如何搭建高效的前端开发环境,确保后续功能开发的顺利进行。 ... [详细]
  • 5分钟搭建 vite + vue3 工程,简单,实用!
    大厂技术高级前端Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群介绍本文主要介绍vitevue3vue-router4vue ... [详细]
  • 本项目在Java Maven框架下,利用POI库实现了Excel数据的高效导入与导出功能。通过优化数据处理流程,提升了数据操作的性能和稳定性。项目已发布至GitHub,当前最新版本为0.0.5。该项目不仅适用于小型应用,也可扩展用于大型企业级系统,提供了灵活的数据管理解决方案。GitHub地址:https://github.com/83945105/holygrail,Maven坐标:`com.github.83945105:holygrail:0.0.5`。 ... [详细]
  • 智能制造数据综合分析与应用解决方案
    在智能制造领域,生产数据通过先进的采集设备收集,并利用时序数据库或关系型数据库进行高效存储。这些数据经过处理后,通过可视化数据大屏呈现,为生产车间、生产控制中心以及管理层提供实时、精准的信息支持,助力不同应用场景下的决策优化和效率提升。 ... [详细]
  • 掌握DSP必备的56个核心问题,我已经将其收藏以备不时之需! ... [详细]
  • Vue项目中文件更改后热更新功能失效的解决方法探讨 ... [详细]
  • 手机上编写和运行PHP代码的最佳软件推荐 ... [详细]
  • 本文详细介绍了在CentOS 7上构建DNS解析服务器的步骤与配置方法。DNS系统不仅负责将主机名(域名)转换为相应的IP地址(正向解析),还能够根据IP地址反查主机名(反向解析)。此外,文章还探讨了不同类型的DNS服务器,如缓存域名服务器的作用和配置要点。通过本指南,读者可以全面了解并成功搭建一个高效稳定的DNS解析环境。 ... [详细]
  • IT企业通常配置多少Java开发者及Java岗位的发展前景分析
    在IT企业中,Java开发者的配置数量通常较多,反映了该语言在后端开发中的重要地位。与前端开发相比,Java的学习曲线可能更为平缓,但深度掌握仍需大量实践。Web前端开发则侧重于用户体验和浏览器兼容性,要求开发者具备扎实的技术基础和良好的审美观。从北上广深等一线城市的薪资水平来看,Java开发者普遍享有较高的薪酬待遇,且随着经验的积累,职业发展空间广阔。 ... [详细]
  • 在Vite项目优化过程中,通过使用rollup-plugin-visualizer插件,可以有效地对Rollup打包结果进行可视化分析,帮助开发者清晰地了解各个模块的占用情况,从而进行更有针对性的优化。此外,结合其他常用插件,如vite-plugin-compression和vite-plugin-inspect,可以进一步提升项目的性能和可维护性。 ... [详细]
  • 为了帮助 Vue.js 开发者提高开发效率,本文介绍了几种高效的安装与调试工具。首先,需要下载相关工具的压缩包,然后在谷歌浏览器中访问 `chrome://extensions` 页面,启用开发者模式,点击“加载已解压的扩展程序”按钮,并选择之前解压的文件夹。此外,我们还推荐使用一些流行的 Vue.js 调试插件,如 Vue Devtools,以进一步提升开发体验。 ... [详细]
  • 1、概述hdfs文件系统主要设计为了存储大文件的文件系统;如果有个TB级别的文件,我们该怎么存储呢?分布式文件系统未出现的时候࿰ ... [详细]
  • HDFS是什么?HDFS全称HadoopDistributedFileSystem,简称HDFS,是一个分布式文件系统。它是谷歌的GFS提出之后出现的另外一种文件系统。它有一定高 ... [详细]
  • 背景使用yarncreateumi创建了一个干净的基于umidva的react项目。在遇到组件之间的通讯时,需要使用到dva。如何使用dva实现组件之间的通讯呢&# ... [详细]
author-avatar
起五贪黑_719
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有