Vue2.js：xlsx实现Excel文件的导入导出

需求：

Vue2.js + ElementUI 项目，通过xlsx实现一个前端的 Excel 导入和导出功能

文档

https://www.npmjs.com/package/xlsx
https://sheetjs.com/
https://github.com/SheetJS/sheetjs

兼容性

依赖

$ node -v
v16.14.0npm i file-saver xlsx -S

示例

依赖 package.json

{"name": "vue-excel","version": "0.1.0","private": true,"scripts": {"dev": "vue-cli-service serve","build": "vue-cli-service build"},"dependencies": {"dayjs": "^1.11.5","element-ui": "^2.15.10","file-saver": "^2.0.5","vue": "^2.6.14","xlsx": "^0.18.5"},"devDependencies": {"@vue/cli-service": "~5.0.0","less": "^4.0.0","less-loader": "^8.0.0","vue-template-compiler": "^2.6.14"}
}

引入element-ui

// main.js
import Vue from 'vue'
import App from './App.vue'import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)Vue.config.productionTip = falsenew Vue({render: function (h) {return h(App)},
}).$mount('#app')

data.js

// data.js
export const tableData = [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",},
];

App.vue

<template><div class="container"><div style="display: flex"><el-uploadref="upload"action="action"accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":show-file-list="false":http-request="handlehttpRequest":on-change="onUploadChange"><el-buttonsize="small"type="primary"icon="el-icon-upload">导入Excel</el-button></el-upload><el-buttonstyle="margin-left: 20px"size="small"icon="el-icon-download"@click="handleDownload">导出Excel</el-button><el-buttonstyle="margin-left: 20px"size="small"icon="el-icon-delete"@click="handleClear">清空数据</el-button></div><el-table:data="list"borderstyle="width: 100%; margin-top: 20px"><template v-if="list && list.length > 0"><el-table-columnv-for="key in Object.keys(list[0] || {})":prop="key":label="key"></el-table-column></template></el-table></div>
</template><script>
import { readExcelToJson, saveJsonToExcel } from './utils.js'
import { tableData } from './data.js'export default {data() {return {file: null,list: [],}},methods: {handlehttpRequest() {},// 读取文件为json数据onUploadChange(file) {console.log(file)this.file = filereadExcelToJson(file).then((res) => {this.list = res})},handleDownload() {saveJsonToExcel(this.list, 'data.xlsx')},handleClear() {this.list = null},},created() {this.list = tableData},
}
</script><style lang="less">
body {background: #f4f4f4;padding: 0;margin: 0;
}.container {width: 1024px;// min-height: 100vh;margin: 0 auto;padding: 20px;background: #fff;
}
</style>

工具类文件 utils.js

// import XLSX from "xlsx";
import * as XLSX from 'xlsx'
import FileSaver from 'file-saver';/*** 异步读取Excel文件的sheet表为json数据* 不支持合并单元格* @param {File对象} file*/
export function readExcelToJson(file) {return new Promise((resolve, reject) => {const reader = new FileReader();reader.onload = (e) => {let data = new Uint8Array(e.target.result);let workbook = XLSX.read(data, { type: "array" });//  console.log("workbook: ", workbook);//将Excel 第一个sheet内容转为json格式let worksheet = workbook.Sheets[workbook.SheetNames[0]];let json = XLSX.utils.sheet_to_json(worksheet);//   console.log("jsonExcel:", jsonExcel);resolve(json);};reader.readAsArrayBuffer(file.raw);});
}/*** 保存json为Excel文件* @param {*} data * @param {*} filename  文件名后缀为.xlsx*/
export function saveJsonToExcel(data, filename) {let sheet = XLSX.utils.json_to_sheet(data);let workbook = {SheetNames: ["sheet1"],Sheets: {sheet1: sheet,},};let wbout = XLSX.write(workbook, {bookType: "xlsx",bookSST: true,type: "array",});FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }),filename);
}

导出截图

完整代码：https://github.com/mouday/vue-excel
在线演示：https://mouday.github.io/vue-excel/

参考文章

如何使用JavaScript实现纯前端读取和导出excel文件

前端导出Excel和下载后端Excel以及前端处理Excel

给我实现一个前端的 Excel 导入和导出功能

Vue2.js：xlsx实现Excel文件的导入导出相关推荐

前端实现excel文件的导入导出
前端实现excel文件的导入导出导入文件导出文件导入文件 html: <el-dropdown v-waves @command="handleBatchCommand" ...
easyexcel导入时读不到数据_SpringBoot中EasyExcel实现Excel文件的导入导出
前言在我们日常的开发过程中经常会使用Excel文件的形式来批量地上传下载系统数据,我们最常用的工具是Apache poi,但是如果数据到底上百万时,将会造成内存溢出的问题,那么我们怎么去实现百万数据 ...
ABAP 程序完成EXCEL文件的导入导出,OLE技术的应用
今天主要学习了使用微软的OLE技术,用ABAP程序完成excel文件的导入导出处理. (一)常用的OLE函数: CALL METHOD , CALL OBJECT , FREE OBJECT ...
java做 excel文件的导入导出（SSM+layer）
做的项目使用时 Java ssm + 前端layer+ freemark. 因为是从项目中扣的代码.整理了下逻辑. 有问题的下方留言哈导入的依赖 poi <!-- https://mvnrep ...
JAVA实现Excel文件的导入导出
版权声明:请勿用于任何商业用途的文章转载,转载请说明出处! 1.导入POI的JAR包 <dependency><groupId> ...
SpringBoot+Hutool工具类Excel工具-ExcelUtil实现excel文件的导入导出
Hutool会用的话极大了简化了操作Excel的过程,提高开发效率,废话少说上代码. excel文件导出: public void downLoadFile(UserDto dto,HttpServl ...
把服务器sql数据库导出excel文件,将mysql数据库数据以Excel文件的形式导出
最近在工作中,领导让从数据库中导出一些数据并存放到Excel表格中,网上有许多教程,下面是我总结的其中俩种方法. 从数据库管理工具中导出(navicat) 在navicat导出数据导Excel中还是比 ...
微信小程序 -- 数据库数据excel文件批量导入
一.excel文件批量导入数据到数据库 1.创建node.js函数upload,点击upload右键外部终端中安装类库 npm install node-xlsx 2.云函数代码 const clou ...
Java：实现文件批量导入导出实践（兼容xls,xlsx）
点击上方"Java知音",选择"置顶公众号" 技术文章第一时间送达! 作者:小卖铺的老爷爷 cnblogs.com/laoyeye/p/6938889.html ...

Vue2.js：xlsx实现Excel文件的导入导出

Vue2.js：xlsx实现Excel文件的导入导出相关推荐

最新文章

热门文章