hhurz / tableexport.jquery.plugin Goto Github PK
View Code? Open in Web Editor NEWjQuery plugin to export a html table to JSON, XML, CSV, TSV, TXT, SQL, Word, Excel, PNG and PDF
License: MIT License
jQuery plugin to export a html table to JSON, XML, CSV, TSV, TXT, SQL, Word, Excel, PNG and PDF
License: MIT License
Hi, please i do not found an example of excelstyles, how i use it? i want to change the font style or border styles when i export to excel.
Thanks for the help!.
The same project works well under Chrome, while I totally can NOT make it work under IE11. Looks like the base64 does not support under IE11. Sorry that I'm still new to Web Development. Any ideas for the solution?
This issue is really similar with #15.
Would like to get permission to include the functionality to support his feature.
I would like of export the content of a data attribute instead of the TD content.
e.g.
<tbody>
<tr>
<td data-tableexport-content="Export this content">
instead of this here
</td>
</tr>
</tbody>
And make the same thing with table head:
<thead>
<tr>
<th data-tableexport-title="Export this title">
instead of this here
</th>
</tr>
</thead>
Thanks
I have multiple tables (lets say 10 different tables), and I'd like to export them all to Excel on the click of the export button.
I've tried the example in the demo file "multipleExcel.html" and it only ever exports the first table in the series. It looks like you are just setting the same class on all tables and then calling that class onclick.
I've also tried putting all of the tables within a DIV with a class or ID with this class, but this doesn't work either.
Could anyone give guidance on how to export separate tables into one single document? Is there a way to just simply export all tables contained within the DIV?
I have a table with input number. Made it with this code #45
The problem is that when i try this code with multiple tables, there is an error Uncaught TypeError: Cannot read property 'length' of null.
I have tryed everything but it don't work. Plz help
I guess this isn't so much of an issue as it is a question. I am exporting a table and everything is working correctly except for one thing and I can't figure out how to make it work correctly:
My table has a header row with a colspan set to the number of columns in the rest of the table (i.e. the header row takes up the entire width of the table, while the rest of my table rows have 5 columns). However, when I export to Excel, the colspan doesn't carry over and only drops the header row into a single cell.
Any suggestions?
Name | detail1 | detail2 | detail3 | |||||||
---|---|---|---|---|---|---|---|---|---|---|
d11 | d12 | d21 | d22 | d23 | d24 | d31 | d32 | d33 | d34 | |
张三 | 11 | 12 | 21 | 22 | 23 | 24 | 31 | 32 | 33 | 34 |
export after
Name | detail1 | detail2 | detail3 | |||||||
---|---|---|---|---|---|---|---|---|---|---|
d11 | d12 | d21 | d22 | d23 | d24 | d31 | d32 | d33 | d34 | |
张三 | 11 | 12 | 21 | 22 | 23 | 24 | 31 | 32 | 33 | 34 |
$("table").tableExport({
type: "excel",
//displayTableName: true,
//tableName: "Demo",
worksheetName: "Demo",
fileName: "Demo"
});
pdf export dont render turkish characters correctly.
When I try to open my exported table in XLS format, I get the following:
In both cases, when opened in Calc/Excel everything seems fine. Is this a bug?
Btw, thanks very much for this piece of software, it is very useful :-)
regards, dejan
EDIT:
Ok, now I see this is because of the file being html and not real xls. I suppose this is somethng that cannot be avoided :-(
I have an input type=number in my table and this plugin don't export the value. Is it possible to do this?
Hi.
The export option "all" do not work with server side pagination.
When changing it to client pagination it works.
Thanks
Hi and thanks for this great fork!
I'm trying to export a table but I'm having a problem.
On thead, the first two columns are hidden thanks to data-tableexport-display="none".
Same for each row on tbody.
Excel, CSV and TXT export all work fine, but PDF export fails with the following error:
Error: col is undefined
.tableExport/</atOptions.renderCell@http://localhost:3000/bower_components/tableExport.jquery.plugin/tableExport.js:512:1
printRows/<@http://localhost:3000/bower_components/jspdf-autotable/jspdf.plugin.autotable.js:347:1
printRows@http://localhost:3000/bower_components/jspdf-autotable/jspdf.plugin.autotable.js:337:13
API.autoTable@http://localhost:3000/bower_components/jspdf-autotable/jspdf.plugin.autotable.js:90:9
.tableExport/<@http://localhost:3000/bower_components/tableExport.jquery.plugin/tableExport.js:556:15
I'm using the latest version from master.
Thanks for your help!
When exporting a table containing a colspan
followed by a rowspan
as a .csv-file, the rowspan will affect the wrong columns in following rows.
A table such as:
Section 1 | T | Section 2 | Section 3 | |
1 | 2 | 3 | 4 |
HTML:
<table id="mixspans">
<tr>
<td colspan="2">Section 1</td>
<td rowspan="2">T</td>
<td>Section 2</td>
<td>Section 3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
The table above will produce the following (incorrect) output from doExport('#mixspans2', {type: 'csv'})
:
"Section 1",,T,"Section 2","Section 3"
1,,2,3,4
Here the cell-value 2
is moved one cell to the right from its expected position in the CSV-output.
When click the pdf option following error show in console doc.addhtml is not function
i'm using the extension bootstrap...
Should be possible to add an option for CSV export to decide if decimal character is a . or a ,?
I've found the function parseString() and when it is not enabled HTML, should be possible to add a replace from . to the selected character like this (line 727):
result = $cell.text().trim().replace(/\u00AD/g, "").replace('.', defaults.csvDecimalsChar); // remove soft hyphens
And adding the default parameter at the beggining, of course and detecting if it's a number.
Thanks.
Hello,
Thanks for maintaining this plugin! I'm figuring this out, so I hope my question isn't too stupid. I've got the tableExport plugin implemented but when I go to export to PDF everything renders as one big table across the PDF, rather than each instance of the tables on the html source.
<a href="#" onclick="$('table').tableExport({type:'pdf',escape:'false'});"> pdf</a>
I get a 15 column wide single table in PDF, rather than 3 tables of 5 columns each.
Any assistance is appreciated!
Hi,
How can I export a table that is hidden?
For example, I have a display format that is different to the content I wish to export. To do this I can re-format the data in a hidden table. However, hidden tables content is not currently exported.
Is this possible? Perhaps an option?
Thanks,
Daniel
Hi
Export to pdf does not support special characters like ą ś ć ż ł ó ę.
Is there a chance to fix it. Everything else working perfect :)
Hello. When I try to export table like this:
<table id="tbl">
<thead>
<tr>
<th>
Table title<br/>
<span style="font-weight:normal;font-size:smaller;">Note message</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>
Very long long long long long long long long long long long long long
multiline message
<i>with internal element</i>.
</p>
</td>
</tr>
</tbody>
</table>
unnecessary leading white spaces are exported in the same formats (f.e):
JSON:
[{"header":[["Table title\n Note message"]],"data":[["Very long long long long long long long long long long long long long\n multiline message\n with internal element."]]}]
!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!
XML
<tabledata><fields><field>Table title
Note message</field></fields><data><row id="1"><column-1>Very long long long long long long long long long long long long long
multiline message
with internal element.</column-1></row></data></tabledata>
PDF generated with properties:
{type:'pdf',
jspdf: {
autotable: {
styles: {overflow: 'linebreak',
fontSize: 26,
rowHeight: 36},
headerStyles: {rowHeight: 28,
fontSize: 38},
bodyStyles: {rowHeight: 20}
}
}}
<table class="table table-bordered" id="cash">
<thead>
<tr>
<th class="text-center">Date</th>
<th class="text-center">Collection</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center vcenter"></td>
<td class="text-center vcenter"></td>
</tr>
</tbody>
</table>
I tried to export this table to pdf but generated pdf failed to open in chrome and gmail
while it loaded perfectly in firefox. I am using latest versions of these browsers on Ubuntu.
Here is an angular directive I used -
'use strict';
angular.module('Reports').directive('exportTable', [function() {
return {
link : function(scope, element, attributes) {
var e = angular.element(document.querySelector('#' + attributes.tableId));
element.bind('click', function() {
switch(scope.ext.selected.val) {
case 'PDF' :
e.tableExport({
fileName : attributes.fileName,
type: 'pdf',
jspdf : {
orientation : '1',
autotable : {
theme : 'plain'
}
}
});
break;
case 'CSV' :
e.tableExport({
fileName : attributes.fileName,
type : 'csv'
});
break;
}
});
}
};
}]);
Could be possible to export multiple tables?
For example, if I have 10 tables and i do $('table').tableExport({}); only the first one is exported.
Hi,
I'ts possible to add the posibility to explude some selector exportation into some cells.
For example, into cells from one or several columns, i've 2 DIV, one with "data" class and the other with "data no_export" class or with diferent id.
I would like to export the table but exclude the content of div with class "no_export".
It's an example, but wil be a good solution.
Hello. When I try to export table like this:
<table id="tbl">
<thead>
<tr>
<th>Col 1</th><th>Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan=2 style="text-align:center">Colspan</td>
</tr>
<tr>
<td>
Value 1
</td>
<td>
Value 2
</td>
</tr>
</tbody>
</table>
colspan attribute have sense only for excel format, but create empty column for others:
JSON:
[{"header":[["Col 1","Col 2"]],"data":[["Colspan",""],["Value 1","Value 2"]]}]
!!!
XML:
<tabledata><fields><field>Col 1</field><field>Col 2</field></fields><data><row id="1"><column-1>Colspan</column-1><column-2/></row><row id="2"><column-1>Value 1</column-1><column-2>Value 2</column-2></row></data></tabledata>
!!!!!!!!!!!
PDF generated with properties:
{type:'pdf',
jspdf: {
autotable: {
styles: {overflow: 'linebreak',
fontSize: 26,
rowHeight: 36},
headerStyles: {rowHeight: 28,
fontSize: 38},
bodyStyles: {rowHeight: 20}
}
}
}
I have a situation where I may not exactly know the numeric indexes of the rows that I want to exclude from exporting without having to calculate it manually before calling the export on the table.
Would it be beneficial to have an option to exclude certain rows if given a class name?
$('#tableContent').tableExport({
type:'csv',
excludeRowClass: "skipmeplz"
});
I'd be more than happy to open a pull request with this behavior if it would be favorable.
Export excel,excel file,sheettable header disorder
I've got some action buttons in a column in each one of my rows. Is there a way I can remove the entire row from being exported, instead of the individual cells?
For example
<th data-field="action-buttons" data-tableexport-display="none"></th>
Thanks
Love this plugin! Out of the box when I try to export to excel and view it in the app I get this long html string in the first cell (pasted below):
<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'><meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8"><meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>xlsWorksheetName</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table><tr><td></td><td>Blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td></tr><tr><td></td><td>goo</td><td>goo</td><td>goo</td><td>goo</td><td>goo</td><td>goo</td><td>goo</td><td>goo</td></tr></table></body></html>
It's unclear to me why it's not formatting correctly in excel. My guess is that there's something in the headers I need to alter but I'm not sure.
I've also played around with other jquery plugins to export an html table to excel and have gotten the same result. Is this the expected behavior?
i wouldn't call this an issue, maybe my ignorance.
how do i export table with it borders?
Hi
I'm using your plugin for bootstrap table, it's great so thanks very much. I was wondering if it was possible to include hidden columns in the export. I would like to limit the data that the user sees on the table whilst also being able to export it all.
Thanks for your help!
Josh
Hi, excelent work with this plugin. Do you think is possible add the same ability of multiple tables in PDF but for the type XLS.
I have several tables inside a div, that i want to export in only one worksheet file. i tried using the div id, but the excel file returns blank.
thanks,
Dear,
Can you give me option to export all record with the datatable in pagination? I don't want to go to each page then export each to get full record.
I use DataTables jquey 1.10.2
Thank you.
well, since this is a web project, bower support would be nice.
I used this plugin with django platform.it works well.
When i add i18n for django,then changes webpage language from English to Chinese.It doesn't work.If webpage language back to English,it works well again.
the error is in JQuery.base64.js line 136:throw "INVALID_CHARACTER_ERR: DOM Exception 5";
UPDATE
After some testing I found out that I was way off base. The onclick
is working fine in both Safari and IE9. Instead, I believe my issue is with the exported files being blobs. Blobs are not supported in IE9, bu are in Safari. That leaves me unsure of what my issue is with Safari, but does anyone know of a different solution that doesn't involve blobs that I could use for compatibility with IE9?
ORIGINAL POST
I have a pretty standard use case involving tableExport, and it works fine everywhere except Safari and IE9. On IE9 I cannot export anything, and on Safari a new window is opened for each, and a CSV will at least load in the new window. Other file types just open blank windows. Here is the code:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Export
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="Javascript:void(0)" onclick="$('#countTable').tableExport({type:'json',escape:'false',ignoreColumn:[3]});">JSON</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="Javascript:void(0)" onclick="$('#countTable').tableExport({type:'csv',escape:'false',ignoreColumn:[3]});">CSV</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="Javascript:void(0)" onclick="$('#countTable').tableExport({type:'doc',escape:'false',ignoreColumn:[3]});">DOC</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="Javascript:void(0)" onclick="$('#countTable').tableExport({type:'excel',escape:'false',ignoreColumn:[3]});">XLS</a></li>
<!--<li role="presentation"><a role="menuitem" tabindex="-1" onclick="$('#countTable').tableExport({type:'png',escape:'false',ignoreColumn:[3]});">PNG</a></li>-->
<!--<li role="presentation"><a role="menuitem" tabindex="-1" onclick="$('#countTable').tableExport({type:'pdf',escape:'false',ignoreColumn:[3]});">PDF</a></li>-->
</ul>
</div>
and my table, which is rendered using bootstrap-table:
<table id="countTable" data-sort-name="plays" data-sort-order="desc" class="table table-responsive" data-toggle="table" data-url="http://www.energilive.com/admin/api/plays.php?type=<?php echo $_GET['type'];?>" data-striped="true" data-classes="table table-hover table-condensed" >
<thead>
<tr>
<th data-sortable="true" class="text-center" data-field="plays" data-formatter="playsFormatter">Plays</th>
<th data-field="title">Title</th>
<?php if ($_GET['type'] != 'summit') { ?>
<th class="text-center" data-field="id" data-tableexport-display="none" data-formatter="buttonFormatter">Actions</th>
<?php } ?>
</tr>
</thead>
</table>
Has anyone found a way to fix these issues on IE9 or Safari?
Is there any feature in the roadmap to allow a user to print a table using the browser printing funcionality?
If not, do you know any way of doing that? I don't want to export my table to a PDF in order to print it. I simple want my user to print the table he is seeing, but not the rest of the application.
Thanks.
When I export to CSV, somehow it adds  unicode characters at the beginning of the file. Following is my button on click event:
onClick ="$('#tablePurchasedItems').tableExport({fileName:'PurchasedGifts', type:'csv', ignoreColumn: [7], escape:'false'});"
I guess the file could be removed .... no ?
I have the impression that this jquery.base64.js file is more UTF-8 compatible than the current embedded version (see commit 335bacb ). Is that possible? Tested with libreOffice only.
Some complement (@hhurz ) :
Regarding UTF-8 and jquery.base64.js, I've seen in the code (around L358) :
downloadFile(defaults.fileName+'.'+extension, 'data:application/vnd.ms-'+defaults.type+';base64,' + base64data);
and tried :
downloadFile(defaults.fileName+'.'+extension, 'data:application/vnd.ms-'+defaults.type+';charset=utf-8;base64,' + base64data);
But I get the same encoding accent problem
@hhurz : thanks for the nice library update. issue #4 is fixed.
I think it would be nice to have a minified version of the library. Using closure, your 19 kB library get compressed to 8 kB.
I point you to a python tool I wrote for my online Filemanager : https://github.com/simogeo/Filemanager/blob/master/utils/minify.py. The use is simple :
python ./utils/minify.py
It just take a given file and create a minified version (tableExport.js
would become tableExport.min.js
)
If you are interested to implement it, I can prepare and pull the script. Just let me know.
Hello. When I try to export table like this:
<table id="tbl">
<thead>
<tr>
<th>Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Very long long long long long long long long long long long long long
long long long long long long long long long long long long long long
long long long long long long long long long long long long long Message
</td>
</tr>
<tr>
<td>
Second row
</td>
</tr>
</tbody>
</table>
to PDF format with properties:
{type:'pdf',
jspdf: {
autotable: {
styles: {overflow: 'linebreak',
fontSize: 26,
rowHeight: 36,
fillColor: 155},
headerStyles: {rowHeight: 28,
fontSize: 38}
}
}
}
height of cell is too small for content showing. Incorrect size cut bottom part of text.:
Padding and margin sizes do not change view of generated file.
When I use pagination, I just could export data of pagesize. How could I export all data?
Hello. When I try to export table like this:
<table id="tbl">
<thead>
<tr>
<th>Title</th>
</tr>
</thead>
<tbody>
<tr><td>row 1<td/><tr/> <tr><td>row 2<td/><tr/> <tr><td>row 3<td/><tr/> <tr><td>row 4<td/><tr/> <tr><td>row 5<td/><tr/>
<tr><td>row 6<td/><tr/> <tr><td>row 7<td/><tr/> <tr><td>row 8<td/><tr/> <tr><td>row 9<td/><tr/> <tr><td>row 10<td/><tr/>
<tr><td>row 11<td/><tr/> <tr><td>row 12<td/><tr/> <tr><td>row 13<td/><tr/> <tr><td>row 14<td/><tr/> <tr><td>row 15<td/><tr/>
<tr><td>row 16<td/><tr/> <tr><td>row 17<td/><tr/> <tr><td>row 18<td/><tr/> <tr><td>row 19<td/><tr/> <tr><td>row 20<td/><tr/>
<tr>
<td style="margin: 5px">
Very long long long long long long long long long long long long long
long long long long long long long long long long long long long long
long long long long long long long long long long long long long Message
</td>
</tr>
<tr>
<td>
Last row
</td>
</tr>
</tbody>
</table>
to PDF format with properties:
{type:'pdf',
jspdf: {
autotable: {
styles: {overflow: 'linebreak',
fontSize: 26,
rowHeight: 36,
fillColor: 155},
headerStyles: {rowHeight: 28,
fontSize: 38}
}
}
}
Can I configure behaviour of page breaks? I see two additional variant of page breaking:
Updated from original to yours, super update indeed!
But, hit a snag with pdf
the generated pdf is like this
Any tips?
Best regards
hi, this is a great plugin, but I have the issue that after the while loop, I have another tr with the total of amounts, and when I made the export, excludes this last tr, I´ve already tried the: data-tableexport-display="always", and still not working... any idea?
table export not work on IE8 when I visit index.html, it said the page have some mistakes
when i click png or "Ms-Powerpoint" nothing happens
Hey,
I am having the issue with exporting table for the 2nd time without refresh. It goes through nicely 1st time but for the second chrome reports problem with the file that it does not exists.. Tried PDF and CSV, same behavior. I did enable logging and it seems data get parsed correctly which makes me think the issue might be with saving it at users end..
I am using angular directive for doing that (as explained here). And I do have FileSaver included..
Any help will be appreciated.. thanks! Michal
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.