Rectangle 27 4

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.

$ npm install tableexport
TableExport(document.getElementsByTagName("table"));

// OR using jQuery

$("table").tableExport();

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

Spoiler alert: pdf support will be part of the upcoming release

javascript - How to export an html table as an xlsx file - Stack Overf...

javascript excel html-table xls xlsx
Rectangle 27 2

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).

Then take a look at github.com/SheetJS/js-xlsx. This is probably the most popular library to work with XLSX in Node

@ErdenizKorkmaz Historically speaking ... this "would be" correct. With all modern browsers, even many legacy browsers, this is quite easy to handle, although I wouldn't recommend it for large sets of data (due to performance reasons). Check out the library I wrote: clarketm/TableExport; it leverages SheetJS/js-xlsx behind the scenes to handle the parsing.

javascript - How to export an html table as an xlsx file - Stack Overf...

javascript excel html-table xls xlsx
Rectangle 27 5

<?php>
$colgroup = str_repeat("<col width=86>",5);
$data = "";
$time = date("M d, y g:ia");
$excel = "<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\">
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html>
<head>
<meta http-equiv=\"Content-type\" content=\"text/html;charset=utf-8\" />
<style id=\"Classeur1_16681_Styles\">
.xl4566 {
color: red;
}
</style>
</head>
<body>
<div id=\"Classeur1_16681\" align=center x:publishsource=\"Excel\">
<table x:str border=0 cellpadding=0 cellspacing=0 style=\"border-collapse: collapse\">
<colgroup>$colgroup</colgroup>
<tr><td class=xl2216681><b>Col1</b></td><td class=xl2216681><b>Col2</b></td><td class=xl2216681 ><b>Col3</b></td><td class=xl2216681 ><b>Col4</b></td><td class=xl2216681 ><b>Col5</b></td></tr>
<tr><td class=xl4566>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</table>
</div>
</body>
</html>";
  $fname = "Export".time().".xls";
  $file = fopen($fname,"w+");
  fwrite($file,$excel);
  fclose($file);
  header('Content-Type: application/vnd.ms-excel');
  header('Content-Disposition: attachment; filename="'.basename($fname).'"');
  readfile($fname);
  unlink($fname); ?>

javascript - How can I export tables to excel from a webpage - Stack O...

javascript jquery html css table
Rectangle 27 1

If you don't need an original Excel-File, but a file, which displays the columns of your table in Excel (And can be edited within Excel or LibreOffice Calc or many other programs), you should consider using CSV (comma-separated values).

It's easy to create and edit and there is no need of using any PlugIn or Library.

Column Name 1, Column Name 2, Column Name 3
'Row1Val1', 'Row1Val2', 'Row1Val3'
'Row2Val1', 'Row2Val2', 'Row2Val3'
'Row3Val1', 'Row3Val2', 'Row3Val3'

But in case you really want an Excel File, PHPExcel will be your friend. It uses the CSV file to create a fully operational Excel-File.

include 'PHPExcel/IOFactory.php';

$objReader = PHPExcel_IOFactory::createReader('CSV');

// If the files uses a delimiter other than a comma (e.g. a tab), then tell the reader
$objReader->setDelimiter("\t");
// If the files uses an encoding other than UTF-8 or ASCII, then tell the reader
$objReader->setInputEncoding('UTF-16LE');

$objPHPExcel = $objReader->load('MyCSVFile.csv');
$objWriter = PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel5');
$objWriter->save('MyExcelFile.xls');

PHP Excel provides a functionality to include images:

$objDrawing = new PHPExcel_Worksheet_Drawing();
$objDrawing->setName('PHPExcel logo');
$objDrawing->setDescription('PHPExcel logo');
$objDrawing->setPath('./images/phpexcel_logo.gif');       // filesystem reference for the image file
$objDrawing->setHeight(36);            
$objDrawing->setCoordinates('D24');    
$objDrawing->setOffsetX(10);                
$objDrawing->setWorksheet($objPHPExcel->getActiveSheet());

javascript - Export HTML table to excel with text and images - Stack O...

javascript php jquery html export-to-excel
Rectangle 27 43

We had the same issue too many complaints from our customers. We traced it to the Excel OFffice Security patch KB3115262 - https://support.microsoft.com/en-us/kb/3115262 Which came out July 12, 2016

To work around the issue, we had customers make a change in their Excel to allow files from the internet.

3) Go to Protected View. there are 3 options that show that were all clicked

