속도 템플릿에 HTML 테이블이 있습니다. 모든 브라우저와 호환되는 Java 스크립트 또는 jquery를 사용하여 html 테이블 데이터를 Excel로 내보내고 싶습니다. 아래 스크립트를 사용하고 있습니다.
<script type="text/javascript">
function ExportToExcel(mytblId){
var htmltable= document.getElementById('my-table-id');
var html = htmltable.outerHTML;
window.open('data:application/vnd.ms-excel,' + encodeURIComponent(html));
}
</script>
이 스크립트는 Mozilla Firefox 에서 잘 작동 하며 Excel 대화 상자와 함께 팝업되고 열기 또는 저장 옵션을 요청합니다. 그러나 Chrome 브라우저 에서 동일한 스크립트를 테스트했을 때 예상대로 작동하지 않으며 버튼을 클릭하면 Excel에 대한 팝업이 없습니다. 데이터는 “file type : file”, 확장자가 .xls 와 같은 파일로 다운로드
됩니다. Chrome 콘솔에 오류가 없습니다.
Jsfiddle 예 :
http://jsfiddle.net/insin/cmewv/
이것은 mozilla에서는 잘 작동하지만 크롬에서는 작동하지 않습니다.
Chrome 브라우저 테스트 사례 :
첫 번째 이미지 : Excel로 내보내기 버튼을 클릭합니다.
결과 :
답변
Excel 내보내기 스크립트는 IE7 +, Firefox 및 Chrome에서 작동합니다.
function fnExcelReport()
{
var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
var textRange; var j=0;
tab = document.getElementById('headerTable'); // id of table
for(j = 0 ; j < tab.rows.length ; j++)
{
tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
//tab_text=tab_text+"</tr>";
}
tab_text=tab_text+"</table>";
tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer
{
txtArea1.document.open("txt/html","replace");
txtArea1.document.write(tab_text);
txtArea1.document.close();
txtArea1.focus();
sa=txtArea1.document.execCommand("SaveAs",true,"Say Thanks to Sumit.xls");
}
else //other browser not tested on IE 11
sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
return (sa);
}
빈 iframe을 만드십시오.
<iframe id="txtArea1" style="display:none"></iframe>
다음에서이 함수를 호출합니다.
<button id="btnExport" onclick="fnExcelReport();"> EXPORT </button>
답변
Datatable 플러그인은 목적을 가장 잘 해결하고 HTML 테이블 데이터를 Excel, PDF, TEXT로 내보낼 수 있습니다. 쉽게 구성 할 수 있습니다.
아래 데이터 테이블 참조 링크에서 전체 예를 찾으십시오.
https://datatables.net/extensions/buttons/examples/html5/simple.html
(데이터 테이블 참조 사이트의 스크린 샷)
답변
이것은 도움이 될 수 있습니다
function exportToExcel(){
var htmls = "";
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]--></head><body><table>{table}</table></body></html>';
var base64 = function(s) {
return window.btoa(unescape(encodeURIComponent(s)))
};
var format = function(s, c) {
return s.replace(/{(\w+)}/g, function(m, p) {
return c[p];
})
};
htmls = "YOUR HTML AS TABLE"
var ctx = {
worksheet : 'Worksheet',
table : htmls
}
var link = document.createElement("a");
link.download = "export.xls";
link.href = uri + base64(format(template, ctx));
link.click();
}
답변
http://wsnippets.com/export-html-table-data-excel-sheet-using-jquery/
이 링크를 시도하면 문제가 해결 될 수 있습니다.
답변
window.open사용하는 대신 onclick이벤트 와 함께 링크를 사용할 수 있습니다 .
그리고 html 테이블을 uri에 넣고 다운로드 할 파일 이름을 설정할 수 있습니다.
라이브 데모 :
function exportF(elem) {
var table = document.getElementById("table");
var html = table.outerHTML;
var url = 'data:application/vnd.ms-excel,' + escape(html); // Set your html table into url
elem.setAttribute("href", url);
elem.setAttribute("download", "export.xls"); // Choose the file name
return false;
}<table id="table" border="1">
<tr>
<td>
Foo
</td>
<td>
Bar
</td>
</tr>
</table>
<a id="downloadLink" onclick="exportF(this)">Export to excel</a>답변
TableExport -HTML 테이블을 xlsx, xls, csv 및 txt 파일로 내보내는 간단하고 구현하기 쉬운 라이브러리입니다.
이 라이브러리를 사용하려면 TableExport생성자를 호출하면됩니다 .
new TableExport(document.getElementsByTagName("table"));
// OR simply
TableExport(document.getElementsByTagName("table"));
// OR using jQuery
$("table").tableExport();
테이블, 버튼 및 내 보낸 데이터의 모양과 느낌을 사용자 지정하기 위해 추가 속성을 전달할 수 있습니다. 여기에서 더 많은 정보를보십시오
답변
이 예의 병합 :
https://www.codexworld.com/export-html-table-data-to-excel-using-javascript
https://bl.ocks.org/Flyer53/1de5a78de9c89850999c
function exportTableToExcel(tableId, filename) {
let dataType = 'application/vnd.ms-excel';
let extension = '.xls';
let base64 = function(s) {
return window.btoa(unescape(encodeURIComponent(s)))
};
let 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>';
let render = function(template, content) {
return template.replace(/{(\w+)}/g, function(m, p) { return content[p]; });
};
let tableElement = document.getElementById(tableId);
let tableExcel = render(template, {
worksheet: filename,
table: tableElement.innerHTML
});
filename = filename + extension;
if (navigator.msSaveOrOpenBlob)
{
let blob = new Blob(
[ '\ufeff', tableExcel ],
{ type: dataType }
);
navigator.msSaveOrOpenBlob(blob, filename);
} else {
let downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.href = 'data:' + dataType + ';base64,' + base64(tableExcel);
downloadLink.download = filename;
downloadLink.click();
}
}
