前端实现导出功能

前端实现导出功能

  json2excel(
     downloadArr,
     ["分时客流", " 闸机统计", "楼层统计", "租户停留人员统计"], // 四种excel
     fileName
  );
//downloadArr = [[{},{}],[{},{}],[{},{}],[{},{}]]
//  downloadArr 的格式
 // this.importTableData.forEach((item) => {
 //   let result = {
 //     ["证件类型"]: item.identification_type,
 //     ["证件号"]: item.identification_id,
 //     ["姓名"]: item.name,
 //     ["失败原因"]: item.error_msg,
 //   };

 //   downloadArr[0].push(result); 代表只有一个分时客流
 // }););
//fileName: 设置导出Excel的名字

//import { json2excel } from "@/utils/export2excel";

下面这块引入到vue组件使用即可

/* eslint-disable */
//import { saveAs } from 'file-saver'
import XLSX from 'xlsx'

 // 将workbook装化成blob对象
function workbook2blob(workbook, type) {
	// 生成excel的配置项
	var wopts = {
		// 要生成的文件类型
		bookType: type,
		// // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
		bookSST: false,
		type: "binary"
	};
	var wbout = XLSX.write(workbook, wopts);
	// 将字符串转ArrayBuffer
	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;
	}
	var blob = new Blob([s2ab(wbout)], {
		type: "application/octet-stream"
	});
	return blob;
}

/**
 * 通用的打开下载对话框方法，没有测试过具体兼容性
 * @param url 下载地址，也可以是一个blob对象，必选
 * @param saveName 保存文件名，可选
 */
function openDownloadDialog(url, saveName) {
	if( window.navigator.msSaveOrOpenBlob ) {
		window.navigator.msSaveOrOpenBlob(url, saveName)
	}else {
		if(typeof url == 'object' && url instanceof Blob)
		{
			url = URL.createObjectURL(url); // 创建blob地址
		}
		var aLink = document.createElement('a');
		aLink.href = url;
		aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
		var event;
		if(window.MouseEvent) event = new MouseEvent('click');
		else
		{
			event = document.createEvent('MouseEvents');
			event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
		}
		aLink.dispatchEvent(event);
	}
	
}

function downloadQr(){
	this.downloadQrLoading = true
	this.downloadQrClass = ""
	this.downloadQrText = "正在下载"
	let fileName = this.fileName[this.qr_type]
	if (window.navigator.msSaveOrOpenBlob) {
		let byte_str = atob(this.qrData.split(',')[1])
		let n = byte_str.length
		let u8arr = new Uint8Array(n)
		while (n--) {
			u8arr[n] = byte_str.charCodeAt(n)
		}
		let blob = new Blob([u8arr])

		window.navigator.msSaveOrOpenBlob(blob, fileName + '.' + 'png')
	} else {
		// chrome等新版浏览器
		const a = document.createElement('a')
		a.href = this.qrData
		a.setAttribute('download', fileName  + '.' + 'png')
		a.click()
	}
	this.downloadQrLoading = false
	this.downloadQrText = "下载二维码"
	this.downloadQrClass = "handle-link"
	this.$message({
		showClose: true,
		message: '下载成功',
		type: 'success',
		duration: 1500,
	});
}


export function json2excel(aoa, sheetnames, filename, type = 'xlsx') {

    // var aoa = [[
    //     {
    //         'name': 'zhangsan',
    //         'sex': 'nan',
    //         'age': 14,
    //         'time': new Date()
    //     },
    //     {
    //         'name': 'lisi',
    //         'sex': 'nv',
    //         'age': 18,
    //         'time': new Date()
    //     },
  // ]]
	//let sheetnames = []
	//aoa 与 sheetnames 的元素一一对应

	/* create a new blank workbook */
	let wb = XLSX.utils.book_new();

	aoa.forEach((val, index) => {
		let sheetdata = XLSX.utils.json_to_sheet(val)
		let sheetname = sheetnames[index]
		XLSX.utils.book_append_sheet(wb, sheetdata, sheetname, type)
	})
	
	const workbookBlob = workbook2blob(wb);
	openDownloadDialog(workbookBlob, `${filename}.${type}`)

}