We uncheck the first option that reads -- "Enable Protected View for files originating from the Internet"

That fixed the issue. Perhaps not the best solution. I'm not sure why this particular KB broke this but I think perhaps the fact the file format is not expected and this setting are conflicting with each other.

On a computer I have that doesn't have this KB installed, all those are checked and it still works fine (not blank but prompts file format is different) and I think shows in protected view.

What led us to fact its not the content of the file is we noticed if we resave the file in notepad or notepad++ without making any changes, the file behaves fine so excel must be reading some property of the file rather than the content to block it.

Thank you! This helped a lot. For german office users: Datei -> Optionen -> Trust Center -> Einstellungen fr das Trust Center -> Geschtzte Ansicht -> Haken entfernen bei "Geschtzte Ansicht bei Dateien aus dem Internet aktivieren"

Several customer emails and a couple hours of work in, and I find this. Thank you so much!

javascript - Export HTML Table to Excel- Doesn't Open in Office 2010 -...

javascript excel
Rectangle 27 3

  • Filesaver API is new 'HTML5' functionality allowing /exactly/ this. There is just one small problem: the relevant part isn't supported yet in firefox. If you want to use this there is a nice wrapper library which makes this easier for you: filesaver.js
  • Downloadify is a flash tool which is created for exactly this as well, you can find it here. ('Disadvantage': flash)

Tried filesaver.js demo page, worked fine with chrome, in firefox (14.0.1) it only opened a new tab with the contents...and being firefox our target platform.... Downloadify worked fine in firefox but i will have to try to implement it in our website to see if its feasible (asp.net + ajax.net + there are multiple tables to which we added the export as excel button next to each one dinamically by javascript)

Yeah, that's why I said 'the relevant part isn't supported yet in firefox'@filesaver. But as far as I know the downloadify one should work perfectly fine.

asp.net - Export HTML table to Excel JavaScript function add select fi...

javascript asp.net excel export export-to-excel
Rectangle 27 1

I'm not sure if you have done this already. You might need to handle something like this below in your aspx page:

$(window).load(function(){
$( "#clickExcel" ).click(function() {  
var dtltbl = $('#dtltbl').html();    `enter code here`
window.open('data:application/vnd.ms-excel,' + $('#dtltbl').html());
});
});//]]>

In the above script #dtltbl is the Table Id.

The following code needs be there in your server side code, then your problem would be solved.

Response.AddHeader("Content-Disposition", "attachment;filename=myfilename.csv");

Also check this link it might be of useful to you.

The problem with this is that you need to make a postback to the server in order to add the header. The idea of using this function is generate the excel from the client directly throught javascript

This gives an fair appraoch on handling the export without server side code, see if it meets your requriements stackoverflow.com/questions/3286423/

asp.net - Export HTML table to Excel JavaScript function add select fi...

javascript asp.net excel export export-to-excel
Rectangle 27 3

We uncheck the first option that reads -- "Enable Protected View for files originating from the Internet" which is not safe

Go to Properties of the file and click Unblock (If you know the file is safe).

This works. And it offers a file-to-file option hence better security than the global setting.

i do not installed office, i open my docs in either google docs or one drive :| and they generate error, doesn't matter if the output format is HTML, or Base64

javascript - Export HTML Table to Excel- Doesn't Open in Office 2010 -...

javascript excel
Rectangle 27 3

You are saving a file with HTML content as *.xls. Excel can open this but will normaly show a warning message:

The file you are trying to open, 'name.ext', is in a different format than specified by the file extension. Verify that the file is not corrupted and is from a trusted source before opening the file. Do you want to open the file now?

If that warning not occurs and the file is not opening, then maybe the

DWORD
ExtensionHardening
HKEY_CURRENT_USER\Software\Microsoft\Office\<version number>\Excel\Security
Windows Registry

That means "Check the file name extension and the file type. If they do not match, do not open the file."

Maybe your administrator has set this via Group Policy setting. If you are in an administrated network, ask your administrator.

If you are administrator of your own, then look for that registry setting and change it to 1, the default.

How do I get rid of the warning message?

Have you read the linked knowledge base site? To get rid of the warning message set DWORD ExtensionHardening to 0.

javascript - Export HTML Table to Excel- Doesn't Open in Office 2010 -...

javascript excel
Rectangle 27 23

For exporting html to csv try following this example. More details and examples are available at the author's website.

