0

I am trying to export an HTML table to MS Excel at THIS DEMO whixh works fine for me. bu using this code

$("[id$=myButtonControlID]").click(function (e) {
    window.open('data:application/vnd.ms-excel,' + encodeURIComponent($('div[id$=divTableDataHolder]').html()));
    e.preventDefault();
});

Now if you export the data it will download a download.xls file so Itried to Add some info to the file name like "Name_Area_Date.xls" from the user inputs as:

<table border="0">
    <tr>
        <td>Table Name</td>
        <td>
            <input id="xlxname" name="xlsname" type="text" />
        </td>
    </tr>
    <tr>
        <td>Select Area</td>
        <td>
            <select id="mySelect">
                <option value="1">Select From List</option>
                <option value="2">First</option>
                <option value="3">Second</option>
                <option value="4">Third</option>
                <option value="5">Fourth</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>Date</td>
        <td>
            <input id="datepicker" type="text" />
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <button id="myButtonControlID">Export Table to Excel</button>
        </td>
    </tr>
</table>

but I couldn't figure it out where and how to use the user inputs. can you please help me to fix this issue? Thanks

Update

$( document ).ready(function() {
    var naem = "MyExcel";
    $("[id$=myButtonControlID]").click(function (e) {
    window.open('getMyXSL.php?data=' + encodeURIComponent($('div[id$=divTableDataHolder]').html())+'&name='+name);
    e.preventDefault();
});
});
3
  • You want this --> jsfiddle.net/cse_tushar/3Qvke ??????? Dec 25, 2013 at 2:18
  • Hi Tushar sorry but I didn't get what you mean?
    – Behseini
    Dec 25, 2013 at 4:02
  • in the update you have var naem = "MyExcel", it should be var name = "MyExcel", assuming the typo is in your code, and not just transferred over.
    – Thayne
    Dec 25, 2013 at 5:14

1 Answer 1

0

This is not possible using a data URI. When you download a document from a server, you can specify the file name using the Content-Disposition header in the response:

Content-Disposition: attachment; filename="test.xsl"

However, you do not have HTTP headers when using a data URI, and there isn't any way to specify a file name using a data URI. So your options are either to put up with the user always downloading the file with the default name, or sending the data to the server and having using a link to download that document.

EDIT
If you use PHP you could do something like this

Javascript:

$("[id$=myButtonControlID]").click(function (e) {
    window.open('/getMyXSL.php?data=' + encodeURIComponent($('div[id$=divTableDataHolder]').html())+'&name='+name);
    e.preventDefault();
});

where name is the name of the file you want.

PHP for getMyXSL.php would be something like:

<?php
    header('Content-Disposition: attachment; filename="'.$_REQUEST['name'].'"');
    header('Content-Type: application/vnd.ms-excel');
    echo $_REQUEST['data'];
?>

Note that I wasn't careful to escape and unescape everything, and there may be other changes you need. And if the data is two large you will need to use a POST instead of a GET.

2
  • Hi Thayne, thanks for you comment. whenyou say server, you mean this can be done by PHP?
    – Behseini
    Dec 25, 2013 at 4:04
  • Thayne, I updated the code as you said. Please take a look a above updated code. but after running the code I am getting a PHP file named as "getMyXSL.php. it contains the table tags from the source but I need an excel file besides with name. can you please let me know why this is happening?
    – Behseini
    Dec 25, 2013 at 4:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.