引言

后台管理系统中有时会出现需要导入表格的情况，因此查阅资料封装此功能

下载插件

npm i xlsx

封装组件

第一种

<!-- uploadExcel.vue -->
<template><div><el-uploadref="upload"action="/":on-change="onChange":auto-upload="false":show-file-list="false"accept=".xls, .xlsx"><el-button type="warning" icon="el-icon-folder-add">导入表格</el-button></el-upload></div>
</template><script>
import XLSX from 'xlsx';
export default {data () {return {// 上传的文件fileData: ''};},methods: {// 文件改变事件onChange (file) {// 保存当前选择文件this.fileData = file;// 调用读取数据的方法this.readExcel();},// 读取数据readExcel () {const files = this.fileData;if (!files) {// 没有文件return false;} else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {this.$message.error('请上传xls或者xlsx文件');return false;}const fileReader = new FileReader();fileReader.onload = (e) => {try {const data = e.target.result;const workbook = XLSX.read(data, {type: 'binary'});if (workbook.SheetNames.length >= 1) {this.$message.success('导入成功');}// 取第一张表const wsname = workbook.SheetNames[0];// 生成json表格内容const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);this.$emit('getUploadData', ws);// 清空value值，不然页面为刷新时无法重复使用this.$refs.upload.value = '';} catch (e) {return false;}};fileReader.readAsBinaryString(files.raw);}}
};
</script><style lang="less" scoped>
</style>

页面中使用

<template><div><upload-excel @getUploadData="getExcelData"></upload-excel></div>
</template><script>
import UploadExcel from '@/components/table/uploadExcel.vue';
export default {data () {return {// 上传表格处理完成的数据uploadData: []};},methods: {getExcelData (data) {let obj = {};const list = [];data.forEach((item) => {obj = {};for (const key in item) {if (key === '日期') {obj.date = item[key];} else if (key === '姓名') {obj.name = item[key];} else if (key === '地址') {obj.address = item[key];} else {obj.ceshi = item[key];}}list.push(obj);});this.uploadData = list;}},components: {UploadExcel}
};
</script>

第二种

<!-- index.vue-->
<template><div><inputclass="input-file"type="file"accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"@change="exportData"/><button @click="btnClick">导入参数</button></div>
</template><script>
import XLSX from 'xlsx';export default {methods: {btnClick () {document.querySelector('.input-file').click();},exportData (event) {if (!event.currentTarget.files.length) {return;}// 拿取文件对象const f = event.currentTarget.files[0];// 用FilefileReader 来读取const fileReader = new FileReader();// 重写FileReader上的readAsBinaryString方法FileReader.prototype.readAsBinaryString = (f) => {let binary = '';let wb; // 读取完成的数据let outdata; // 你需要的数据const fileReader = new FileReader();fileReader.onload = (e) => {// 读取成Uint8Array，再转换为Unicode编码（Unicode占两个字节）const bytes = new Uint8Array(fileReader.result);const length = bytes.byteLength;for (let i = 0; i < length; i++) {binary += String.fromCharCode(bytes[i]);}// 接下来就是xlsx了，具体可看apiwb = XLSX.read(binary, {type: 'binary'});outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);// 自定义方法向父组件传递数据this.$emit('getResult', outdata);// 清空value值，不然页面为刷新时无法重复使用document.querySelector('.input-file').value = '';};fileReader.readAsArrayBuffer(f);};fileReader.readAsBinaryString(f);}}
};
</script><style scoped>
.input-file {display: none;
}
</style>

页面中使用

<template><div><my-table @getUploadData="getExcelData"></my-table></div>
</template><script>
import MyTable from '@/components/table/index.vue';
export default {data () {return {uploadData: []};},methods: {getExcelData (data) {let obj = {};const list = [];data.forEach((item) => {obj = {};for (const key in item) {if (key === '日期') {obj.date = item[key];} else if (key === '姓名') {obj.name = item[key];} else if (key === '地址') {obj.address = item[key];} else {obj.ceshi = item[key];}}list.push(obj);});this.uploadData = list;}},components: {MyTable}
};
</script><style lang="less" scoped>
</style>

根据资料做的修改，仅供参考，具体需求根据项目变动

vue 使用 XLSX 导入表格相关推荐

vue项目xlsx导入
vue项目xlsx导入并且将数据导入element-ui的表格中 npm i xlsx 安装 <el-uploadaction="":multiple="false ...
vue使用XLSX下载表格
下载 import XLSX from 'xlsx';let body =[{name:'zs', age: 15}];let header = ['name', 'age'];let name = ...
vue+xlsx实现表格的导入导出:
文章目录一.vue前端使用xlsx和 xlsx-style 导出excel,并修改样式: 1.改造后效果: 2.实现: 3.引入库xlsx-style 4.excelUtil.js文件二.前端xl ...
XLSX + VUE获取表格内容，实现下载模板、导入表格、导出表格功能
安装依赖 npm install xlsx --save template-用的element <el-upload:file-list="fileList"accept=& ...
vue实现导入表格数据【纯前端实现】
一.文章引导 #mermaid-svg-j9HOnISPE2Hyb9Zj {font-family:"trebuchet ms",verdana,arial,sans-serif; ...
vue加element 实现Excel导入表格
Excel 导入表格 1:先安装三个依赖包 npm install -S file-saver npm install -S xlsx npm install -D script-loadere 2: ...
导入表格excel的方法+sqlsrver数据导入(.xlsx)：未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序
sqlsrver数据导入(.xlsx):未在本地计算机上注册"Microsoft.ACE.OLEDB.12.0"提供程序解决方法弹窗提示下面错误解决方法:下载AccessDa ...
vue使用xlsx、xlsx-style和fileSaver导出excel表格
本文引用 xlsx-style坑记录 Vue使用xlsx和xlsx-style纯前端导出带样式的Excel vue导出Excel表格,报错utils of undefined 是版本原因前期准备工作 ...
Vue 实现 Excel 导入功能
前言在实际开发中导入功能是非常常见的,导入功能前端并不难,难的是后端字段的对应,主要处理在后端. 我们只需要用饿了吗ui upload上传组件封装一层就可以了,主要起到上传文件作用. 通过按钮跳转到 ...

vue 使用 XLSX 导入表格

引言

下载插件

封装组件

第一种

页面中使用

第二种

页面中使用

vue 使用 XLSX 导入表格相关推荐

最新文章

热门文章