基于JS实现table导出Excel并保留样式
浏览器环境：谷歌浏览器
1.在导出Excel的时候，保存table的样式，有2种方法，①是在table的行内写style样式，②是在模板里面添加样式
2.第一种方式：行内添加样式
<td>公司一</td>
效果：
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table td {
font-size: 12px;
width: 200px;
height: 30px;
text-align: center;
background-color: #4f891e;
color: #ffffff;
}
</style>
</head>
<body>
<a download="table导出Excel" id="excelOut" href="#" rel="external nofollow" rel="external nofollow" >table导出Excel</a>
<table cellspacing="0" cellpadding="0" border="1" id="tableToExcel">
<thead>
<tr>
<td style="font-size: 18px">公司一</td>
<td>公司二一</td>
<td>公司三</td>
</tr>
</thead>
<tbody>
<tr>
<td>A公司</td>
<td>B公司</td>
<td>C公司</td>
</tr>
<tr>
<td>A公司</td>
<td>B公司</td>
<td>C公司</td>
</tr>
<tr>
<td>A公司</td>
<td>B公司</td>
<td>C公司</td>
</tr>
<tr>
<td colspan="3">共计</td>
</tr>
</tbody>
</table>
<script>
window.onload = function () {
tableToExcel('tableToExcel', '下载模板')
};
//base64转码
var base64 = function (s) {
return window.btoa(unescape(encodeURIComponent(s)));
};
//替换table数据和worksheet名字
var format = function (s, c) {
return s.replace(/{(\w+)}/g,
function (m, p) {
return c[p];
});
}
function tableToExcel(tableid, sheetName) {
var uri = 'data:application/vnd.ms-excel;base64,';
var 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><!--[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]-->' +
' <style type="text/css">' +
'table td {' +
'border: 1px solid #000000;' +
'width: 200px;' +
'height: 30px;' +
' text-align: center;' +
'background-color: #4f891e;' +
'color: #ffffff;' +
' }' +
'</style>' +
'</head><body ><table class="excelTable">{table}</table></body></html>';
if (!tableid.nodeType) tableid = document.getElementById(tableid);
var ctx = {worksheet: sheetName || 'Worksheet', table: tableid.innerHTML};
document.getElementById("excelOut").href = uri + base64(format(template, ctx));
}
</script>
</body>
</html>
3.第二种方式：在模板里面里面添加样式
在这里面添加的样式excel就能找到和识别了
var 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><!--[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]-->' +
' <style type="text/css">' +
'table td {' +
'border: 1px solid #000000;' +
'width: 200px;' +
'height: 30px;' +
' text-align: center;' +
'background-color: #4f891e;' +
'color: #ffffff;' +
' }' +
'</style>' +
'</head><body ><table class="excelTable">{table}</table></body></html>';
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table td {
font-size: 12px;
width: 200px;
height: 30px;
text-align: center;
background-color: #4f891e;
color: #ffffff;
}
</style>
</head>
<body>
<a download="table导出Excel" id="excelOut" href="#" rel="external nofollow" rel="external nofollow" >table导出Excel</a>
<table cellspacing="0" cellpadding="0" border="1" id="tableToExcel">
<thead>
<tr>
<td >公司一</td>
<td>公司二一</td>
<td>公司三</td>
</tr>
</thead>
<tbody>
<tr>
<td>A公司</td>
<td>B公司</td>
<td>C公司</td>
</tr>
<tr>
<td>A公司</td>
<td>B公司</td>
<td>C公司</td>
</tr>
<tr>
<td>A公司</td>
<td>B公司</td>
<td>C公司</td>
</tr>
<tr>
<td colspan="3">共计</td>
</tr>
</tbody>
</table>
<script>
window.onload = function () {
tableToExcel('tableToExcel', '下载模板')
};
//base64转码
var base64 = function (s) {
return window.btoa(unescape(encodeURIComponent(s)));
};
//替换table数据和worksheet名字
var format = function (s, c) {
return s.replace(/{(\w+)}/g,
function (m, p) {
return c[p];
});
}
function tableToExcel(tableid, sheetName) {
var uri = 'data:application/vnd.ms-excel;base64,';
var 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><!--[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]-->' +
' <style type="text/css">' +
'table td {' +
'border: 1px solid #000000;' +
'width: 200px;' +
'height: 30px;' +
' text-align: center;' +
'background-color: #4f891e;' +
'color: #ffffff;' +
' }' +
'</style>' +
'</head><body ><table class="excelTable">{table}</table></body></html>';
if (!tableid.nodeType) tableid = document.getElementById(tableid);
var ctx = {worksheet: sheetName || 'Worksheet', table: tableid.innerHTML};
document.getElementById("excelOut").href = uri + base64(format(template, ctx));
}
</script>
</body>
</html>
完整代码
注意：如果同时添加了行内样式和模板样式，行内的样式会覆盖模板的样式
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript将Table导出到Excel实现思路及代码
复制代码 代码如下: function copyToExcel(tableid) { //控制按钮 var btn = document.getElementById("copy"); btn.setAttribute("disabled", "true"); btn.setAttribute("value", "处理中..."); var curTbl = document.getElementById(
-
js导出table到excel同时兼容FF和IE示例
复制代码 代码如下: <pre name="code" class="html">前台调用(第一个参数是table的id): <input value="导出" type="button" /> function toExcel(inTblId, inWindow) { if ($.browser.msie) { //如果是IE浏览器 try { var allStr = ""; v
-
js导出table数据到excel即导出为EXCEL文档的方法
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
-
javascript 导出数据到Excel(处理table中的元素)
做法: 修改Input的outerHTML; 具体例子: 复制代码 代码如下: function resetInput() { var controls = document.getElementsByTagName('input'); for(var i=0; i<controls.length; i++){ if(controls[i].type=='text') { if(controls[i].value =="") { controls[i].outerHTML=&qu
-
C#实现Json转DataTable并导出Excel的方法示例
本文实例讲述了C#实现Json转DataTable并导出Excel的方法.分享给大家供大家参考,具体如下: 需求:有一个log文件,需要整理成Excel,日志文件里面的数据都是json字符串 思路是,把Json字符串转换成DataTable,然后导出到Excel 在网上找了一些资料,整理了以下三种类型的Json 一.Json转换DataTable 1.处理简单Json: [{"mac":"20:f1:7c:c5:cd:80","rssi":&qu
-
Jsp中的table多表头导出excel文件具体实现
首先引入两份JS:copyhtmltoexcel.js以及 tableToExcel.js 复制代码 代码如下: /* * 默认转换实现函数,如果需要其他功能,需自行扩展 * 参数: * tableID : HTML中Table对象id属性值 * 详细用法参见以下 TableToExcel 对象定义 */function saveAsExcel(tableID){ var tb = new TableToExcel(tableID); tb.setFontStyle("Cour
-
Js 导出table内容到Excel的简单实例
复制代码 代码如下: function ExportToExcel(tableId) //读取表格中每个单元到EXCEL中 { try{ var curTbl = document.getElementById(tableId); var oXL = new ActiveXObject("Excel.Application"); //创建AX对象excel var o
-
基于JS实现table导出Excel并保留样式
浏览器环境:谷歌浏览器 1.在导出Excel的时候,保存table的样式,有2种方法,①是在table的行内写style样式,②是在模板里面添加样式 2.第一种方式:行内添加样式 <td>公司一</td> 效果: 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</
-
JavaWeb动态导出Excel可弹出下载
由于项目需求,需要将数据导出成Excel表格,并且可选择导出项,可下载.项目使用的Spring+Mybatis+SpringMVC框架,利用Apache POI导出Excel.POI具体使用请自行百度.话不多说,上代码. ExportExcelUtil代码 package com.rixin.common.util; import java.io.OutputStream; import java.lang.reflect.Method; import java.net.URLEncoder;
-
Vue通过Blob对象实现导出Excel功能示例代码
不同的项目有不同的导出需求,有些只导出当前所显示结果页面的表格进入excel,这个时候就有很多插件,比如vue-json-excel或者是Blob.js+Export2Excel.js来实现导出Excel功能.但是有些需求因为数据量太大,成千上万条数据,所以是需要后端拼接,然后输出二进制流文件,然后前端直接下载,这次我们谈谈后者的做法. Blob对象表示一个不可变.原始数据的类文件对象,通常我也叫它二进制流对象.我们可以通过Blob对象实现导出Excel功能,先放上代码: <el-button
-
js基于FileSaver.js 浏览器导出Excel文件的示例
本文介绍了js基于FileSaver.js 浏览器导出Excel文件,分享给大家,也给自己做个笔记 限制一:不同浏览器对 blob 对象有不同的限制 具体看看下面这个表格(出自FileSaver.js): Browser Constructs as Filenames Max Blob Size Dependencies Firefox 20+ Blob Yes 800 MiB None Firefox < 20 data: URI No n/a Blob.js Chrome Blob Yes
-
纯JS将table表格导出到excel的方法
html <div > <button type="button" onclick="getXlsFromTbl('tableExcel','myDiv')">IE导出Excel方法</button> <button type="button" onclick="method5('tableExcel')">Chrome导出Excel</button> </di
-
JS调用页面表格导出excel示例代码
使用JS方法调用页面表格导出excel有很大的限制: 1.目前试了几个浏览器,只有IE支持, 2.点击 工具---安全---自定义级别---ActiveX 相关选项启用 下面是html代码 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath()
-
js导出excel文件的简洁方法(推荐)
用js可以直接在jsp页面导出数据到excel文件,方法很简洁,如下: 第一,准备一个jsp(暂时取名为export.jsp),内容为: <%@ page contentType="text/html; charset=GBK"%> <% String context = request.getParameter("sContent"); response.setHeader("Content-type","appli
-
JS实现导出Excel的五种方法详解【附源码下载】
本文实例讲述了JS实现导出Excel的五种方法.分享给大家供大家参考,具体如下: 这五种方法前四种方法只支持IE浏览器,最后一个方法支持当前主流的浏览器(火狐,IE,Chrome,Opera,Safari) <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>html 表格导出道</title> <sc
-
JS实现导出Excel和CSV文件操作
一.js导出Excel <html> <head> </head> <body> <script type="text/javascript" src="./xlsx.core.min.js"></script> <script type="text/javascript"> /** * 通用的打开下载对话框方法,没有测试过具体兼容性 * @param url 下