source

HTML 테이블을 .xlsx 파일로 내보내는 방법

ittop 2023. 9. 9. 10:15
반응형

HTML 테이블을 .xlsx 파일로 내보내는 방법

HTML 테이블xlsx 파일로 내보내는 것에 대해 질문이 있습니다.제가 일을 좀 해서 xls로 수출할 수 있게 되었는데 xlsx로 수출해야 합니다.

여기 jsFiddle이 있습니다. https://jsfiddle.net/272406sv/1/

다음은 나의 HTML입니다.

<table id="toExcel" class="uitable">
  <thead>
    <tr>
      <th>Kampanya Basligi</th>
      <th>Kampanya Türü</th>
      <th>Kampanya Baslangiç</th>
      <th>Kampanya Bitis</th>
      <th style="text-align: center">Aksiyonlar</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="Item in campaign.campaignList">
      <td> Item.CampaignTitle </td>
      <td> Item.CampaignHotelType </td>
      <td> Item.CampaignHotelCheckInDate) </td>
      <td>Item.CampaignHotelCheckOutDate</td>
      <td style="text-align: center">
        <button> Some Action </button>
      </td>
    </tr>
  </tbody>
</table>

<button onclick="exceller()">EXCEL</button>

여기 제 자바스크립트 코드가 있습니다.

<script>
  function exceller() {
    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];
        })
      }
    var toExcel = document.getElementById("toExcel").innerHTML;
    var ctx = {
      worksheet: name || '',
      table: toExcel
    };
    var link = document.createElement("a");
    link.download = "export.xls";
    link.href = uri + base64(format(template, ctx))
    link.click();
  }
</script>

내보내기에 적합한 클라이언트 측 도구html에의 테이블.xlsx,xls,csv, 아니면txtTable Export by clarketm (me) 입니다.다양한 구성 가능한 속성과 메서드가 포함된 단순하고 구현하기 쉬운 완전한 기능을 갖춘 라이브러리입니다.

설치하다

$ npm install tableexport

사용.

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

// OR using jQuery

$("table").tableExport(); 

문서화

시작할 수 있는 샘플 앱

상세한 문서를 확인하거나 Github에서 기능의 전체 목록을 확인해 보십시오.

이 플러그인을 사용하여 .xlsx로 테이블을 내보낼 수 있습니다.

http://sheetjs.com/demos/table.html

Export(내보내기) 표를 봅니다.jquery.jquery 또는 테이블 내보내기.잡동사니

코드 예시

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>HTML table Export</title>  
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="../lib/js-xlsx/xlsx.core.min.js"></script>
    <script type="text/javascript" src="../lib/FileSaver/FileSaver.min.js"></script> 
    <script type="text/javascript" src="../lib/html2canvas/html2canvas.min.js"></script>
    <script type="text/javascript" src="../tableExport.js"></script>
    <script type="text/javaScript">         
        var sFileName = 'ngophi';
        function ExportXLSX(){
            $('#Event').tableExport({fileName: sFileName,
                        type: 'xlsx'
                       });
        }
    </script>
 <style type="text/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;
    }
 </style>
</head>
<body>  
<a href="#" onClick="ExportXLSX();">DownloadXLSX</a> 
<br/>
<br/>
<div id="Event">
    <table>
        <tr>
            <th>Column One</th>
            <th>Column Two</th>
            <th>Column Three</th>
        </tr>
        <tr>
            <td>row1 Col1</td>
            <td>row1 Col2</td>
            <td>row1 Col3</td>
        </tr>
        <tr>
            <td>row2 Col1</td>
            <td>row2 Col2</td>
            <td>row2 Col3</td>
        </tr>
        <tr>
            <td>row3 Col1</td>
            <td>row3 Col2</td>
            <td><a href="http://www.jquery2dotnet.com/">http://www.jquery2dotnet.com/</a>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

서버로 돌아가지 않고는 XLSX로 내보낼 수 없습니다.XLSX 파일은 함께 압축된 XML 파일 모음입니다.따라서 여러 파일을 만들어야 합니다.이것은 JS, 클라이언트 측에서는 불가능합니다.

대신 HTML 테이블에서 데이터를 검색하는 함수를 만들어 서버로 전송해야 합니다.그런 다음 서버는 XLSX 파일을 만들어 클라이언트에 다시 전송하여 다운로드할 수 있습니다.

거대한 데이터셋이 필요한 경우 서버에서 XLSX 생성을 비동기 프로세스로 수행해야 하며, 이 프로세스가 완료되면 사용자에게 알려주어야 합니다(사용자가 파일이 생성되기를 기다리는 대신).

서버에서 어떤 언어를 사용하는지 알려주시면 좋은 라이브러리를 추천해 드리겠습니다.

저는 실제로 이 문제에 대한 해결책을 찾았고 다음 URL에서 javascript와 라이브러리를 사용하여 클라이언트 측에서 작업합니다.

https://unpkg.com/xlsx @0.15.1/dist/xlsx.full.min.js

여기 코드 샘플이 있습니다.

function ExportSkillsToExcel(type, fn, dl)
{
   var elt = document.getElementById('skillsTable');
   var wb = XLSX.utils.table_to_book(elt, { sheet: "skills" });
   return dl ?
     XLSX.write(wb, { bookType: type, bookSST: true, type: 'base64' }):
     XLSX.writeFile(wb, fn || ('Skills.' + (type || 'xlsx')));
}

언급URL : https://stackoverflow.com/questions/37498713/how-to-export-an-html-table-as-a-xlsx-file

반응형