[文章]纯前端vue+js-xlsx实现导入导出功能

收藏

 0  10670 0

尹德华 2019-06-30发布

Vue + js-xlsx实现文件导入导出

最近在蓝鲸作业，蓝鲸考试的噩梦支配下。因对python后端知识相对薄弱点。后端导入导出功能简直麻烦，不如前端来做。于是乎就用了强大的excel处理工具js-xlsx。

Js-xlsx 简介

各种电子表格格式的分析器和编写器。强调解析和编写健壮性，跨格式功能与统一的JS表示兼容，以及ES3 / ES5。浏览器兼容IE6。

Js-xlsx 安装

npm: npm install xlsx

bower: bower install js-xlsx

直接引用：下载相关js ,页面中直接用script标签引用

Js-xlsx使用

导入

功能解析：上传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还有更多强大实用功能。我们慢慢去发现吧。

{{post.UserNickName}}
{{post.CreateTime}}

{{post.ThumbsUpCount}} {{post.CommentCount}}条评论
编辑采纳

{{comment.UserNickName}}（{{comment.RoleName}}）回复{{comment.ReplyPeopleName}}：{{comment.Content}}

{{comment.ThumbsUpCount}} {{comment.CreateTime}} 回复删除

评论取消

评论取消
暂无回答

最近热帖: {{item.Title}}  {{item.ViewCount}}

近期热议: {{item.Title}}  {{item.PostCount}}