vue将json数据以表格的形式展示渲染在页面中，并提供导出功能
点击导出执行下面的方法tableToExcel
//导出文件时进行编码
function base64(s) {
return window.btoa(unescape(encodeURIComponent(s)));
}
methods:{
tableToExcel() {
// 要导出的json数据
const jsonData = "json数据";
// 列标题
let str = ’<tr><td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xx</td></tr>`‘
// 循环遍历，每行加入tr标签，每个单元格加td标签
for (let i = 0; i < jsonData.length; i++) {
str += '<tr>';
for (const item in jsonData[i]) {
// 增加\t为了不让表格显示科学计数法或者其他格式
if (Object.prototype.hasOwnProperty.call(item, jsonData[i])) {
str += `<td>${jsonData[i][item]}\t</td>`;
}
}
str += '</tr>';
}
// Worksheet名
const worksheet = 'xxx', //文件名称
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 http-equiv= 'Content-Type' content='text/html'; 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>${str}</table></body></html>`,
// 下载模板
elink = document.createElement('a');
elink.download = '文件名称.xls';
elink.style.display = 'none';
elink.href = uri + base64(template); //base64编码
document.body.appendChild(elink);
elink.click();
document.body.removeChild(elink);
// window.location.href = uri + base64(template);
},
}
1681
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
