vue xlsx 导入导出_vue 导入导出Excel文件（使用js-xlsx库）

导入XLSX库

官方地址Github

安装

npm install xlsx --s

简单二次封装js-xlsx库导入导出功能

封装为excel.js

/* eslint-disable */

import XLSX from 'xlsx';

/**

* @description:

* @param {Object} json 服务端发过来的数据

* @param {String} name 导出Excel文件名字

* @return:

*/

function exportExcel(json, name) {

/* convert state to workbook */

var data = new Array();

var keyArray = new Array();

for (const key1 in json) {

if (json.hasOwnProperty(key1)) {

const element = json[key1];

var rowDataArray = new Array();

for (const key2 in element) {

if (element.hasOwnProperty(key2)) {

const element2 = element[key2];

rowDataArray.push(element2);

if (keyArray.length < getLength(element)) {

keyArray.push(key2);

}

}

}

data.push(rowDataArray);

}

}

data.splice(0, 0, keyArray);

const ws = XLSX.utils.aoa_to_sheet(data);

const wb = XLSX.utils.book_new();

XLSX.utils.book_append_sheet(wb, ws, "SheetJS");

/* generate file and send to client */

XLSX.writeFile(wb, name + ".xlsx");

}

/**

* @description: 导入excel文件并返回数据

* @param {function} 回调函数参数data,dataRef,一个是数据，一个是exce表单的索引

* @return:

*/

function importExcel(callback) {

var inputObj = document.createElement('input')

inputObj.setAttribute('id', 'file');

inputObj.setAttribute('type', 'file');

inputObj.setAttribute('name', 'file');

inputObj.setAttribute("style", 'visibility:hidden');

inputObj.setAttribute("accept", ".xlsx,.xls,.csv")

inputObj.addEventListener('change', (evt) => {

const files = evt.target.files;

if (files && files[0]) _file(files[0], (data, dataRef) => {

callback(data, dataRef)

});

})

document.body.appendChild(inputObj);

inputObj.value;

inputObj.click();

}

/**

* @description: 处理文件

* @param {Object} file 文件对象

* @param {function} callback 回调函数

* @return:

*/

function _file(file, callback) {

const make_cols = refstr => Array(XLSX.utils.decode_range(refstr).e.c + 1).fill(0).map((x, i) => ({

name: XLSX.utils.encode_col(i),

key: i

}));

/* Boilerplate to set up FileReader */

const reader = new FileReader();

reader.onload = (e) => {

/* Parse data */

const bstr = e.target.result;

const wb = XLSX.read(bstr, {

type: 'binary'

});

/* Get first worksheet */

const wsname = wb.SheetNames[0];

const ws = wb.Sheets[wsname];

/* Convert array of arrays */

const data = XLSX.utils.sheet_to_json(ws, {

header: 1

});

/* Update state */

callback(data, make_cols(ws['!ref']))

};

reader.readAsBinaryString(file);

}

/**

* @description: 获取map的长度

* @param {Object} obj map对象

* @return: map的长度

*/

function getLength(obj) {

var count = 0;

for (var i in obj) {

if (obj.hasOwnProperty(i)) {

count++;

}

}

return count;

}

export default {

exportExcel,

importExcel

}

exportExcel导出文件，importExcel导入文件，参数说明看代码中注释

在其他文件使用封装的js

在App.vue中

首先import文件

import Excel from "./libs/excel.js";

示例导出的json对象，写在data中

{

name: "路人甲",

phone: "123456789",

email: "000@123456.com"

},

{

name: "炮灰乙",

phone: "123456789",

email: "000@123456.com"

},

{

name: "土匪丙",

phone: "123456789",

email: "000@123456.com"

},

{

name: "流氓丁",

phone: "123456789",

email: "000@123456.com"

}

]

method中写对应的方法

exportExcel() {

Excel.exportExcel(this.jsonData, "文件");

},

importFile() {

Excel.importExcel((data, dataRef) => {

alert("数据已经打印在控制台");

console.log(data);

console.log(dataRef);

});

}

太简单了没写demo，伸手党请不要来问demo。有疑问请留意。