javascript导出Excel和layui导出Excel和exceljs库导出Excel（图文教程）
使用javascript导出Excel和layui导出Excel和exceljs库导出Excel
javascript写的没有layui导出效果好，一般使用layui.excal来导出Excel
尝试一下>>
<script>
<!DOCTYPE html>
<html>
<head>
<title>javascript 生成excel 并下载文件</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>javascript 生成excel 并下载文件</h1>
<button onclick="generateExcelAndDownload()">下载Excel</button>
<script>
function generateExcelAndDownload() {
// 创建 Excel 数据
var excelData = [
['Hello', 'World'],
['JavaScript', 'Excel'],
['Download', 'Example']
];
// 创建 Excel 文件内容
var excelContent = "data:application/vnd.ms-excel;charset=utf-8," + encodeURIComponent(convertToExcel(excelData));
// 创建下载链接
var downloadLink = document.createElement('a');
downloadLink.href = excelContent;
downloadLink.download = 'sample.xls';
downloadLink.style.display = 'none';
// 添加链接到文档并模拟点击
document.body.appendChild(downloadLink);
downloadLink.click();
// 清理下载链接
document.body.removeChild(downloadLink);
}
function convertToExcel(data) {
var content = '';
for (var row = 0; row < data.length; row++) {
var rowData = data[row].join('\t');
content += rowData + '\n';
}
return content;
}
</script>
</body>
</html>
layui导出Excel
尝试一下>>
导出表结果
尝试一下>>
<script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>layui版excel下载</title>
<script src="/layui/layui.js"></script>
<script src="/layui/excel.min.js"></script>
</head>
<a href="javascript:exportExcel()">点击下载excel(layui版)</a>
<body>
<script>
//导出xls
var excel = layui.excel;
function exportExcel() {
var exportData = [{ "i": "1", "ntype": "管理员", "guestname": "张三", "sex": "男"},
{ "i": "2", "ntype": "普通人员", "guestname": "小红", "sex": "女" },
{ "i": "3", "ntype": "其它人员", "guestname": "李四", "sex": "保密" }]
//表头设置
exportData.unshift({
i: '编号',
ntype: '类型',
guestname: '姓名',
sex: '男'
});
// console.log("exportData",exportData)
//文件名称
var title = '人员表' + new Date().getTime() + '.xls';
// 意思是：A列宽度120px，B列40px...,具体宽度根据字段值实际长度设定
var colConf = excel.makeColConfig({
// '编号': 180
// ,'安全类': 400
// ,'guestname': 500
// ,'F': 620
}, 80);
excel.exportExcel({
sheet1: exportData
}, title, 'xls', {
extend: {
'!cols': colConf
}
});
}
</script>
</body>
</html>
layui导出Excel
github地址：
https://github.com/exceljs/exceljs
安装 npm install exceljs
尝试一下>>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>exceljs库导出Excel</title>
<script src="exceljs.min.js"></script>
</head>
<body>
<h1>javascript 生成excel 并下载文件</h1>
<button onclick="DownloadExcel()">下载Excel</button>
<script>
// 创建ExcelJS的工作簿对象
const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('Sheet 1');
// 在工作表中添加数据
worksheet.getCell('A1').value = 'Hello';
worksheet.getCell('B1').value = 'World';
worksheet.getCell('A2').value = '你好1';
worksheet.getCell('B2').value = '小明';
// 设置字段宽度
worksheet.columns = [
{ key: 'A', width: 15 },
{ key: 'B', width: 20 }
];
function DownloadExcel(){
// 生成XLS文件
workbook.xlsx.writeBuffer()
.then((buffer) => {
// 将buffer转换为Blob对象
const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
// 创建下载链接
const downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'example.xlsx';
// 添加下载链接到DOM树中
document.body.appendChild(downloadLink);
// 模拟点击下载链接
downloadLink.click();
// 清理下载链接
document.body.removeChild(downloadLink);
URL.revokeObjectURL(downloadLink.href);
})
.catch((error) => {
console.error('生成XLS文件时出错:', error);
});
}
</script>
</body>
</html>
