经常做文件上传,所以有时候要预览上传文件的内容,之前是后端读取的,现在使用js-xlsx,前端也可以读取
xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls、xlsx、csv等十几种格式。本文随意以这3种文件格式为例
首先要安装 xlsx库
引入import XLSX from 'xlsx'
<el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
<el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
</el-table>
<input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls, .csv" @change="handleClick" />
<el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">批量上传</el-button>
1、通过input[type="file"]标签获取本地文件File对象
handleUpload() {
this.$refs['excel-upload-input'].click();
},
handleClick(e) {
const files = e.target.files;
const rawFile = files[0]; // only use files[0]
if (!rawFile) return;
this.upload(rawFile);
},
upload(rawFile) {
this.$refs['excel-upload-input'].value = null; //
this.readerData(rawFile);
},
readerData(rawFile) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
//使用FileReader对象, FileReader通过异步的方式读取文件内容,结果均是通过事件回调获取
reader.onload = e => {
const data = e.target.result;
// 获取workbook对象,读取excel主要是通过XLSX.read(data, {type: type});方法来实现,返回一个叫WorkBook的对象 type为array是 Uint8Array,8位无符号数组
const workbook = XLSX.read(data, { type: 'array' })
const firstSheetName = workbook.SheetNames[0] // 是获取Sheets中第一个Sheet的名字
const worksheet = workbook.Sheets[firstSheetName] // 获取第一个Sheet的数据
const results = XLSX.utils.sheet_to_json(worksheet); // 输出JSON格式
const header = this.getHeaderRow(worksheet)
this.generateData({ header, results }) // 处理数据
resolve()
};
reader.onerror = e => {
console.log(e, '4')
reject(e)
}
// 以ArrayBuffer方式打开文件 读取本地文件
reader.readAsArrayBuffer(rawFile)
})
},
// 获取表头row
getHeaderRow(sheet) {
const headers = []
const range = XLSX.utils.decode_range(sheet['!ref']) //sheet['!ref']:表示所有单元格的范围,例如从A1到F8则记录为A1:F8
let C
const 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 */
const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
/* find the cell in the first row */
let hdr = 'UNKNOWN ' + C // <-- replace with your desired default
if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
headers.push(hdr)
}
return headers
},
show({ results, header }) {
this.tableData = results
this.tableHeader = header
},
generateData({ header, results }) {
this.excelData.header = header
this.excelData.results = results
this.show && this.show(this.excelData)
},
2、获取文件内容在readerData方法中,其余是我业务里面的数据处理
[官方git文档](https://github.com/SheetJS/js-xlsx](https://github.com/SheetJS/js-xlsx)
参考文档

网友评论