表格导出excel
如果在主流浏览器上,不考虑ie,可以这么写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" cellspacing=" 0" id="tableExcel" width="100%" class="table table-hover">
<tr>
<td colspan="5" align="center">html 表格导出Excel</td>
</tr>
<tr>
<td>列标题1</td>
<td>列标题2</td>
<td>类标题3</td>
<td>列标题4</td>
<td>列标题5</td>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
<td>eee</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
</tr>
<tr>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
</tr>
</table>
<a id="dlink" style="display:none;"></a>
<input type="text" name="" value="请输入文件名" class="center-block form-control"
style="margin-bottom: 20px; text-align: center" id="submit" onclick="submt()">
<input type="button" class="btn btn-primary center-block"
onclick="tableToExcel('tablename', 'name', 'zhangsan.xls')" value="导出">
</body>
<script>
function submt() {
document.getElementById('submit').value = "";
}
var tableToExcel = (function () {
var 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>'
, base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
, format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }
return function (table, name) {
if (!table.nodeType) table = document.getElementById("tableExcel")
var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
document.getElementById("dlink").href = uri + base64(format(template, ctx));
document.getElementById("dlink").download = document.getElementById('submit').value + '.xls';
document.getElementById("dlink").click();
}
})();
</script>
</html>
如果要兼容ie浏览器
var idTmr;
function getExplorer() {
var 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';
}
}
function method5(tableid) {
if (getExplorer() == 'ie') {
var curTbl = document.getElementById(tableid);
var oXL = new ActiveXObject("Excel.Application");
var oWB = oXL.Workbooks.Add();
var xlsheet = oWB.Worksheets(1);
var sel = document.body.createTextRange();
sel.moveToElementText(curTbl);
sel.select();
sel.execCommand("Copy");
xlsheet.Paste();
oXL.Visible = true;
try {
var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
} catch (e) {
print("Nested catch caught " + e);
} finally {
oWB.SaveAs(fname);
oWB.Close(savechanges = false);
oXL.Quit();
oXL = null;
idTmr = window.setInterval("Cleanup();", 1);
}
}
else {
tableToExcel(tableid)
}
}
function Cleanup() {
window.clearInterval(idTmr);
CollectGarbage();
}
var tableToExcel = (function () {
var 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>' ,
base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) },
format = function (s, c) {
return s.replace(/{(\w+)}/g,
function (m, p) { return c[p]; })
}
return function (table, name) {
if (!table.nodeType) table = document.getElementById(table);
var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML };
window.location.href = uri + base64(format(template, ctx));
}
})();
method5(table); //table是表格的id
json数据导出excel
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
function tableToExcel() {
//要导出的json数据
const jsonData = [
{
name: '张先生',
phone: '123456789',
email: '000@123456.com'
},
{
name: '王先生',
phone: '123456789',
email: '000@123456.com'
},
{
name: '李先生',
phone: '123456789',
email: '000@123456.com'
},
{
name: '赵先生',
phone: '123456789',
email: '000@123456.com'
},
]
//列标题,逗号隔开,每一个逗号就是隔开一个单元格
let str = `姓名,电话,邮箱\n`;
//增加\t为了不让表格显示科学计数法或者其他格式
for (let i = 0; i < jsonData.length; i++) {
for (let item in jsonData[i]) {
str += `${jsonData[i][item] + '\t'},`;
}
str += '\n';
}
//encodeURIComponent解决中文乱码
let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
//通过创建a标签实现
let link = document.createElement("a");
link.href = uri;
link.innerHTML = 'json数据表.csv下载';
//对下载的文件命名
link.download = "json数据表.csv";
document.body.appendChild(link);
}
tableToExcel();
</script>
</html>
json导出excel,excel导入成json (使用插件XLSX)(终极版本)(兼容ie)
首先下载 xlsx, npm install xlsx -S
在 vue中可以 import * as XLSX from "xlsx"
以下代码用原生js演示
参考文章:如何使用JavaScript实现纯前端读取和导出excel文件
xlsx.js 表格的导出与导入
Element-UI配合xlsx提取Excel中的数据
官方文档:https://docs.sheetjs.com/docs/api/parse-options
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导入导出excel</title>
</head>
<body>
<button id="downFile">导出excel</button>
<label>
<button id="importFile">导入excel</button>
<input id="input" type="file" accept=".xls,.xlsx,.csv" style="display: none">
</label>
</body>
<script src="../xlsx.js"></script>
<script>
const importFile = document.getElementById('importFile');
const input = document.getElementById('input');
const downFile = document.getElementById('downFile');
//由于label标签不生效,点击导入按钮代码触发上传文件
importFile.onclick = function () {
input.click();
};
//导入
input.onchange = function (e) {
let file = e.target.files[0];
const fileReader = new FileReader();
fileReader.readAsArrayBuffer(file, 'utf-8');
fileReader.onload = function (event) {
//导入成功把上传文件的缓存清除,防止同名文件不能再次上传
e.target.value = '';
let data = event.target.result;
//把数据转成csv
let workbook = XLSX.read(data, { type: 'buffer' });
let wsname = workbook.SheetNames[0];
let ws = XLSX.utils.sheet_to_csv(workbook.Sheets[wsname]);
console.log(ws);
//把数据转成json
// { raw: true } 纯文本解析不会解析值,防止(0丢失,时间格式被转换)
workbook = XLSX.read(ws, { type: "binary", raw: true });
wsname = workbook.SheetNames[0];
//defval 使用指定值代替null或undefined
/*header 传入数组代表使用指定字段名代替表头名,传入空代表去掉标题一行,
传入数字1代表转出数组,传入字符串A代表key从A开始依次往后排*/
ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname], {
defval: "----",
// header: ['name', 'date', 'sex', 'code'],
});
console.log(ws);
}
}
//导出
downFile.onclick = function () {
//数据里数字要写成字符串形式,如果是数字类型,前边的0会在转成excel被丢失
const data = [{
'姓名': '张三',
'编号': '00000300000',
'性别': '男',
'生日': '2022-02-02 12:12:12'
}, {
'姓名': '李四',
'编号': '020',
'性别': '男',
'生日': '2011-01-01 11:11:11'
}, {
'姓名': '王五',
'编号': '0101010',
'性别': '女',
'生日': '2022-09-14 10:10:10'
}];
//自定义导出顺序,默认是对象里的顺序
let header = ['姓名', '生日', '性别', '编号'];
// 新建空workbook,然后加入worksheet
const ws = XLSX.utils.json_to_sheet(data, { header: header });
console.log(ws);
// 设置每列的列宽,10代表10个字符,注意中文占2个字符
ws['!cols'] = [
{ wch: 10 },
{ wch: 30 },
{ wch: 8 },
{ wch: 20 }
];
// 设置A1-B1的单元格合并
// ws['!merges'] = [
// {
// s: { //开始
// r: 0, //开始行
// c: 0, //开始列
// },
// e: { //结束
// r: 0, //结束行
// c: 1, //结束列
// }
// }
// ];
// 新建book
const wb = XLSX.utils.book_new();
// 生成xlsx文件(book,sheet数据,sheet命名)
XLSX.utils.book_append_sheet(wb, ws, '数据详情');
// 写文件(book,xlsx文件名称)
XLSX.writeFile(wb, '列表详情.xlsx');
};
</script>
</html>