Export extension clarify dependencies and import order in documentation?

[kwagdy]

I am trying to work out the export extension to add it to our page, but the documentation seems a bit ambiguous about it.

I have tried several combinations and order of importing the required JS scripts (which also is not exactly clear which JS scripts are required) and it still does not seem to work. Can you please clarify in clear points what dependencies are required to import in the docs page for Export Extension? In general I think it would be nice to show code snippets on the examples page

At some point I received an error "js-xlsx is required" or something of that sort. Which sounds like another dependency that needs to be added..

At the end of the day, this is the last code and JS import order that I'm using now, this does not give out an error on the console, but unfortunately, the result is that at the bottom of the table buttons show up with each file type to be clicked on to export, instead of directly exporting and downloading the file. See here https://jsfiddle.net/o1bLxa2s/

<table dir="rtl" class="table table-condensed" data-toggle="table" data-striped="true" id="myTable" data-unique-id="tid" data-show-columns="true" data-show-export="true" data-export-types="['json', 'xml', 'csv', 'txt', 'sql', 'excel', 'pdf']" data-export-options='{"filename": "report"}'>
...
</table>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.14.2/bootstrap-table.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.14.2/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.14.2/locale/bootstrap-table-ar-SA.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.14.2/extensions/natural-sorting/bootstrap-table-natural-sorting.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.14.2/extensions/print/bootstrap-table-print.min.js"></script>

<!-- For Export -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.2/xlsx.core.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.14.2/extensions/export/bootstrap-table-export.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/TableExport/5.2.0/js/tableexport.min.js"></script>

In the example page Bootsrtap3 - Export extension it works, but referring to the github code for the export plugin shows only the import of tableExport.min.js, jspdf.min.js, jspdf.plugin.autotable.js and bootstrap-table-export.min.js. Not sure what happened to the rest of the export options or why do they appear if only PDF JS was imported!

Trying to show page code or frame code for the example code page doesn't seem to help either..

Can you please add the steps to a working export extension?

Thank you very much

[UtechtDustin]

I agree, the documentation for the export extension is not good enough and should be improved (PRs are welcome).

Btw. on the example page are code snippet, simply click on the </> icon (Example).

[kwagdy]

I had not noticed the </> icon at all 👀 !! It would help if it is more clear? maybe say "View code"?!

[kwagdy]

@UtechtDustin Also can you help me understand why those weird unformatted buttons appear at the bottom after the table, as in the fiddle, instead of directly having the file exported and downloaded!

[kwagdy]

Never mind! Re arranging as the example code page removed this weird button appearing behavior and exports directly. Though now I seem to get an error on the console saying

bootstrap-table-export.min.js:10 Uncaught TypeError: a is not a function at Object.onAfterSaveToFile (bootstrap-table-export.min.js:10) at tableExport.min.js:40

<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF/jspdf.min.js"></script> 
<script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.14.2/bootstrap-table.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.14.2/extensions/export/bootstrap-table-export.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.14.2/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.14.2/locale/bootstrap-table-ar-SA.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.14.2/extensions/natural-sorting/bootstrap-table-natural-sorting.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.14.2/extensions/print/bootstrap-table-print.min.js"></script>

[UtechtDustin]

Could you provide us an example for this issue ?

[kwagdy]

Here you go https://jsfiddle.net/aL32vbrp/1/. Export to any format and check the console

[kwagdy]

Side but important note... Export to PDF shows strange characters instead of the actual language

[UtechtDustin]

The bug a is not a function, is not relevant you can ignore it. But the "bug" is also already fixed in our develop branch (fixed in commit https://github.com/wenzhixin/bootstrap-table/commit/3148edc98eb5fdf149a2ba79c7b1c4210e334080#diff-d7a23377d26f6a2c005ee0b16f07ac18L189)

[UtechtDustin]

The strange characters are a bug of the export plugin i guess, so please test it with only the export plugin and open an issue on their repository.

[kwagdy]

You are correct, this is related to the external library. I traced it and found that jsPDF doesn't support RTL UTF languages and people suggested using pdfmake instead and set its options to enabled: true and set the font. I followed the example here and docs here since the default Roboto font didn't work for me (exported strange characters too). Had to download Mirza font and save it in JS format and set its options.

[wenzhixin]

Updated the example: https://examples.bootstrap-table.com/index.html#extensions/export.html in the latest version. Close this issue in this project, if you need to help please create an issue to the external library repo.