1、官网文档
读取excel文件 Reading Files | SheetJS Community Edition
读取csv文件 Documentation - Papa Parse
编码解析GitHub - aadsm/jschardet：JavaScript 中的字符编码自动检测（python's chardet 的端口）
2、安装xlsx、csv、编码解析
npm i xlsx;
npm i papaparse;
npm i jschardet;
3、引入解析插件
import Xlsx from 'xlsx';
import Papa from 'papaparse';
4、解析excel为JSON
uploadFile(file) {
// 拿到所导入文件的名字(file是input标签拿到的文件信息)
let fileName = file
//定义reader，存放文件读取方法
let reader = new FileReader()
//启动函数
reader.readAsBinaryString(fileName)
//onload在文件被读取时自动触发
reader.onload = e => {
try {
//workbook存放excel的所有基本信息
const workbook = Xlsx.read(e.target.result, {
type: 'binary',
cellDates: true
})
//定义sheetList中存放excel表格的sheet表，就是最下方的tab
let sheet = workbook.SheetNames[0] // 工作表名称(选第一个sheet)
let worksheet = workbook.Sheets[sheet] // 只能通过工作表名称来获取指定工作表
let results = Xlsx.utils.sheet_to_json(worksheet, { header: 1, range: 0 }) // Xlsx解析工作表信息 header: 1 含表头 range: 0 从第一行开始读取不设置从有实际内容开始读取
this.fieldDateList = results // 这里results就是我们要拿到的信息
this.$emit("fieldDateListFun", this.fieldDateList);
} catch (error) {
this.$message.warning('文件类型不正确！')
}
}
},
5、解析csv文件为JSON
// 上传文件解析csv
importCsv(file) {
let selectedFile = file;
var reader = new FileReader();
reader.readAsDataURL(selectedFile);
reader.onload = evt => {
// 检查编码,支持不同语言
let encoding = this.checkEncoding(evt.target.result);
// 将csv转换成二维数组
Papa.parse(selectedFile, {
encoding: encoding,
complete: res => {
// UTF8 \r\n与\n混用时有可能会出问题
let results = res.data;
if (results[results.length - 1] === "") {
//去除最后的空行
results.pop();
}
this.fieldDateList = results
this.$emit("fieldDateListFun", this.fieldDateList);
}
});
};
},
// 编码转换
checkEncoding(base64Str) {
// 这种方式得到的是一种二进制串
let str = atob(base64Str.split(';base64,')[1])
// 要用二进制格式
const jschardet = require("jschardet");
let encoding = jschardet.detect(str)
encoding = encoding.encoding
if (encoding === 'windows-1252') {
encoding = 'ANSI'
}
return encoding
},
6、结合若依FileUpload使用，能不大改就不大改
// 上传结束处理
uploadedSuccessfully() {
if (this.number > 0 && this.uploadList.length === this.number) {
this.fileList = this.fileList.concat(this.uploadList);
this.uploadList = [];
this.number = 0;
this.$emit("input", this.listToString(this.fileList));
this.$modal.closeLoading();
// 上传结束解析文件
if (this.fieldDate) {
switch (this.file.name.split('.')[this.file.name.split('.').length - 1]) {
case "csv":
this.importCsv(this.file)
break;
case "CSV":
this.importCsv(this.file)
break;
case "xlsx":
this.uploadFile(this.file)
break;
case "xls":
this.uploadFile(this.file)
break;
}
}
}
},
7、结合input框实时读取第n行内容
// 读取某行表格 this.fileListNow为4、5拿到的解析数组，tempNum为第n行
fileListNowFun(tempNum, ev = this.fileListNow) {
// 转换为后端数据
let fileListOld = []
// 读取指定行数的内容
if (ev.length !== 0 && tempNum <= ev.length) {
// 单行表头
let tempFileListOld = ev[tempNum - 1]
if (tempFileListOld.length !== 0) {
// 字符串不为空时，转换字段
tempFileListOld.map((v, i, a) => {
if (!!v) {
// 转换字段
fileListOld.push({
tempOne:v
})
}
})
}
}
// 没有列表时页面存在至少一条数据
if (fileListOld.length === 0) {
fileListOld = [{
temp:''
}]
}
this.$emit("fileListNewFun", fileListOld)
}
好文链接
您阅读本篇文章共花了：
发表评论