发表新帖
发表新帖

How to export an HTML table as a .xlsx file

后端 未结
关注
4 898
慢半拍i
慢半拍i 2020-12-03 15:37

I have a question about exporting an HTML table as an xlsx file. I did some work and now I can export it as an xls, but I

相关标签:
4条回答
  • 一向
    2020-12-03 15:51

    A great client-side tool for exporting html tables to xlsx, xls, csv, or txt is TableExport by clarketm (me). It is a simple, easy-to-implement, full-featured library with a bunch of configurable properties and methods.

    Install

    $ npm install tableexport

    Usage

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

// OR using jQuery

$("table").tableExport();

    Documentation

    Sample apps to get you started

    • TableExport + RequireJS
    • TableExport + Flask
    • TableExport + Webpack 1
    • TableExport + Angular 4 + Webpack 2

    Check out the compendious docs or just head over to TableExport on Github for a full list of features.

    0 讨论(0)
  • 野的像风
    2020-12-03 16:05

    Take a look at tableExport.jquery.plugin or tableexport.jquery.plugin

    Code example

    <!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>
    0 讨论(0)
  • 长情又很酷
    2020-12-03 16:09

    You can use this plug-in for exporting table to .xlsx

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

    0 讨论(0)
  • 旧巷少年郎
    2020-12-03 16:10

    You won't be able to export it as XLSX without going back to the server. A XLSX file is a collection of XML files, zipped together. This means you do need to create multiple files. This is impossible to do with JS, client-side.

    Instead, you should create a function retrieving the data from your HTML table and send that to you server. The server can then create the XLSX file for you (there are a bunch of libs available for that!) and send it back to the client for download.

    If you expect to have a huge dataset, the XLSX creation on the server should be done as an async process, where you notify the user when it's done (instead of having the user waiting for the file to be created).

    Let us know which language you use on your server, and we'll be able to recommend you some good libraries.

    0 讨论(0)
 看不清?
提交回复
热议问题