excel导入导出用js好还是php好,前端如何实现Excel导入和导出的功能（代码示例）...

本篇文章给大家带来的内容是关于前端如何实现Excel导入和导出的功能(代码示例)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

最近项目中让实现一个导入导出Excel的功能，查找了一些插件后发现js-xlsx这个插件，所以就尝试使用了一下，这里将使用方法和遇到的问题简单记录一下。

SheetJS js-xlsx 是一款能够读写多种格式表格的插件，浏览器支持良好，并且能在多个语言平台上使用，目前在 github 上有 14k 个 star。

插件地址：https://github.com/SheetJS/js...

使用

1.安装依赖

进入项目文件夹，安装 xlsxyarn add xlsx

2.在项目中引入import * as XLSX from 'xlsx'

导出Excel功能实现

1.定义导出时需要使用的方法export default function download(json,fileName){

const type = 'xlsx'//定义导出文件的格式

var tmpDown;//导出的内容

var tmpdata = json[0];

json.unshift({});

var keyMap = []; //获取keys

for (var k in tmpdata) {

keyMap.push(k);

json[0][k] = k;

}

var tmpdata = [];//用来保存转换好的json

json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {

v: v[k],

position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)

}))).reduce((prev, next) => prev.concat(next)).forEach((v, i) => tmpdata[v.position] = {

v: v.v

});

var outputPos = Object.keys(tmpdata); //设置区域,比如表格从A1到D10

var tmpWB = {

SheetNames: ['mySheet'], //保存的表标题

Sheets: {

'mySheet': Object.assign({},

tmpdata, //内容

{

'!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] //设置填充区域

})

}

};

tmpDown = new Blob([s2ab(XLSX.write(tmpWB,

{bookType: (type == undefined ? 'xlsx':type),bookSST: false, type: 'binary'}//这里的数据是用来定义导出的格式类型

))], {

type: ""

}); //创建二进制对象写入转换好的字节流

saveAs(tmpDown,fileName);

}

function saveAs(obj, fileName){//导出功能实现

var tmpa = document.createElement("a");

tmpa.download = fileName || "下载";

tmpa.href = URL.createObjectURL(obj); //绑定a标签

tmpa.click(); //模拟点击实现下载

setTimeout(function () { //延时释放

URL.revokeObjectURL(obj); //用URL.revokeObjectURL()来释放这个object URL

}, 100);

}

function s2ab(s){ //字符串转字符流

var buf = new ArrayBuffer(s.length);

var view = new Uint8Array(buf);

for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;

return buf;

}

function getCharCol(n){

let temCol = '',

s = '',

m = 0

while (n > 0) {

m = n % 26 + 1

s = String.fromCharCode(m + 64) + s

n = (n - m) / 26

}

return s

}

2.项目中使用导出方法//导出excel

//导出excel

downloadExl = () => {

const { results } = this.props //需要导出的json数据

let datas = _.clone(results)//这里为了不影响项目的数据的使用 采用了lodash中的深克隆方法

let json = datas.map(item=> { //将json数据的键名更换成导出时需要的键名

return {

'人员ID' :item.id,

'姓名' : item.name,

'证件类型': this.findIdType(item.idType),//将类型代号转为汉字

'证件号码': item.credentialsId,

'固定电话': item.tel,

'移动电话': item.mobile

}

})

download(json,'人员信息.xlsx')//导出的文件名

}

3.绑定事件导出Excel

这样就能轻松实现Excel的导出功能了

导入Excel功能实现

1.定义导入时需要使用的方法//导入excel

onImportExcel = file => {

// 获取上传的文件对象

const { files } = file.target;

// 通过FileReader对象读取文件

const fileReader = new FileReader();

fileReader.onload = event => {

try {

const { result } = event.target;

// 以二进制流方式读取得到整份excel表格对象

const workbook = XLSX.read(result, { type: 'binary' });

// 存储获取到的数据

let data = [];

// 遍历每张工作表进行读取(这里默认只读取第一张表)

for (const sheet in workbook.Sheets) {

// esline-disable-next-line

if (workbook.Sheets.hasOwnProperty(sheet)) {

// 利用 sheet_to_json 方法将 excel 转成 json 数据

data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));

// break; // 如果只取第一张表，就取消注释这行

}

}

// 最终获取到并且格式化后的 json 数据

const uploadData = data.map(item=> {

return {

id : Number(item['人员ID']),

name : item['姓名'],

idType: this.findIdType(item['证件类型'],'string'),

credentialsId: item['证件号码'],

tel: item['固定电话'],

mobile: item['移动电话']

}

})

console.log(uploadData)//这里得到了后端需要的json数据，调用接口传给后端就行了

message.success('上传成功！') //这里用了antd中的message组件

} catch (e) {

// 这里可以抛出文件类型错误不正确的相关提示

message.error('文件类型不正确！');

}

};

// 以二进制方式打开文件

fileReader.readAsBinaryString(files[0]);

}

2.绑定事件

导入Excel

//这里对原有的input样式进行了修改，accept 属性定义了上传文件支持的类型，onChange 操作中的 importExcel 方法定义了上传文件时执行的操作。

3.修改样式.upload_wrap {

display: inline-block;

position: relative;

width: 94px;

padding: 3px 5px;

overflow: hidden;

}

.file_uploader {

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

outline: none;

opacity: 0;

background-color: transparent;

}

.upload_text {

display: inline-block;

margin-left: 5px;

}

.upload_tip {

display: inline-block;

margin-left: 10px;

color: #999;

}

4.针对文件上传和读取结果分别做了对应的提示(这里使用 ant design 中的 message 组件)

5.得到的json数据

导入导出功能就这样实现了，是不是很简单。