Create a html2csv.js file and put the following code in it.

jQuery.fn.table2CSV = function(options) {
    var options = jQuery.extend({
        separator: ',',
        header: [],
        delivery: 'popup' // popup, value
    },
    options);

    var csvData = [];
    var headerArr = [];
    var el = this;

    //header
    var numCols = options.header.length;
    var tmpRow = []; // construct header avalible array

    if (numCols > 0) {
        for (var i = 0; i < numCols; i++) {
            tmpRow[tmpRow.length] = formatData(options.header[i]);
        }
    } else {
        $(el).filter(':visible').find('th').each(function() {
            if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html());
        });
    }

    row2CSV(tmpRow);

    // actual data
    $(el).find('tr').each(function() {
        var tmpRow = [];
        $(this).filter(':visible').find('td').each(function() {
            if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html());
        });
        row2CSV(tmpRow);
    });
    if (options.delivery == 'popup') {
        var mydata = csvData.join('\n');
        return popup(mydata);
    } else {
        var mydata = csvData.join('\n');
        return mydata;
    }

    function row2CSV(tmpRow) {
        var tmp = tmpRow.join('') // to remove any blank rows
        // alert(tmp);
        if (tmpRow.length > 0 && tmp != '') {
            var mystr = tmpRow.join(options.separator);
            csvData[csvData.length] = mystr;
        }
    }
    function formatData(input) {
        // replace " with 
        var regexp = new RegExp(/["]/g);
        var output = input.replace(regexp, "");
        //HTML
        var regexp = new RegExp(/\<[^\<]+\>/g);
        var output = output.replace(regexp, "");
        if (output == "") return '';
        return '"' + output + '"';
    }
    function popup(data) {
        var generator = window.open('', 'csv', 'height=400,width=600');
        generator.document.write('<html><head><title>CSV</title>');
        generator.document.write('</head><body >');
        generator.document.write('<textArea cols=70 rows=15 wrap="off" >');
        generator.document.write(data);
        generator.document.write('</textArea>');
        generator.document.write('</body></html>');
        generator.document.close();
        return true;
    }
};

include the js files into the html page like this:

<script type="text/javascript" src="jquery-1.3.2.js" ></script>

<script type="text/javascript" src="html2CSV.js" ></script>
<table id="example1" border="1"  style="background-color:#FFFFCC" width="0%" cellpadding="3" cellspacing="3">

    <tr>

        <th>Title</th>

        <th>Name</th>

        <th>Phone</th>

    </tr>

    <tr>

        <td>Mr.</td>

        <td>John</td>

        <td>07868785831</td>

    </tr>

    <tr>

        <td>Miss</td>

        <td><i>Linda</i></td>

        <td>0141-2244-5566</td>

    </tr>

    <tr>

        <td>Master</td>

        <td>Jack</td>

        <td>0142-1212-1234</td>

    </tr>

    <tr>

        <td>Mr.</td>

        <td>Bush</td>

        <td>911-911-911</td>

    </tr>

</table>
<input value="Export as CSV 2" type="button" onclick="$('#example1').table2CSV({header:['prefix','Employee Name','Contact']})">

Hi, I really appreciate the prompt and detailed response. I tried your code but there appear to be a number of errors in the javascript. I am not a Javascript guru so I don't know how to fix it.

Thankyou. But can you please mention the errors. and also tell me did you tried the above example first?

NO love here - jquery 1.7.3 and there's nothing happening on pressing that button :(

Thanks for your answer. What if my table is with pagination, and I wanna download the whole table rather than the current visiable rows? Thanks!

parsing - How do I export html table data as .csv file? - Stack Overfl...

html parsing csv export export-to-csv
Rectangle 27 23

For exporting html to csv try following this example. More details and examples are available at the author's website.

Create a html2csv.js file and put the following code in it.

jQuery.fn.table2CSV = function(options) {
    var options = jQuery.extend({
        separator: ',',
        header: [],
        delivery: 'popup' // popup, value
    },
    options);

    var csvData = [];
    var headerArr = [];
    var el = this;

    //header
    var numCols = options.header.length;
    var tmpRow = []; // construct header avalible array

    if (numCols > 0) {
        for (var i = 0; i < numCols; i++) {
            tmpRow[tmpRow.length] = formatData(options.header[i]);
        }
    } else {
        $(el).filter(':visible').find('th').each(function() {
            if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html());
        });
    }

    row2CSV(tmpRow);

    // actual data
    $(el).find('tr').each(function() {
        var tmpRow = [];
        $(this).filter(':visible').find('td').each(function() {
            if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html());
        });
        row2CSV(tmpRow);
    });
    if (options.delivery == 'popup') {
        var mydata = csvData.join('\n');
        return popup(mydata);
    } else {
        var mydata = csvData.join('\n');
        return mydata;
    }

    function row2CSV(tmpRow) {
        var tmp = tmpRow.join('') // to remove any blank rows
        // alert(tmp);
        if (tmpRow.length > 0 && tmp != '') {
            var mystr = tmpRow.join(options.separator);
            csvData[csvData.length] = mystr;
        }
    }
    function formatData(input) {
        // replace " with 
        var regexp = new RegExp(/["]/g);
        var output = input.replace(regexp, "");
        //HTML
        var regexp = new RegExp(/\<[^\<]+\>/g);
        var output = output.replace(regexp, "");
        if (output == "") return '';
        return '"' + output + '"';
    }
    function popup(data) {
        var generator = window.open('', 'csv', 'height=400,width=600');
        generator.document.write('<html><head><title>CSV</title>');
        generator.document.write('</head><body >');
        generator.document.write('<textArea cols=70 rows=15 wrap="off" >');
        generator.document.write(data);
        generator.document.write('</textArea>');
        generator.document.write('</body></html>');
        generator.document.close();
        return true;
    }
};

include the js files into the html page like this:

<script type="text/javascript" src="jquery-1.3.2.js" ></script>

<script type="text/javascript" src="html2CSV.js" ></script>
<table id="example1" border="1"  style="background-color:#FFFFCC" width="0%" cellpadding="3" cellspacing="3">

    <tr>

        <th>Title</th>

        <th>Name</th>

        <th>Phone</th>

    </tr>

    <tr>

        <td>Mr.</td>

        <td>John</td>

        <td>07868785831</td>

    </tr>

    <tr>

        <td>Miss</td>

        <td><i>Linda</i></td>

        <td>0141-2244-5566</td>

    </tr>

    <tr>

        <td>Master</td>

        <td>Jack</td>

        <td>0142-1212-1234</td>

    </tr>

    <tr>

        <td>Mr.</td>

        <td>Bush</td>

        <td>911-911-911</td>

    </tr>

</table>
<input value="Export as CSV 2" type="button" onclick="$('#example1').table2CSV({header:['prefix','Employee Name','Contact']})">

Hi, I really appreciate the prompt and detailed response. I tried your code but there appear to be a number of errors in the javascript. I am not a Javascript guru so I don't know how to fix it.

Thankyou. But can you please mention the errors. and also tell me did you tried the above example first?

NO love here - jquery 1.7.3 and there's nothing happening on pressing that button :(

Thanks for your answer. What if my table is with pagination, and I wanna download the whole table rather than the current visiable rows? Thanks!

parsing - How do I export html table data as .csv file? - Stack Overfl...

html parsing csv export export-to-csv
Rectangle 27 1

1) Type Regedit in start menu

