使用js将html的表格导出到excel |
您所在的位置：网站首页 › 将网页的表格导入excel › 使用js将html的表格导出到excel |
使用js将html的表格导出到excel
|
工作中存在需要将页面的某个表格导出到excel中,虽然可以使用后端代码或者前端插件实现，但是过程过于繁琐，本文章将详细讲解如何使用js将html中表格快速导出到excel（支持各种前端框架表格，element、layui、bootstarp）。 示例 1.页面原table2excel导出复杂表头可能会有问题，还有数据过长会有显示不全的问题，所以本文章中的table2excel有改造部分，可支持复杂表头以及修复长数据显示不全的问题。 2.使用 /** * 导出 * @param tableId table所在容器id * @param excelName 导出表格名称 */ function onImport(tableId, excelName,) { $("#" + tableId).table2excel({ exclude: ".noExl",//过滤位置的 css 类名 filename: excelName + ".xls",//文件名 name: "Excel Document Name.xlsx", exclude_img: true, //是否表格中的图片 exclude_links: true, exclude_inputs: true, }); } 3. 完整代码 表格导出demo 简单表头 导出 复杂表头 导出 var index = new Vue({ el: '#app', data: { tableData1: [{ date: '2016-05-02', name: '王小虎1', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎2', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎3', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎4', address: '上海市普陀区金沙江路 1516 弄' }], tableData2: [{ date: '2016-05-03', name: '王小虎1', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-02', name: '王小虎2', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-04', name: '王小虎3', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 },], }, created() { }, methods: { dowloadDemo1(name) { onImport('demo1', '测试表格1'); }, dowloadDemo2(name) { onImport('demo2', '测试表格2'); } } }); /** * 导出 * @param tableId table所在容器id * @param excelName 导出表格名称 */ function onImport(tableId, excelName,) { $("#" + tableId).table2excel({ exclude: ".noExl",//过滤位置的 css 类名 filename: excelName + ".xls",//文件名 name: "Excel Document Name.xlsx", exclude_img: true, //是否表格中的图片 exclude_links: true, exclude_inputs: true, }); } 4. 下载项目download.csdn.net/download/qq… |
【本文地址】
今日新闻 |
推荐新闻 |