最近在蓝鲸作业,蓝鲸考试的噩梦支配下。因对python后端知识相对薄弱点。后端导入导出功能简直麻烦,不如前端来做。于是乎就用了强大的excel处理工具js-xlsx。
各种电子表格格式的分析器和编写器。强调解析和编写健壮性,跨格式功能与统一的JS表示兼容,以及ES3 / ES5。浏览器兼容IE6。
npm: npm install xlsx
bower:
bower install js-xlsx
直接引用: 下载相关js ,页面中直接用script标签引用
功能解析:上传excel文件,解析excel文件成为json数据格式,转换成接口的数据格式,调保存接口存入数据库。
创建js文件
Import XLSX from 'xlsx'
// file是传进来excel文件
const = getExcelFileData(file) {
var excelData = []
//声明一个文件读取器
const fileReader = new FileReader()
//文件读取成功时触发事件
fileReader.onload=ev=>{
try{
//
读取的文件
const data =
ev.target.result
//以二进制流方式读取得到整份excel表格
const workbook = XLSX.read(data,{type:'binary'})对象
// 循环遍历excel的sheet
Object.keys(workbook.Sheets).forEach((sheet,index)=>{
console.info(workbook.Sheets[sheet]['!ref'])
excelData.push(
//
将excel 转换成json对象放入数组中
...XLSX.utils.sheet_to_json(workbook.Sheets[sheet])
)
})
// 自定义事件,比如校验excel数据。转换数据格式…
checkingExcelData(excelData)
}catch(e){
console.err('文件类型不正确')
}
}
//读取文件
fileReader.readAsBinaryString(file)
},
没错,就是这么简单。是不是爱上它了。下面还有更简单的。
我们在定义一个导出方法
/* 第一个参数是导出的数组对象,第二个参数是表头title,第三个参数是文件名*/
/* const data = [
{A:’1111’,B:’2222’},
{A:’1111’,B:’2222’}
{A:’1111’,B:’2222’}
]
const header = {header: [“A”,“B”] }
*/
const outputXlsxFile = (data,header,
xlsxName) => {
const ws = XLSX.utils.json_to_sheet(data, header)
const wb = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(wb, ws, xlsxName)
XLSX.writeFile(wb, xlsxName + ".xlsx")
}
Vue.prototype.$outputXlsxFile
= outputXlsxFile
Vue.prototype.$getExcelFileData = getExcelFileData
我这里已经把功能注册到vue中,大家实用直接可用this调用此方法。
xlsx还有更多强大实用功能。我们慢慢去发现吧。