JavaScript를 사용하여 HTML 테이블 데이터를 Excel로 내보내기 / JQuery가 Chrome 브라우저에서 제대로 작동하지 않습니다.

code

JavaScript를 사용하여 HTML 테이블 데이터를 Excel로 내보내기 / JQuery가 Chrome 브라우저에서 제대로 작동하지 않습니다.

codestyles 2020. 9. 23. 07:39

JavaScript를 사용하여 HTML 테이블 데이터를 Excel로 내보내기 / JQuery가 Chrome 브라우저에서 제대로 작동하지 않습니다.

속도 템플릿에 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/ 이 링크를 시도하면 문제가 해결 될 수 있습니다.

여기에 이미지 설명 입력

TableExport -HTML 테이블을 xlsx, xls, csv 및 txt 파일로 내보내는 간단하고 구현하기 쉬운 라이브러리입니다.

이 라이브러리를 사용하려면 TableExport생성자를 호출하면됩니다 .

new TableExport(document.getElementsByTagName("table"));

// OR simply

TableExport(document.getElementsByTagName("table"));

// OR using jQuery

$("table").tableExport();

테이블, 버튼 및 내 보낸 데이터의 모양과 느낌을 사용자 지정하기 위해 추가 속성을 전달할 수 있습니다. 여기에서 더 많은 정보를보십시오

이를 위해 ShieldUI와 같은 라이브러리를 사용할 수 있습니다.

널리 사용되는 XML 및 XLSX Excel 형식으로 내보내기를 지원합니다.

자세한 내용은 여기 : http://demos.shieldui.com/web/grid-general/export-to-excel

sampopes와 관련하여 2014 년 6 월 6 일 11:59 :

Excel 데이터를 더 크게 표시하기 위해 글꼴 크기가 20px 인 CSS 스타일을 삽입했습니다. sampopes 코드에서 선행 <tr>태그가 누락되었으므로 먼저 헤드 라인을 출력하고 루프 내의 다른 테이블 행보다 먼저 출력합니다.

function fnExcelReport()
{
    var tab_text = '<table border="1px" style="font-size:20px" ">';
    var textRange; 
    var j = 0;
    var tab = document.getElementById('DataTableId'); // id of table
    var lines = tab.rows.length;

    // the first headline of the table
    if (lines > 0) {
        tab_text = tab_text + '<tr bgcolor="#DFDFDF">' + tab.rows[0].innerHTML + '</tr>';
    }

    // table data lines, loop starting from 1
    for (j = 1 ; j < lines; j++) {     
        tab_text = tab_text + "<tr>" + tab.rows[j].innerHTML + "</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
    // console.log(tab_text); // aktivate so see the result (press F12 in browser)

    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE "); 

     // if Internet Explorer
    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
        txtArea1.document.open("txt/html","replace");
        txtArea1.document.write(tab_text);
        txtArea1.document.close();
        txtArea1.focus(); 
        sa = txtArea1.document.execCommand("SaveAs", true, "DataTableExport.xls");
    }  
    else // other browser not tested on IE 11
        sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  

    return (sa);
}

 function exportToExcel() {
        var tab_text = "<tr bgcolor='#87AFC6'>";
        var textRange; var j = 0, rows = '';
        tab = document.getElementById('student-detail');
        tab_text = tab_text + tab.rows[0].innerHTML + "</tr>";
        var tableData = $('#student-detail').DataTable().rows().data();
        for (var i = 0; i < tableData.length; i++) {
            rows += '<tr>'
                + '<td>' + tableData[i].value1 + '</td>'
                + '<td>' + tableData[i].value2 + '</td>'
                + '<td>' + tableData[i].value3 + '</td>'
                + '<td>' + tableData[i].value4 + '</td>'
                + '<td>' + tableData[i].value5 + '</td>'
                + '<td>' + tableData[i].value6 + '</td>'
                + '<td>' + tableData[i].value7 + '</td>'
                + '<td>' +  tableData[i].value8 + '</td>'
                + '<td>' + tableData[i].value9 + '</td>'
                + '<td>' + tableData[i].value10 + '</td>'
                + '</tr>';
        }
        tab_text += rows;
        var data_type = '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 border="2px">{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];
                })
            }

        var ctx = {
            worksheet: "Sheet 1" || 'Worksheet',
            table: tab_text
        }
        document.getElementById("dlink").href = data_type + base64(format(template, ctx));
        document.getElementById("dlink").download = "StudentDetails.xls";
        document.getElementById("dlink").traget = "_blank";
        document.getElementById("dlink").click();
    }

여기서 값 1에서 10은 얻는 열 이름입니다.

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>

