vue xlsx file-saver实现前端导入excel,导出excel

1、下载依赖包

    npm install -S file-saver xlsx

    插件详细介绍

    https://github.com/SheetJS/js-xlsx 
    https://github.com/eligrey/FileSaver.js

2、引用依赖包

    import FileSaver from 'file-saver';

    import XLSX from 'xlsx';

3、表格导出excel

html



	


质量问题报表

js

exportFunc(e) {
	// 从表生成工作簿对象
	var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
	// 得到二进制字符串作为输出
	var wbout = XLSX.write(wb, {
	bookType: "xlsx",
	type: "binary"
	});
	FileSaver.saveAs(
	new Blob([this.s2ab(wbout)], {
		type: "application/octet-stream"
	}),
	"a.xlsx"
	);
},
s2ab(s) {
	var cuf;
	var i;
	if (typeof ArrayBuffer !== "undefined") {
	cuf = new ArrayBuffer(s.length);
	var view = new Uint8Array(cuf);
	for (i = 0; i !== s.length; i++) {
		view[i] = s.charCodeAt(i) & 0xff;
	}
	return cuf;
	} else {
	cuf = new Array(s.length);
	for (i = 0; i !== s.length; ++i) {
		cuf[i] = s.charCodeAt(i) & oxFF;
	}
	return cuf;
	}
}

4、json导出excel

json格式

var jsono = [{ //测试数据
	"保质期临期预警(天)": "adventLifecycle",
	"商品标题": "title",
	"建议零售价": "defaultPrice",
	"高(cm)": "height",
	"商品描述": "Description",
	"保质期禁售(天)": "lockupLifecycle",
}];

把调用

var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));

修改为

var wb = XLSX.utils.json_to_sheet(document.querySelector("#out-table"));

即可。

5、页面导入excel(懒得验证了,先把别人代码拿来,备忘)




    
    
    


    
    

 

你可能感兴趣的:(vue)