15.0 for Office 2013
 16.0 for Office 2016
 12.0 for Office 2010

create a DWORD(32bit) value and name it: ExtensionHardening. The possible values are:

0: Do not check the file name extension and
   the file type, and bypass the function of the warning message.

1: Check the file name extension and the file type.
   If they do not match, display the warning message.

2: Check the file name extension and the file
   type. If they do not match, do not open the file.

Use 1 as the value.

javascript - Export HTML Table to Excel- Doesn't Open in Office 2010 -...

javascript excel
Rectangle 27 1

Similar issue, my code dumps from a GridView to an XLS file using StringWriter, HTMLTextWriter and RenderControl.

Since our ASP.NET code runs on a company intranet we uninstalled the following updates across the company instead of going into 100s of user PCs and changing their settings.

This fixed our issue, and would also fix yours and others affected by these updates.

javascript - Export HTML Table to Excel- Doesn't Open in Office 2010 -...

javascript excel
Rectangle 27 1

Basically marking the site you are downloading from as safe.

Basically open the website where you will be downloading excel files in Internet Explorer

This should add the site in question as allowed and then you can use whatever browser you want e.g. firefox / chrome etc.

javascript - Export HTML Table to Excel- Doesn't Open in Office 2010 -...

javascript excel
Rectangle 27 1

