首页> 前端开发> 纯前端vue+js-xlsx实现导入导出功能

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

收藏
0 8100 0

      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'})对象

// 循环遍历excelsheet

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

前端开发
最近热帖
{{item.Title}} {{item.ViewCount}}
近期热议
{{item.Title}} {{item.PostCount}}