一、下载依赖包
npm i xlsx --save
npm i file-saver --save
二、在需要导出excel的组件导入xlsx、file-saver
import XLSX from 'xlsx'
import FileSaver from 'file-saver'
三、html部分
<button @click="exportExcel">下载</button>
四、js部分
exportExcel() {
let wopts = {
bookType: 'xlsx',
bookSST: true,
type: 'binary'
};
let workBook = {
SheetNames: ['Sheet1'],
Sheets: {},
Props: {}
};
let table = [
{
ID: '001',
name: '零零一',
age: 17,
from: '中国四川'
},
{
ID: '002',
name: '零零二',
age: 17,
from: '中国北京'
},
{
ID: '003',
name: '零零三',
age: 17,
from: '中国上海'
},
{
ID: '004',
name: '零零四',
age: 17,
from: '中国武汉'
},
{
ID: '005',
name: '零零五',
age: 17,
from: '中国湖南'
}
]
//1、XLSX.utils.json_to_sheet(data) 接收一个对象数组并返回一个基于对象关键字自动生成的“标题”的工作表,默认的列顺序由使用Object.keys的字段的第一次出现确定
//2、将数据放入对象workBook的Sheets中等待输出
workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(table);
//3、XLSX.write() 开始编写Excel表格
//4、changeData() 将数据处理成需要输出的格式
FileSaver.saveAs(new Blob([this.changeData(XLSX.write(workBook, wopts))], {type: 'application/octet-stream'}), new Date().getTime() + ".xlsx")
},
changeData(s) {
//如果存在ArrayBuffer对象(es6) 最好采用该对象
if (typeof ArrayBuffer !== 'undefined') {
//1、创建一个字节长度为s.length的内存区域
let buf = new ArrayBuffer(s.length);
//2、创建一个指向buf的Unit8视图,开始于字节0,直到缓冲区的末尾
let view = new Uint8Array(buf);
//3、返回指定位置的字符的Unicode编码
for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
} else {
let buf = new Array(s.length);
for (let i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
}
vue+elementui table导出excel
exportExcel() {
let xlsxParam = {raw: true}; //转换成excel时,使用原始的格式
/ generate workbook object from table /
/* 从表生成工作簿对象 */
let wb = XLSX.utils.table_to_book(
document.querySelector("#tableName"), //elementui 表格的id
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"}),
//设置导出文件名称
new Date().getTime() + ".xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
},