I had a similar issue, intranet wise. Grid export to HTML Excel all of a sudden stopped working when user clicked the open. Quick workaround, Save and Open drop down option or just save then open.

My fix was to change content-disposition from attached to inline. Now the users get the old popup center page instead of the one at the bottom and open works just fine.

This should be the top answer, worked perfectly, didn't require asking anyone to change any trust settings. No way those trust settings are going to get changed in a corporate environment.

javascript - Export HTML Table to Excel- Doesn't Open in Office 2010 -...

javascript excel
Rectangle 27 20

jQuery
Javascript

Put this code into a script to be loaded in the head section:

$(document).ready(function () {
    $('table').each(function () {
        var $table = $(this);

        var $button = $("<button type='button'>");
        $button.text("Export to spreadsheet");
        $button.insertAfter($table);

        $button.click(function () {
            var csv = $table.table2CSV({
                delivery: 'value'
            });
            window.location.href = 'data:text/csv;charset=UTF-8,' 
            + encodeURIComponent(csv);
        });
    });
})

Requires jQuery and table2CSV: Add script references to both libraries before the script above.

The table selector is used as an example, and can be adjusted to suit your needs.

It only works in browsers with full Data URI support: Firefox, Chrome and Opera, not in IE, which only supports Data URIs for embedding binary image data into a page.

For full browser compatibility you would have to use a slightly different approach that requires a server side script to echo the CSV.

Hi... thanks for the answer... but when I try to download the tabletoCsv file from the link that you provided.. it shows the error "page not found"

Hi @sam, you can find the library here: table2csv.com

Thanks for the reply!!! I really apppreciate your help!! I found another interesting option too after a lot of searching datatables.net/examples

I have tried most of the above, but the easiest one is this. jordiburgos.com/post/2014/

javascript - export html table to csv - Stack Overflow

