基于JS實(shí)現(xiàn)table導(dǎo)出Excel并保留樣式
瀏覽器環(huán)境：谷歌瀏覽器
1.在導(dǎo)出Excel的時(shí)候，保存table的樣式，有2種方法，①是在table的行內(nèi)寫style樣式，②是在模板里面添加樣式
2.第一種方式：行內(nèi)添加樣式
<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導(dǎo)出Excel' href='http://www.gepszalag.com/bcjs/14642.html#' rel='external nofollow' rel='external nofollow' >table導(dǎo)出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'>共計(jì)</td> </tr> </tbody></table><script> window.onload = function () { tableToExcel(’tableToExcel’, ’下載模板’) }; //base64轉(zhuǎn)碼 var base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))); }; //替換table數(shù)據(jù)和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就能找到和識(shí)別了
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導(dǎo)出Excel' href='http://www.gepszalag.com/bcjs/14642.html#' rel='external nofollow' rel='external nofollow' >table導(dǎo)出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'>共計(jì)</td> </tr> </tbody></table><script> window.onload = function () { tableToExcel(’tableToExcel’, ’下載模板’) }; //base64轉(zhuǎn)碼 var base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))); }; //替換table數(shù)據(jù)和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>完整代碼
注意：如果同時(shí)添加了行內(nèi)樣式和模板樣式，行內(nèi)的樣式會(huì)覆蓋模板的樣式
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
網(wǎng)公網(wǎng)安備