vue解析excel文件(使用xlsx)

1.安装xlsx依赖

npm install xlsx --save

2.创建一个js作为外部引入,命名为excel.js

/* eslint-disable */
import XLSX from 'xlsx';function auto_width(ws, data){/*set worksheet max width per col*/const colWidth = data.map(row => row.map(val => {/*if null/undefined*/if (val == null) {return {'wch': 10};}/*if chinese*/else if (val.toString().charCodeAt(0) > 255) {return {'wch': val.toString().length * 2};} else {return {'wch': val.toString().length};}}))/*start in the first row*/let result = colWidth[0];for (let i = 1; i < colWidth.length; i++) {for (let j = 0; j < colWidth[i].length; j++) {if (result[j]['wch'] < colWidth[i][j]['wch']) {result[j]['wch'] = colWidth[i][j]['wch'];}}}ws['!cols'] = result;
}function json_to_array(key, jsonData){return jsonData.map(v => key.map(j => { return v[j] }));
}// fix data,return string
function fixdata(data) {let o = ''let l = 0const w = 10240for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))return o
}// get head from excel file,return array
function get_header_row(sheet) {const headers = []const range = XLSX.utils.decode_range(sheet['!ref'])let Cconst R = range.s.r /* start in the first row */for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */var cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] /* find the cell in the first row */var hdr = 'UNKNOWN ' + C // <-- replace with your desired defaultif (cell && cell.t) hdr = XLSX.utils.format_cell(cell)headers.push(hdr)}return headers
}export const export_table_to_excel= (id, filename) => {const table = document.getElementById(id);const wb = XLSX.utils.table_to_book(table);XLSX.writeFile(wb, filename);
}export const export_json_to_excel = ({data, key, title, filename, autoWidth}) => {const wb = XLSX.utils.book_new();data.unshift(title);const ws = XLSX.utils.json_to_sheet(data, {header: key, skipHeader: true});if(autoWidth){const arr = json_to_array(key, data);auto_width(ws, arr);}XLSX.utils.book_append_sheet(wb, ws, filename);XLSX.writeFile(wb, filename + '.xlsx');
}export const export_array_to_excel = ({key, data, title, filename, autoWidth}) => {const wb = XLSX.utils.book_new();const arr = json_to_array(key, data);arr.unshift(title);const ws = XLSX.utils.aoa_to_sheet(arr);if(autoWidth){auto_width(ws, arr);}XLSX.utils.book_append_sheet(wb, ws, filename);XLSX.writeFile(wb, filename + '.xlsx');
}export const read = (data, type) => {/* if type == 'base64' must fix data first */// const fixedData = fixdata(data)// const workbook = XLSX.read(btoa(fixedData), { type: 'base64' })const workbook = XLSX.read(data, { type: type });const firstSheetName = workbook.SheetNames[0];const worksheet = workbook.Sheets[firstSheetName];const header = get_header_row(worksheet);const results = XLSX.utils.sheet_to_json(worksheet);return {header, results};
}export default {export_table_to_excel,export_array_to_excel,export_json_to_excel,read
}

3.在需要的组件中添加方法，以iview为例（主要是拿到上传的file文件),这是action地址不需要后台提供，这里使用的是iview中的默认上传地址，在这个需要使用的组件中用import 引入上面新建的excel.js

<Upload ref="uploadFileFlag" action="//jsonplaceholder.typicode.com/posts/" :before-upload="beforeFile" :on-remove="removeFile"><Button icon="ios-cloud-upload-outline">上传文件</Button></Upload>

4.beforeFile中可以拿到我们想要的file

 beforeFile(file){const fileExt = file.name.split('.').pop().toLocaleLowerCase()this.uploadFile = file;if (fileExt === 'xlsx' || fileExt === 'xls') {this.readFile(file)this.file = file} else {this.$Notice.warning({title: '文件类型错误',desc: '文件：' + file.name + '不是EXCEL文件，请选择后缀为.xlsx或者.xls的EXCEL文件。'})}return false},

5.这是读取文件

     // 读取文件readFile(file) {const reader = new FileReader()reader.readAsArrayBuffer(file)reader.onloadstart = e => {this.uploadLoading = truethis.tableLoading = truethis.showProgress = true}reader.onprogress = e => {this.progressPercent = Math.round(e.loaded / e.total * 100)}reader.onerror = e => {this.$Message.error('文件读取出错')}reader.onload = e => {const data = e.target.resultconst { header, results } = excel.read(data, 'array')const tableTitle = header.map(item => { return { title: item, key: item } })this.tableData = results  //这里的tableData就是拿到的excel表格中的数据this.tableTitle = tableTitlethis.uploadLoading = falsethis.tableLoading = falsethis.showRemoveFile = true}},

vue解析excel文件(使用xlsx)相关推荐

Java解析Excel文件（.xlsx和.xls格式均适用）
简介: Excel文件的解析与读取普通的文本文件不同,就像xml文件的解析,最常用的Java4J方式也是jar包支持的, 根据apache官方文档:http://poi.apache.org/spre ...
java解析Excel文件的方法
java解析Excel文件的方法介绍 1.1 pom依赖 1.2 将数据流转化为可解析的Workbook类型文件 1.3 解析 1.4 Controller层接收前端传递的Excel文件(前端使用E ...
java代码使用http请求解压zip包并解析xml_Javascript 是如何解析 Excel 文件的？
最近要做一个导入导出 Excel 的功能,上一次做这个功能的时候,还是用的 Java Apache POI,这是一个用 Java 编写的免费开源的跨平台的 Java API,能够对 Microsoft ...
前端解析Excel文件js-xlsx与bootstrapTable
前端解析Excel文件js-xlsx与bootstrapTable 1.引入xlsx.js 2.上传Excel按钮 3.读取Excel文件 4.结果 1.引入xlsx.js <script sr ...
读取ppt并存入数据库_Java解析Excel文件并把数据存入数据库
前段时间做一个小项目,为了同时存储多条数据,其中有一个功能是解析Excel并把其中的数据存入对应数据库中.花了两天时间,不过一天多是因为用了"upload"关键字作为URL从而导致 ...
js前端解析excel文件
使用纯Javascript解析excel文件. 使用的是开源的解析excel的js库:sheetjs.github地址:https://github.com/SheetJS/js-xlsx 首先引用J ...
Java面试poi中excel版本大小_java 中 poi解析Excel文件版本问题解决办法
java 中 poi解析Excel文件版本问题解决办法发布时间:2020-10-02 03:46:15 来源:脚本之家阅读:91 作者:程诺 poi解析Excel文件版本问题解决办法 poi解析E ...
java解析Excel文件
下文介绍java解析Excel文件的方案前置准备 1.第三方jar包或者Maven配置 org.apache.poi的jar包 Maven配置如下 <groupId>org.apache ...
微信小程序使用node-xlsx解析excel文件的云函数
1.右键新建node.js云函数 2.在该云函数右键:在外部终端窗口打开 3.输入npm install node-xlsx,回车 4.引入并写程序,如下 // 云函数入口文件 const cloud ...

vue解析excel文件(使用xlsx)

vue解析excel文件(使用xlsx)相关推荐

最新文章

热门文章