JSFiddle - React, Tailwind, and code Playground
by cesar nieto
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/extensions/export/bootstrap-table-export.js"></script>
<table id="tblBnEc" class= "tabla-metas1 EncaTablametas table-striped" style="cursor: pointer;" data-show-export="true" data-export-types="['excel', 'pdf']" data-export-options='{
"htmlContent" : "true",
"jspdf": {
"autotable": {
"startY": 20,
"bodyStyles": {"valign": "top"},
"styles": {"overflow": "linebreak", "rowHeight": 20, "fontSize": 10, "font": "helvetica"},
"headerStyles": {"fillColor": [41, 128, 185]},
"tableWidth": "wrap"
}
}
}'></table>
JavaScript
'use strict';
(function ($) {
$.fn.tableExport = function (options) {
var defaults = {
csvEnclosure: '"',
csvSeparator: ',',
csvUseBOM: true,
displayTableName: false,
escape: false,
exportHiddenCells: false, // true = speed up export of large tables with hidden cells (hidden cells will be exported !)
fileName: 'tableExport',
htmlContent: false,
ignoreColumn: [],
ignoreRow: [],
jsonScope: 'all', // head, data, all
jspdf: { // jsPDF / jsPDF-AutoTable related options
orientation: 'p',
unit: 'pt',
format: 'a4', // One of jsPDF page formats or 'bestfit' for autmatic paper format selection
margins: {left: 20, right: 10, top: 10, bottom: 10},
onDocCreated: null,
autotable: {
styles: {
cellPadding: 2,
rowHeight: 12,
fontSize: 8,
fillColor: 255, // Color value or 'inherit' to use css background-color from html table
textColor: 50, // Color value or 'inherit' to use css color from html table
fontStyle: 'normal', // normal, bold, italic, bolditalic or 'inherit' to use css font-weight and fonst-style from html table
overflow: 'ellipsize', // visible, hidden, ellipsize or linebreak
halign: 'inherit', // left, center, right or 'inherit' to use css horizontal cell alignment from html table
valign: 'middle' // top, middle, bottom
},
headerStyles: {
fillColor: [52, 73, 94],
textColor: 255,
fontStyle: 'bold',
halign: 'inherit', // left, center, right or 'inherit' to use css horizontal header cell alignment from...