javascript jquery node.js html-table export-to-csv
Rectangle 27 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css"/>
<script src='https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js'></script>
<script src='https://cdn.datatables.net/buttons/1.2.1/js/dataTables.buttons.min.js'></script>
<script src='//cdn.datatables.net/buttons/1.2.1/js/buttons.flash.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js'></script>
<script src='//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js'></script>
<script src='//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js'></script>
<script src='//cdn.datatables.net/buttons/1.2.1/js/buttons.html5.min.js'></script>
<script src='//cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js'></script>
<script src='https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js'></script>   
<table id="example" class="display nowrap" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>
        <tr>
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$433,060</td>
        </tr>
        <tr>
            <td>Airi Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>2008/11/28</td>
            <td>$162,700</td>
        </tr>
        <tr>
            <td>Brielle Williamson</td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td>2012/12/02</td>
            <td>$372,000</td>
        </tr>
        <tr>
            <td>Herrod Chandler</td>
            <td>Sales Assistant</td>
            <td>San Francisco</td>
            <td>59</td>
            <td>2012/08/06</td>
            <td>$137,500</td>
        </tr>
        <tr>
            <td>Rhona Davidson</td>
            <td>Integration Specialist</td>
            <td>Tokyo</td>
            <td>55</td>
            <td>2010/10/14</td>
            <td>$327,900</td>
        </tr>
        <tr>
            <td>Colleen Hurst</td>
            <td>Javascript Developer</td>
            <td>San Francisco</td>
            <td>39</td>
            <td>2009/09/15</td>
            <td>$205,500</td>
        </tr>
        <tr>
            <td>Sonya Frost</td>
            <td>Software Engineer</td>
            <td>Edinburgh</td>
            <td>23</td>
            <td>2008/12/13</td>
            <td>$103,600</td>
        </tr>
        <tr>
            <td>Jena Gaines</td>
            <td>Office Manager</td>
            <td>London</td>
            <td>30</td>
            <td>2008/12/19</td>
            <td>$90,560</td>
        </tr>
        <tr>
            <td>Quinn Flynn</td>
            <td>Support Lead</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2013/03/03</td>
            <td>$342,000</td>
        </tr>
        <tr>
            <td>Charde Marshall</td>
            <td>Regional Director</td>
            <td>San Francisco</td>
            <td>36</td>
            <td>2008/10/16</td>
            <td>$470,600</td>
        </tr>
        <tr>
            <td>Haley Kennedy</td>
            <td>Senior Marketing Designer</td>
            <td>London</td>
            <td>43</td>
            <td>2012/12/18</td>
            <td>$313,500</td>
        </tr>
        <tr>
            <td>Tatyana Fitzpatrick</td>
            <td>Regional Director</td>
            <td>London</td>
            <td>19</td>
            <td>2010/03/17</td>
            <td>$385,750</td>
        </tr>
        <tr>
            <td>Michael Silva</td>
            <td>Marketing Designer</td>
            <td>London</td>
            <td>66</td>
            <td>2012/11/27</td>
            <td>$198,500</td>
        </tr>
        <tr>
            <td>Paul Byrd</td>
            <td>Chief Financial Officer (CFO)</td>
            <td>New York</td>
            <td>64</td>
            <td>2010/06/09</td>
            <td>$725,000</td>
        </tr>
        <tr>
            <td>Gloria Little</td>
            <td>Systems Administrator</td>
            <td>New York</td>
            <td>59</td>
            <td>2009/04/10</td>
            <td>$237,500</td>
        </tr>
        <tr>
            <td>Bradley Greer</td>
            <td>Software Engineer</td>
            <td>London</td>
            <td>41</td>
            <td>2012/10/13</td>
            <td>$132,000</td>
        </tr>
        <tr>
            <td>Dai Rios</td>
            <td>Personnel Lead</td>
            <td>Edinburgh</td>
            <td>35</td>
            <td>2012/09/26</td>
            <td>$217,500</td>
        </tr>
        <tr>
            <td>Jenette Caldwell</td>
            <td>Development Lead</td>
            <td>New York</td>
            <td>30</td>
            <td>2011/09/03</td>
            <td>$345,000</td>
        </tr>
        <tr>
            <td>Yuri Berry</td>
            <td>Chief Marketing Officer (CMO)</td>
            <td>New York</td>
            <td>40</td>
            <td>2009/06/25</td>
            <td>$675,000</td>
        </tr>
        <tr>
            <td>Caesar Vance</td>
            <td>Pre-Sales Support</td>
            <td>New York</td>
            <td>21</td>
            <td>2011/12/12</td>
            <td>$106,450</td>
        </tr>
        <tr>
            <td>Doris Wilder</td>
            <td>Sales Assistant</td>
            <td>Sidney</td>
            <td>23</td>
            <td>2010/09/20</td>
            <td>$85,600</td>
        </tr>
        <tr>
            <td>Angelica Ramos</td>
            <td>Chief Executive Officer (CEO)</td>
            <td>London</td>
            <td>47</td>
            <td>2009/10/09</td>
            <td>$1,200,000</td>
        </tr>
        <tr>
            <td>Gavin Joyce</td>
            <td>Developer</td>
            <td>Edinburgh</td>
            <td>42</td>
            <td>2010/12/22</td>
            <td>$92,575</td>
        </tr>
        <tr>
            <td>Jennifer Chang</td>
            <td>Regional Director</td>
            <td>Singapore</td>
            <td>28</td>
            <td>2010/11/14</td>
            <td>$357,650</td>
        </tr>
        <tr>
            <td>Brenden Wagner</td>
            <td>Software Engineer</td>
            <td>San Francisco</td>
            <td>28</td>
            <td>2011/06/07</td>
            <td>$206,850</td>
        </tr>
        <tr>
            <td>Fiona Green</td>
            <td>Chief Operating Officer (COO)</td>
            <td>San Francisco</td>
            <td>48</td>
            <td>2010/03/11</td>
            <td>$850,000</td>
        </tr>
        <tr>
            <td>Shou Itou</td>
            <td>Regional Marketing</td>
            <td>Tokyo</td>
            <td>20</td>
            <td>2011/08/14</td>
            <td>$163,000</td>
        </tr>
        <tr>
            <td>Michelle House</td>
            <td>Integration Specialist</td>
            <td>Sidney</td>
            <td>37</td>
            <td>2011/06/02</td>
            <td>$95,400</td>
        </tr>
        <tr>
            <td>Suki Burks</td>
            <td>Developer</td>
            <td>London</td>
            <td>53</td>
            <td>2009/10/22</td>
            <td>$114,500</td>
        </tr>
        <tr>
            <td>Prescott Bartlett</td>
            <td>Technical Author</td>
            <td>London</td>
            <td>27</td>
            <td>2011/05/07</td>
            <td>$145,000</td>
        </tr>
        <tr>
            <td>Gavin Cortez</td>
            <td>Team Leader</td>
            <td>San Francisco</td>
            <td>22</td>
            <td>2008/10/26</td>
            <td>$235,500</td>
        </tr>
        <tr>
            <td>Martena Mccray</td>
            <td>Post-Sales support</td>
            <td>Edinburgh</td>
            <td>46</td>
            <td>2011/03/09</td>
            <td>$324,050</td>
        </tr>
        <tr>
            <td>Unity Butler</td>
            <td>Marketing Designer</td>
            <td>San Francisco</td>
            <td>47</td>
            <td>2009/12/09</td>
            <td>$85,675</td>
        </tr>
        <tr>
            <td>Howard Hatfield</td>
            <td>Office Manager</td>
            <td>San Francisco</td>
            <td>51</td>
            <td>2008/12/16</td>
            <td>$164,500</td>
        </tr>
        <tr>
            <td>Hope Fuentes</td>
            <td>Secretary</td>
            <td>San Francisco</td>
            <td>41</td>
            <td>2010/02/12</td>
            <td>$109,850</td>
        </tr>
        <tr>
            <td>Vivian Harrell</td>
            <td>Financial Controller</td>
            <td>San Francisco</td>
            <td>62</td>
            <td>2009/02/14</td>
            <td>$452,500</td>
        </tr>
        <tr>
            <td>Timothy Mooney</td>
            <td>Office Manager</td>
            <td>London</td>
            <td>37</td>
            <td>2008/12/11</td>
            <td>$136,200</td>
        </tr>
        <tr>
            <td>Jackson Bradshaw</td>
            <td>Director</td>
            <td>New York</td>
            <td>65</td>
            <td>2008/09/26</td>
            <td>$645,750</td>
        </tr>
        <tr>
            <td>Olivia Liang</td>
            <td>Support Engineer</td>
            <td>Singapore</td>
            <td>64</td>
            <td>2011/02/03</td>
            <td>$234,500</td>
        </tr>
        <tr>
            <td>Bruno Nash</td>
            <td>Software Engineer</td>
            <td>London</td>
            <td>38</td>
            <td>2011/05/03</td>
            <td>$163,500</td>
        </tr>
        <tr>
            <td>Sakura Yamamoto</td>
            <td>Support Engineer</td>
            <td>Tokyo</td>
            <td>37</td>
            <td>2009/08/19</td>
            <td>$139,575</td>
        </tr>
        <tr>
            <td>Thor Walton</td>
            <td>Developer</td>
            <td>New York</td>
            <td>61</td>
            <td>2013/08/11</td>
            <td>$98,540</td>
        </tr>
        <tr>
            <td>Finn Camacho</td>
            <td>Support Engineer</td>
            <td>San Francisco</td>
            <td>47</td>
            <td>2009/07/07</td>
            <td>$87,500</td>
        </tr>
        <tr>
            <td>Serge Baldwin</td>
            <td>Data Coordinator</td>
            <td>Singapore</td>
            <td>64</td>
            <td>2012/04/09</td>
            <td>$138,575</td>
        </tr>
        <tr>
            <td>Zenaida Frank</td>
            <td>Software Engineer</td>
            <td>New York</td>
            <td>63</td>
            <td>2010/01/04</td>
            <td>$125,250</td>
        </tr>
        <tr>
            <td>Zorita Serrano</td>
            <td>Software Engineer</td>
            <td>San Francisco</td>
            <td>56</td>
            <td>2012/06/01</td>
            <td>$115,000</td>
        </tr>
        <tr>
            <td>Jennifer Acosta</td>
            <td>Junior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>43</td>
            <td>2013/02/01</td>
            <td>$75,650</td>
        </tr>
        <tr>
            <td>Cara Stevens</td>
            <td>Sales Assistant</td>
            <td>New York</td>
            <td>46</td>
            <td>2011/12/06</td>
            <td>$145,600</td>
        </tr>
        <tr>
            <td>Hermione Butler</td>
            <td>Regional Director</td>
            <td>London</td>
            <td>47</td>
            <td>2011/03/21</td>
            <td>$356,250</td>
        </tr>
        <tr>
            <td>Lael Greer</td>
            <td>Systems Administrator</td>
            <td>London</td>
            <td>21</td>
            <td>2009/02/27</td>
            <td>$103,500</td>
        </tr>
        <tr>
            <td>Jonas Alexander</td>
            <td>Developer</td>
            <td>San Francisco</td>
            <td>30</td>
            <td>2010/07/14</td>
            <td>$86,500</td>
        </tr>
        <tr>
            <td>Shad Decker</td>
            <td>Regional Director</td>
            <td>Edinburgh</td>
            <td>51</td>
            <td>2008/11/13</td>
            <td>$183,000</td>
        </tr>
        <tr>
            <td>Michael Bruce</td>
            <td>Javascript Developer</td>
            <td>Singapore</td>
            <td>29</td>
            <td>2011/06/27</td>
            <td>$183,000</td>
        </tr>
        <tr>
            <td>Donna Snider</td>
            <td>Customer Support</td>
            <td>New York</td>
            <td>27</td>
            <td>2011/01/25</td>
            <td>$112,000</td>
        </tr>
    </tbody>
