반응형
javascript/jquery를 사용하여 excel로 내보낸 후 HTML 테이블 스타일 유지
저는 jsfiddle의 아름다운 html 테이블을 가지고 있는데, 이 테이블을 엑셀 문서로 변환하고 싶습니다.나의 문제는 엑셀 파일을 만든 후입니다.테이블의 글꼴 색, 패딩, 배경 색과 같은 Excel 스타일이 손실됩니다.등 이것에 대한 해결책이 있습니까?
HTML
<table id="testTable" summary="Code page support in different versions of MS Windows." rules="groups" frame="hsides" border="2"><caption>CODE-PAGE SUPPORT IN MICROSOFT WINDOWS</caption><colgroup align="center"></colgroup><colgroup align="left"></colgroup><colgroup span="2" align="center"></colgroup><colgroup span="3" align="center"></colgroup><thead valign="top"><tr><th>Code-Page<br>ID</th><th>Name</th><th>ACP</th><th>OEMCP</th><th>Windows<br>NT 3.1</th><th>Windows<br>NT 3.51</th><th>Windows<br>95</th></tr></thead><tbody><tr><td>1200</td><td style="background-color: #00f; color: #fff">Unicode (BMP of ISO/IEC-10646)</td><td></td><td></td><td>X</td><td>X</td><td>*</td></tr><tr><td>1250</td><td style="font-weight: bold">Windows 3.1 Eastern European</td><td>X</td><td></td><td>X</td><td>X</td><td>X</td></tr><tr><td>1251</td><td>Windows 3.1 Cyrillic</td><td>X</td><td></td><td>X</td><td>X</td><td>X</td></tr><tr><td>1252</td><td>Windows 3.1 US (ANSI)</td><td>X</td><td></td><td>X</td><td>X</td><td>X</td></tr><tr><td>1253</td><td>Windows 3.1 Greek</td><td>X</td><td></td><td>X</td><td>X</td><td>X</td></tr><tr><td>1254</td><td>Windows 3.1 Turkish</td><td>X</td><td></td><td>X</td><td>X</td><td>X</td></tr><tr><td>1255</td><td>Hebrew</td><td>X</td><td></td><td></td><td></td><td>X</td></tr><tr><td>1256</td><td>Arabic</td><td>X</td><td></td><td></td><td></td><td>X</td></tr><tr><td>1257</td><td>Baltic</td><td>X</td><td></td><td></td><td></td><td>X</td></tr><tr><td>1361</td><td>Korean (Johab)</td><td>X</td><td></td><td></td><td>**</td><td>X</td></tr></tbody><tbody><tr><td>437</td><td>MS-DOS United States</td><td></td><td>X</td><td>X</td><td>X</td><td>X</td></tr><tr><td>708</td><td>Arabic (ASMO 708)</td><td></td><td>X</td><td></td><td></td><td>X</td></tr><tr><td>709</td><td>Arabic (ASMO 449+, BCON V4)</td><td></td><td>X</td><td></td><td></td><td>X</td></tr><tr><td>710</td><td>Arabic (Transparent Arabic)</td><td></td><td>X</td><td></td><td></td><td>X</td></tr><tr><td>720</td><td>Arabic (Transparent ASMO)</td><td></td><td>X</td><td></td><td></td><td>X</td></tr></tbody></table>
CSS
body
{
font-size: 12pt;
font-family: Calibri;
padding : 10px;
}
table
{
border: 1px solid black;
}
th
{
border: 1px solid black;
padding: 5px;
background-color:grey;
color: white;
}
td
{
border: 1px solid black;
padding: 5px;
}
input
{
font-size: 12pt;
font-family: Calibri;
}
자바스크립트
var tableToExcel = (function() {
var 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><!--[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>{table}</table></body></html>'
, base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
, format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
return function(table, name) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
window.location.href = uri + base64(format(template, ctx))
}
})()
마침내 저는 그것을 알아냈습니다.내장형 또는 외부 CSS 스타일을 사용하면 작동하지 않습니다.
관찰
- CSS는 인라인이어야 합니다.
- CSS가 켜져 있어야 합니다.
th또는td표의 요소는 Excel의 셀을 나타내기 때문입니다. - 색상은 16진수여야 합니다.
요약
위 코드에서 외부 CSS 스타일은 필요하지 않습니다.내 모든 CSS 스타일은 테이블에 줄을 서야 합니다.
언급URL : https://stackoverflow.com/questions/18467418/retain-html-table-styling-after-exporting-to-excel-using-javascript-jquery
반응형
'programing' 카테고리의 다른 글
| 파이프별 주문 발행 (0) | 2023.09.04 |
|---|---|
| mariadb에 제대로 연결할 수 없습니다. (0) | 2023.09.04 |
| Swift - 두 줄의 텍스트가 있는 UI 버튼 (0) | 2023.09.04 |
| python의 __init_ 상속 및 재정의 (0) | 2023.09.04 |
| 쿼리에서 연속 제한 및 오프셋이 잘못 배치되었습니다. (0) | 2023.09.04 |