js导出Excel（图片大小，数据转换，导出后面添加现在的时间 ）

现在我们来讲一下为什么需要制作这个功能，因为我们需要把页码表格的内容导出到Excel表格进行使用

现在我来讲一下制作这个功能我遇到的问题

目录

1.数据转换的问题

2.图片大小的问题

3.数据是怎么获取导出的问题

4.怎么在导出的表头后面加上现在的时间

5.完整的代码格式

1.数据转换的问题

我们先声明一个数组这个数组就是我的接口数据，往它的里面添点值，方便我们在接下来的使用

let data=[
[id:1,name；苹果，idetyi：图片链接，tel:166****2031,money:10.00,setmeal:1,addtime:2024/12/20
],[
id:2,name；苹果，idetyi：图片链接，tel:166****2031,money:10.00,setmeal:2,addtime:2024/12/20],[
id:3,name；苹果，idetyi：图片链接，tel:166****2031,money:10.00,setmeal:3,addtime:2024/12/20],[
id:4,name；苹果，idetyi：图片链接，tel:166****2031,money:10.00,setmeal:4,addtime:2024/12/20],[
id:5,name；苹果，idetyi：图片链接，tel:166****2031,money:10.00,setmeal:5,addtime:2024/12/20],[
id:6,name；苹果，idetyi：图片链接，tel:166****2031,money:10.00,setmeal:6,addtime:2024/12/20],[
id:7,name；苹果，idetyi：图片链接，tel:166****2031,money:10.00,setmeal:7,addtime:2024/12/20]
]

然后再声明一个数组这个数组里面内容就是我们需要改变数据的内容

let time_type=['三天','七天','一个月','半年','一年','三年','五年']；

然后在通过for循环，循环data改变你想改变的数据内容

for (let i in data) {
        data[i].setmeal=time_type[data[i].setmeal-1];
        //设置内容的大小
		data[i].size = [120, 120];
}

2.图片大小的问题

我们可以通过下面的代码来修改图片大小的样式