</table>
$(document).ready(function () {
    var table = $('#example').DataTable({
        "lengthMenu": [5, 10, 50, 100],
        "pageLength": 50,
        "scrollX": true,
        dom: 'Bfrtip',
        buttons: [{
                extend: 'excelHtml5',
                text: 'Export All',
                exportOptions: {
                    columns: ':visible:not(.not-exported)'
                },
                title: 'Data export'
            }, {
                extend: 'excelHtml5',
                text: 'Export selected',
                exportOptions: {
                    columns: ':visible:not(.not-exported)',
                    modifier: {
                        selected: true
                    }
                },
                title: 'Data export'
            }
        ],
        select: {
            style: 'multi'
        }
    });
});

Did this worked for you, Its not working here, I have to click and then wait for a while and then again click to select to the row. I am not able to select the row on click. And also it does not export any data, a blank Excel is downloaded.

javascript - Select Row in Single Click in Datatable and Export Select...

javascript php jquery html datatables
Rectangle 27 8

Make sure the the javascript file is in the same folder or change the path of the script in the html file accordingly.

<html>
<head>
    <title>Export to excel test</title>
    <script src="excellentexport.js"></script>
    <style>
        table, tr, td {
            border: 1px black solid;
        }
    </style>
</head>
<body>
    <h1>ExcellentExport.js</h1>

    Check on <a href="http://jordiburgos.com">jordiburgos.com</a> and  <a href="https://github.com/jmaister/excellentexport">GitHub</a>.

    <h3>Test page</h3>

    <br/>

    <a download="somedata.xls" href="#" onclick="return ExcellentExport.excel(this, 'datatable', 'Sheet Name Here');">Export to Excel</a>
    <br/>

    <a download="somedata.csv" href="#" onclick="return ExcellentExport.csv(this, 'datatable');">Export to CSV</a>
    <br/>

    <table id="datatable">
        <tr>
            <th>Column 1</th>
            <th>Column "cool" 2</th>
            <th>Column 3</th>
        </tr>
        <tr>
            <td>100,111</td>
            <td>200</td>
            <td>300</td>
        </tr>
        <tr>
            <td>400</td>
            <td>500</td>
            <td>600</td>
        </tr>
        <tr>
            <td>Text</td>
            <td>More text</td>
            <td>Text with
                new line</td>
        </tr>
    </table>

