<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.16.5/xlsx.mini.min.js"></script>
<style>
input {
width: 100%;
height: 20px;
line-height: 20px;
border: none;
display: block;
box-sizing: border-box;
outline: none;
text-align: center;
}
table {
border-collapse: collapse;
}
td,
th {
border: 1px solid black;
}
</style>
</head>
<body>
<table cellpadding="0">
<thead id="thead"> </thead>
<tbody id="tbody"></tbody>
</table>
<button id="btn">导出xlsx</button>
<script>
let head = ['列1', '列2', '列3']
let data = [
['第一行第一列', '第一行第二列', '第一行第三列'],
['第二行第一列', '第二行第二列', '第二行第三列'],
['第三行第一列', '第三行第二列', '第三行第三列'],
];
const create = e => document.createElement(e)
const thead = document.querySelector('#thead')
const tbody = document.querySelector('#tbody')
const tr = create('tr')
head.forEach(item => {
const th = create('th')
th.innerText = item
tr.appendChild(th)
})
thead.appendChild(tr)
data.forEach((item, index) => {
const tr = create('tr')
item.forEach((item2, index2) => {
const td = create('td')
const input = create('input')
input.value = item2
input.oninput = function(e) {
data[index][index2] = e.target.value
}
td.appendChild(input)
tr.appendChild(td)
tbody.appendChild(tr)
})
})
const btn = document.querySelector('#btn')
btn.onclick = function() {
// 将一个sheet转成最终的excel文件的blob对象
const sheetname = 'sheet1'
let workbook = {
SheetNames: [sheetname],
Sheets: {}
}
let sheet = XLSX.utils.json_to_sheet(data)
sheet.A1.v = head[0]
sheet.B1.v = head[1]
sheet.C1.v = head[2]
workbook.Sheets[sheetname] = sheet
// 生成excel的配置项
const wopts = {
bookType: 'xlsx', // 要生成的文件类型
bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
type: 'binary'
};
const wbout = XLSX.write(workbook, wopts);
const blob = new Blob([s2ab(wbout)], {
type: "application/octet-stream"
});
download(blob, 'xlsx测试文件.xlsx')
}
// 字符串转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;
}
function download(blob, name) {
// 用URL.createObjectURL下载
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url;
a.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);
}
a.dispatchEvent(event);
}
</script>
</body>
</html>