let tbody = data.reduce((result, row) => {
			const temp = column.reduce((tds, col) => {
				const options = {};

				if (col.type === 'image') {
					if (row.size) {
						options.width = row.size[0];
						options.height = row.size[1];
					} else {
						col.width && (options.width = col.width);
						col.height && (options.height = col.height);
					}
					row.scale && (options.scale = row.scale);
				}

				tds += typeMap[col.type || 'text'](row[col.key], options);

				return tds;
			}, '');

3.数据是怎么获取导出的问题

先通过这个函数把获取到的data放入到导出里面，这个函数在下面完整格式的导出函数里面

table2excel(column, data, '用户导出' + getCurrentDateTimeString());

title是导出表格的表头，key是根据数据返回的键名导出键值的内容，type是类型，比如文字就是‘text’类型，图片是‘image’类型

const column = [{
			title: "序号", //表头名称title
			key: "id", //数据
			type: "text", //类型
		},
		{
			title: "用户名称",
			key: "name",
			type: "text",
		},
		{
			title: "用户头像",
			key: "idetyi",
			type: "image",
		},
		{
			title: "联系方式",
			key: "tel",
			type: "text",

		},
		{
			title: "消费金额",
			key: "money",
			type: "text",
		},
		{
			title: "服务类型",
			key: "setmeal",
			type: "text",
		},
		{
			title: "加入时间",
			key: "addtime",
			type: "text",
		},
	];

4.怎么在导出的表头后面加上现在的时间

通过这个函数获取现在的时间

// 获取到当前时间
function getCurrentDateTimeString() {
	const now = new Date();
	// 获取当前的年份，并只取后两位
	const year = now.getFullYear().toString().slice(-2);
	// 获取当前的月份，并确保是两位数（从0开始）
	const month = (now.getMonth() + 1).toString().padStart(2, '0');
	// 获取当前的日期，并确保是两位数
	const day = now.getDate().toString().padStart(2, '0');
	// 获取当前的小时，并确保是两位数
	const hours = now.getHours().toString().padStart(2, '0');
	// 获取当前的分钟，并确保是两位数
	const minutes = now.getMinutes().toString().padStart(2, '0');
	// 获取当前的秒，并确保是两位数
	const seconds = now.getSeconds().toString().padStart(2, '0');
	// 拼接成所需的字符串格式
	const dateTimeString = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	return dateTimeString;
}

把上面获取的现在的时间放入到这个函数里面，这个函数在下面完整格式的导出函数里面

table2excel(column, data, '用户导出' + getCurrentDateTimeString());

5.完整的代码格式

// 导出
async function showadd() {
	let data=[
[id:1,name；苹果，idetyi：图片链接，tel:166****2031,money:10.00,setmeal:1,addtime:2024/12/20
],[
id:2,name；苹果，idetyi：图片链接，tel:166****2031,money:10.00,setmeal:2,addtime:2024/12/20],[
id:3,name；苹果，idetyi：图片链接，tel:166****2031,money:10.00,setmeal:3,addtime:2024/12/20],[
id:4,name；苹果，idetyi：图片链接，tel:166****2031,money:10.00,setmeal:4,addtime:2024/12/20],[
id:5,name；苹果，idetyi：图片链接，tel:166****2031,money:10.00,setmeal:5,addtime:2024/12/20],[
id:6,name；苹果，idetyi：图片链接，tel:166****2031,money:10.00,setmeal:6,addtime:2024/12/20],[
id:7,name；苹果，idetyi：图片链接，tel:166****2031,money:10.00,setmeal:7,addtime:2024/12/20]
]
	let time_type=['三天','七天','一个月','半年','一年','三年','五年']；
	for (let i in data) {
        data[i].setmeal=time_type[data[i].setmeal-1];
        //设置内容的大小
		data[i].size = [120, 120];
	}

	// 导出表格  按钮点击后触发事件
	// 导出方法
	/* eslint-disable */
	let idTmr;
	const getExplorer = () => {
		let explorer = window.navigator.userAgent;
		//ie
		if (explorer.indexOf('MSIE') >= 0) {
			return 'ie';
		}
		//firefox
		else if (explorer.indexOf('Firefox') >= 0) {
			return 'Firefox';
		}
		//Chrome
		else if (explorer.indexOf('Chrome') >= 0) {
			return 'Chrome';
		}
		//Opera
		else if (explorer.indexOf('Opera') >= 0) {
			return 'Opera';
		}
		//Safari
		else if (explorer.indexOf('Safari') >= 0) {
			return 'Safari';
		}
	};
	// 判断浏览器是否为IE
	const exportToExcel = (data, name) => {
		// 判断是否为IE
		if (getExplorer() == 'ie') {
			tableToIE(data, name);
		} else {
			tableToNotIE(data, name);
		}
	};

	const Cleanup = () => {
		window.clearInterval(idTmr);
	};

	// ie浏览器下执行
	const tableToIE = (data, name) => {
		let curTbl = data;
		let oXL = new ActiveXObject('Excel.Application');

		//创建AX对象excel
		let oWB = oXL.Workbooks.Add();
		//获取workbook对象
		let xlsheet = oWB.Worksheets(1);
		//激活当前sheet
		let sel = document.body.createTextRange();
		sel.moveToElementText(curTbl);
		//把表格中的内容移到TextRange中
		sel.select;
		//全选TextRange中内容
		sel.execCommand('Copy');
		//复制TextRange中内容
		xlsheet.Paste();
		//粘贴到活动的EXCEL中

		oXL.Visible = true;
		//设置excel可见属性

		try {
			let fname = oXL.Application.GetSaveAsFilename('Excel.xlsx', 'Excel Spreadsheets (*.xlsx), *.xlsx');
		} catch (e) {
			print('Nested catch caught ' + e);
		} finally {
			oWB.SaveAs(fname);

			oWB.Close((savechanges = false));
			//xls.visible = false;
			oXL.Quit();
			oXL = null;
			// 结束excel进程，退出完成
			window.setInterval('Cleanup();', 1);
			idTmr = window.setInterval('Cleanup();', 1);
		}
	};

	// 非ie浏览器下执行
	const tableToNotIE = (function() {
		// 编码要用utf-8不然默认gbk会出现中文乱码
		const uri = 'data:application/vnd.ms-excel;base64,',
			template =
			'<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta charset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>';

		const base64 = function(s) {
			return window.btoa(unescape(encodeURIComponent(s)));
		};
		const format = (s, c) => {
			return s.replace(/{(\w+)}/g, (m, p) => {
				return c[p];
			});
		};
		return (table, name) => {
			const ctx = {
				worksheet: name,
				table,
			};

			const url = uri + base64(format(template, ctx));

			if (navigator.userAgent.indexOf('Firefox') > -1) {
				// 创建 Blob 对象
				const blob = new Blob([format(template, ctx)], {
					type: 'application/vnd.ms-excel'
				});
				// 创建链接并点击下载
				const aLink = document.createElement('a');
				aLink.href = URL.createObjectURL(blob);
				aLink.download = name || '用户.xls';
				document.body.appendChild(aLink);
				aLink.click();
				document.body.removeChild(aLink);
			} else {
				const aLink = document.createElement('a');
				aLink.href = url;
				aLink.download = name || '';
				let 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);
			}
		};
	})();

	const resolveOptions = (options) => {
		if (options.length === 1) {
			return options[0];
		}

		return {
			column: options[0] || [],
			data: options[1] || [],
			excelName: options[2] || '',
			captionName: options[3],
		};
	};

	// 导出函数
	const table2excel = (...options) => {
		function getTextHtml(val) {
			return `<td style="text-align: center;padding:5px;">${val}</td>`;
		}
		// 图片操作
		function getImageHtml(val, options) {
			options = Object.assign({
				width: 5,
				height: 5,
				scale: 0.7
			}, options);
			const imgWidth = options.width * options.scale;
			const imgHeight = options.height * options.scale;
			return `<td style=" width:${options.width}px;height:${options.height}px; text-align: center; vertical-align: middle">
                <div style="display: flex;
        justify-content: center;
        align-items: center; width:${options.width}px;height:${options.height}px; text-align: center;  margin:auto auto; vertical-align: middle;" ><img width="${imgWidth}" height="${imgHeight}" src="${val}" /></div>
                    </td>`;
		}

		const typeMap = {
			image: getImageHtml,
			text: getTextHtml,
		};
		// 解构赋值
		const {
			column,
			data,
			excelName,
			captionName
		} = resolveOptions(options);

		let caption = captionName ? `<caption style="font-weight:bold">${captionName}</caption>` : '';

		let thead = column.reduce((result, item) => {
			result += `<th>${item.title}</th>`;
			return result;
		}, '');

		thead = `<thead><tr>${thead}</tr></thead>`;

		let tbody = data.reduce((result, row) => {
			const temp = column.reduce((tds, col) => {
				const options = {};

				if (col.type === 'image') {
					if (row.size) {
						options.width = row.size[0];
						options.height = row.size[1];
					} else {
						col.width && (options.width = col.width);
						col.height && (options.height = col.height);
					}
					row.scale && (options.scale = row.scale);
				}

				tds += typeMap[col.type || 'text'](row[col.key], options);

				return tds;
			}, '');

			result += `<tr>${temp}</tr>`;

			return result;
		}, '');

		tbody = `<tbody>${tbody}</tbody>`;

		const table = caption + thead + tbody;
		// 导出表格
		exportToExcel(table, excelName);
	};
	const column = [{
			title: "序号", //表头名称title
			key: "id", //数据
			type: "text", //类型
		},
		{
			title: "用户名称",
			key: "name",
			type: "text",
		},
		{
			title: "用户头像",
			key: "idetyi",
			type: "image",
		},
		{
			title: "联系方式",
			key: "tel",
			type: "text",

		},
		{
			title: "消费金额",
			key: "money",
			type: "text",
		},
		{
			title: "服务类型",
			key: "setmeal",
			type: "text",
		},
		{
			title: "加入时间",
			key: "addtime",
			type: "text",
		},
	];

	table2excel(column, data, '用户导出' + getCurrentDateTimeString());

};

// 获取到当前时间
function getCurrentDateTimeString() {
	const now = new Date();
	// 获取当前的年份，并只取后两位
	const year = now.getFullYear().toString().slice(-2);
	// 获取当前的月份，并确保是两位数（从0开始）
	const month = (now.getMonth() + 1).toString().padStart(2, '0');
	// 获取当前的日期，并确保是两位数
	const day = now.getDate().toString().padStart(2, '0');
	// 获取当前的小时，并确保是两位数
	const hours = now.getHours().toString().padStart(2, '0');
	// 获取当前的分钟，并确保是两位数
	const minutes = now.getMinutes().toString().padStart(2, '0');
	// 获取当前的秒，并确保是两位数
	const seconds = now.getSeconds().toString().padStart(2, '0');
	// 拼接成所需的字符串格式
	const dateTimeString = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	return dateTimeString;
}