내 버전의 @sampopes 답변

function exportToExcel(that, id, hasHeader, removeLinks, removeImages, removeInputParams) {
if (that == null || typeof that === 'undefined') {
    console.log('Sender is required');
    return false;
}

if (!(that instanceof HTMLAnchorElement)) {
    console.log('Sender must be an anchor element');
    return false;
}

if (id == null || typeof id === 'undefined') {
    console.log('Table id is required');
    return false;
}
if (hasHeader == null || typeof hasHeader === 'undefined') {
    hasHeader = true;
}
if (removeLinks == null || typeof removeLinks === 'undefined') {
    removeLinks = true;
}
if (removeImages == null || typeof removeImages === 'undefined') {
    removeImages = false;
}
if (removeInputParams == null || typeof removeInputParams === 'undefined') {
    removeInputParams = true;
}

var tab_text = "<table border='2px'>";
var textRange;

tab = $(id).get(0);

if (tab == null || typeof tab === 'undefined') {
    console.log('Table not found');
    return;
}

var j = 0;

if (hasHeader && tab.rows.length > 0) {
    var row = tab.rows[0];
    tab_text += "<tr bgcolor='#87AFC6'>";
    for (var l = 0; l < row.cells.length; l++) {
        if ($(tab.rows[0].cells[l]).is(':visible')) {//export visible cols only
            tab_text += "<td>" + row.cells[l].innerHTML + "</td>";
        }
    }
    tab_text += "</tr>";
    j++;
}

for (; j < tab.rows.length; j++) {
    var row = tab.rows[j];
    tab_text += "<tr>";
    for (var l = 0; l < row.cells.length; l++) {
        if ($(tab.rows[j].cells[l]).is(':visible')) {//export visible cols only
            tab_text += "<td>" + row.cells[l].innerHTML + "</td>";
        }
    }
    tab_text += "</tr>";
}

tab_text = tab_text + "</table>";
if (removeLinks)
    tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, "");
if (removeImages)
    tab_text = tab_text.replace(/<img[^>]*>/gi, ""); 
if (removeInputParams)
    tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, "");

var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");

if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer
{
    myIframe.document.open("txt/html", "replace");
    myIframe.document.write(tab_text);
    myIframe.document.close();
    myIframe.focus();
    sa = myIframe.document.execCommand("SaveAs", true, document.title + ".xls");
    return true;
}
else {
    //other browser tested on IE 11
    var result = "data:application/vnd.ms-excel," + encodeURIComponent(tab_text);
    that.href = result;
    that.download = document.title + ".xls";
    return true;
}
}

iframe이 필요합니다.

<iframe id="myIframe" style="opacity: 0; width: 100%; height: 0px;" seamless="seamless"></iframe>

용법

$("#btnExportToExcel").click(function () {
    exportToExcel(this, '#mytable');
});

이 예의 병합 :

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();
    }
}

참고 URL : https://stackoverflow.com/questions/22317951/export-html-table-data-to-excel-using-javascript-jquery-is-not-working-properl

'code' 카테고리의 다른 글

Android에서 libGL.so를로드하지 못했습니다. (0)	2020.09.23
C / C ++에서 프로그래밍 방식으로 코어 덤프를 발생시키는 방법 (0)	2020.09.23
Magento 제품 속성 값 가져 오기 (0)	2020.09.23
배포 nodejs 패키지 (Ubuntu)를 사용하여 홈 디렉터리에 NPM 설치 (0)	2020.09.23
섭씨 기호를 웹 페이지로 인코딩하는 가장 좋은 방법은 무엇입니까? (0)	2020.09.23

현재글JavaScript를 사용하여 HTML 테이블 데이터를 Excel로 내보내기 / JQuery가 Chrome 브라우저에서 제대로 작동하지 않습니다.

codestyle

JavaScript를 사용하여 HTML 테이블 데이터를 Excel로 내보내기 / JQuery가 Chrome 브라우저에서 제대로 작동하지 않습니다.

JavaScript를 사용하여 HTML 테이블 데이터를 Excel로 내보내기 / JQuery가 Chrome 브라우저에서 제대로 작동하지 않습니다.

'code' 카테고리의 다른 글

'code'의 다른글

티스토리툴바

JavaScript를 사용하여 HTML 테이블 데이터를 Excel로 내보내기 / JQuery가 Chrome 브라우저에서 제대로 작동하지 않습니다.

JavaScript를 사용하여 HTML 테이블 데이터를 Excel로 내보내기 / JQuery가 Chrome 브라우저에서 제대로 작동하지 않습니다.

'code' 카테고리의 다른 글

'code'의 다른글

관련글

티스토리툴바