介绍 & lt; !DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title> Title
& lt; style>
表td {
字体大小:12 px;
宽度:200 px;
高度:30 px;
text-align:中心;
background - color: # 4 f891e;
颜色:# ffffff;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt;下载=氨淼汲鯡xcel"id=癳xcelOut"href=?”;rel=巴獠縩ofollow"rel=巴獠縩ofollow"在表导出Excel
& lt;表格单元格间距=?”;单元格边距=?”;边境=?”;id=皌ableToExcel"比;
& lt; thead>
& lt; tr>
& lt; td祝辞公司一& lt;/td>
& lt; td>公司二一& lt;/td>
& lt; td>公司三& lt;/td>
& lt;/tr>
& lt;/thead>
& lt; tbody>
& lt; tr>
& lt; td>公司& lt;/td>
& lt; td> B公司& lt;/td>
& lt; td> C公司& lt;/td>
& lt;/tr>
& lt; tr>
& lt; td>公司& lt;/td>
& lt; td> B公司& lt;/td>
& lt; td> C公司& lt;/td>
& lt;/tr>
& lt; tr>
& lt; td>公司& lt;/td>
& lt; td> B公司& lt;/td>
& lt; td> C公司& lt;/td>
& lt;/tr>
& lt; tr>
& lt; td colspan=?“在共计& lt;/td>
& lt;/tr>
& lt;/tbody>
& lt;/table>
& lt; script>
窗口。onload=function () {
tableToExcel (& # 39; tableToExcel& # 39;, & # 39;下载模板& # 39;)
}；//base64转码
var base64=function (s) {
返回window.btoa (unescape (encodeURIComponent (s)));
}；//替换表数据和工作表名字
var格式=函数(s、c) {
返回s.replace (/{(\ w +)}/g,
函数(m, p) {
返回c [p];
}）；
}
函数tableToExcel (tableid sheetName) {
var uri=& # 39;数据:应用程序/vnd.ms-excel; base64 & # 39;;
var模板=& # 39;& lt; html xmlns: o=皍rn: schemas-microsoft-com:办公室:office"xmlns: x=皍rn: schemas-microsoft-com:办公室:excel" & # 39;+
& # 39;xmlns=癶ttp://www.w3.org/TR/REC-html40"祝辞& lt; head> & lt; !——(如果gte美索9)祝辞& lt; xml> & lt; x: ExcelWorkbook> & lt; x: ExcelWorksheets> & lt; x: ExcelWorksheet> & # 39;
+ & # 39;& lt; x: Name>{工作表}& lt;/x: Name> & lt; x: WorksheetOptions> & lt; x: DisplayGridlines/祝辞& lt;/x: WorksheetOptions> & lt;/x: ExcelWorksheet> & lt;/x: ExcelWorksheets> & # 39;
+ & # 39;& lt;/x: ExcelWorkbook> & lt;/xml> & lt; ! [endif]——祝辞& # 39;+
& # 39;& lt;风格类型=拔谋?css"祝辞& # 39;+
& # 39;表td {& # 39;+
& # 39;边界:1 px固体# 000000;& # 39;+
& # 39;宽度:200 px; & # 39;+
& # 39;高度:30 px; & # 39;+
& # 39;text-align:中心;& # 39;+
& # 39;background - color: # 4 f891e; & # 39;+
& # 39;颜色:# ffffff, & # 39;+
& # 39;}& # 39;+
& # 39;& lt;/style> & # 39;+
& # 39;& lt;/head> & lt;身体祝辞& lt;表类=癳xcelTable"在{表}& lt;/table> & lt;/body> & lt;/html> & # 39;;
如果(! tableid.nodeType) tableid=. getelementbyid (tableid);
var ctx={工作表:sheetName | | & # 39;工作表# 39;,表:tableid.innerHTML};
. getelementbyid (“excelOut")。href=uri + base64(格式(模板,ctx));
}
& lt;/script>
& lt;/body>
& lt;/html>
这篇文章主要为大家展示了基于JS怎么实现表导出Excel并保留样式,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。
浏览器环境:谷歌浏览器
1。在导出Excel的时候,保存表的样式,有2种方法,①是在表的行内写风格样式,②是在模板里面添加样式
2。第一种方式:行内添加样式
& lt; td>公司一& lt;/td>
效果:
完整代码:
3。第二种方式:在模板里面里面添加样式
在这里面添加的样式excel就能找到和识别了
var模板=& # 39;& lt; html xmlns: o=皍rn: schemas-microsoft-com:办公室:office"xmlns: x=皍rn: schemas-microsoft-com:办公室:excel" & # 39;+
& # 39;xmlns=癶ttp://www.w3.org/TR/REC-html40"祝辞& lt; head> & lt; !——(如果gte美索9)祝辞& lt; xml> & lt; x: ExcelWorkbook> & lt; x: ExcelWorksheets> & lt; x: ExcelWorksheet> & # 39;
+ & # 39;& lt; x: Name>{工作表}& lt;/x: Name> & lt; x: WorksheetOptions> & lt; x: DisplayGridlines/祝辞& lt;/x: WorksheetOptions> & lt;/x: ExcelWorksheet> & lt;/x: ExcelWorksheets> & # 39;
+ & # 39;& lt;/x: ExcelWorkbook> & lt;/xml> & lt; ! [endif]——祝辞& # 39;+
& # 39;& lt;风格类型=拔谋?css"祝辞& # 39;+
& # 39;表td {& # 39;+
& # 39;边界:1 px固体# 000000;& # 39;+
& # 39;宽度:200 px; & # 39;+
& # 39;高度:30 px; & # 39;+
& # 39;text-align:中心;& # 39;+
& # 39;background - color: # 4 f891e; & # 39;+
& # 39;颜色:# ffffff, & # 39;+
& # 39;}& # 39;+
& # 39;& lt;/style> & # 39;+
& # 39;& lt;/head> & lt;身体祝辞& lt;表类=癳xcelTable"在{表}& lt;/table> & lt;/body> & lt;/html> & # 39;; 基于JS怎么实现表导出Excel并保留样式