</body>

It is very easy to use this as I have tried most of the other methods.

Does not work in IE9.

Is it possible to use a button instead of an anchor?

Not work, download the HTML page.

javascript - export html table to csv - Stack Overflow

javascript jquery node.js html-table export-to-csv
Rectangle 27 5

You don't need PHP script on server side. Do that in the client side only, in browsers that accept Data URIs:

data:application/csv;charset=utf-8,content_encoded_as_url
data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333

You can call this URI by:

window.open
window.location
  • or by the href of an anchor
  • by adding the download attribute it will work in chrome, still have to test in IE.

To test, simply copy the URIs above and paste in your browser address bar. Or test the anchor below in a HTML page:

<a download="somedata.csv" href="data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333">Example</a>

To create the content, getting the values from the table, you can use table2CSV mentioned by MelanciaUK and do:

var csv = $table.table2CSV({delivery:'value'});
window.location.href = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(csv);

javascript - export html table to csv - Stack Overflow

javascript jquery node.js html-table export-to-csv
Rectangle 27 9

Generate the contents of the CSV file as a string in JavaScript (I assume you're not asking SO to just write this code for you), then encode it as Base64 and generate a data: URI with the MIME type text/csv. Redirect the browser to that URI and it should trigger a download dialog for the user.

javascript - Export HTML table to csv file on client side - Stack Over...

javascript html