반응형
HTML 테이블에서 Excel Javascript로
이 스크립트를 사용하여 HTML 테이블을 Excel 파일에 저장하려고 합니다만, 정상적으로 동작하고 있습니다만, 적절한 이름이 아니고 랜덤 문자열로 표시됩니다.그리고 나는 이유를 알 수 없다.
나는 그것을 다음과 같이 부른다.
<input type="button" onclick="tableToExcel('tablename', 'name')" value="Export to Excel">
코드
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))
}
})()
사용할 수 있습니다.download최신 브라우저에 의해 지원되는 속성a앵커 요소먼저 보이지 않는 앵커를 추가하여 HTML을 수정합니다.
<a id="dlink" style="display:none;"></a>
<input type="button" onclick="tableToExcel('tablename', 'name', 'myfile.xls')" value="Export to Excel">
또, 콜이 기능하고 있는 것에 주의해 주세요.tableToExcel이제 파일 이름을 지정하는 세 번째 매개 변수가 있습니다.
이제 원래 기능의 수정된 코드를 사용합니다.
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, filename) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
document.getElementById("dlink").href = uri + base64(format(template, ctx));
document.getElementById("dlink").download = filename;
document.getElementById("dlink").click();
}
})()
마지막 3개의 코드 행에 주의해 주세요.창에 URL을 할당하는 대신 새 앵커에 URL을 할당한 후 새 URL을 사용합니다.downloadAtribute를 지정 파일명으로 강제 다운로드하고 다음으로 단순 콜을 실행합니다.click()앵커 방식
한번 해보라구요.
업데이트 - utf-8 문자 지원
@WorldSENDER의 코멘트에 의하면, 심플한 것은,meta템플릿의 태그는 엑셀이 힌디어와 같은 utf-8 문자를 지원하도록 합니다.
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"><meta charset="utf-8"/><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>'
위의 3개의 코드 라인은 제 경우는 동작하지 않지만, 여기서 발견한 것이 도움이 되었으면 합니다.
function tableToExcel(table, name, filename) {
let 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"><title></title><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]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></head><body><table>{table}</table></body></html>',
base64 = function(s) { return window.btoa(decodeURIComponent(encodeURIComponent(s))) }, format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; })}
if (!table.nodeType) table = document.getElementById(table)
var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
var link = document.createElement('a');
link.download = filename;
link.href = uri + base64(format(template, ctx));
link.click();
}<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<input
type="button"
onclick="tableToExcel('myTable', 'name', 'myfile.xls')"
value="Export to Excel"
>
<table id="myTable">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>언급URL : https://stackoverflow.com/questions/17126453/html-table-to-excel-javascript
반응형
'programing' 카테고리의 다른 글
| 파일을 다운로드하지 않고 브라우저에서 열기 (0) | 2023.04.21 |
|---|---|
| Swift: 열거형 값을 문자열로 변환하시겠습니까? (0) | 2023.04.21 |
| Azure Web Jobs Dashboard 구성 오류 (0) | 2023.04.21 |
| Wireshark에서의 휴대전화 트래픽 캡처 (0) | 2023.04.21 |
| PowerShell에서 "이 시스템에서 스크립트 실행이 비활성화되었습니다."라고 표시됩니다. (0) | 2023.04.21 |