elementUI实现excel导出文件（html转excel, json转excel, aoa转excel）

需要导入依赖

npm install -S file-saver xlsx
npm install -D script-loader

html页面：

<el-button icon="el-icon-document" style="float: right;margin-top: 5px;margin-left: 5px;" circle size="mini" @click="doExportExcel"></el-button>

script代码：

import FileSaver from "file-saver";

import * as XLSX from "xlsx";

export default {

......

methods:{

......

doExportExcel(){//执行表格导出为excel文件

　　　//使用json直接导出方便了一点，也能够对数据进行处理，但是表单的格式不能自定义

// let handleData = []

　　 ......处理json数据.....

//let ws = XLSX.utils.json_to_sheet(handleData)//数据放上去

　　　//wb = XLSX.utils.book_new()

//XLSX.utils.book_append_sheet(wb, ws, 工作簿名称)

　　//使用aoa进行导出数据处理过程有点麻烦，但是可自定义性强，比较灵活

　　......处理表头.....

　　......处理每行数据(由于aoa数据是按每一条数组的格式来导出的，所以建议使用总数组.push(每行数组) 的方式进行处理)....

　　let ws = XLSX.utils.aoa_to_sheet(dataArray)

wb = XLSX.utils.book_new()

XLSX.utils.book_append_sheet(wb, ws, 工作簿名称)

　　//合并单元格

ws["!merges"] = [{ s: { c: 0, r: 0 }, e: { c: headerList.length-1, r: 0 } }]

//行高

ws["!rows"] = [{ hpx: 50 }] //设置第1行行高为50像素

//列宽

// wb.Sheets[工作簿名称]['!cols'] = [

// { wpx: 200 }, //设置第1列列宽为200像素

// { wch: 50 }, //设置第2列列宽为50字符

// ]

//居中不知道为什么没效果，查了一下网上有说法是 xlsx插件免费版没办法修改样式，能修改样式的专业版要七百多刀

// ws['A1'].s={

// alignment:{

// horizontal:"center",

// vertical:'center',

// },

// font: { bold: true },

// }

　　// html导出很方便代码量很少，可惜灵活度差一点

let xlsxParam = { raw: true };

/* 从表生成工作簿对象 */

let wb = XLSX.utils.table_to_book(

document.querySelector("#tableData"),

xlsxParam

);

/* 获取二进制字符串作为输出 */

let wbout = XLSX.write(wb, {

bookType: "xlsx",

bookSST: true,

type: "array",

});

try {

FileSaver.saveAs(

//Blob 对象表示一个不可变、原始数据的类文件对象。

//Blob 表示的不一定是JavaScript原生格式的数据。

//File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

//返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。

new Blob([wbout], { type: "application/octet-stream" }),

//设置导出文件名称

this.templateName.slice(0, -2)+"-第"+this.currentPages+"页.xlsx"

);

} catch (e) {

if (typeof console !== "undefined") console.log(e, wbout);

}

return wbout;

},

....

}