I'm using this plugin in my TypeScript webpart for SharePoint Online
I've included jquery
and table2excel
in the script and everything not related to table2excel
is working fine.
import * as $ from 'jquery';
require('table2excel');
I have installed 'table2excel' by using npm i table2excel
Then when I try to use table2excel
it returns the following error:
```
$(...).table2excel is not a function ```
(<any>$("#ViewTablehidden")).table2excel({
exclude: ".noExl",
name: "title",
filename: "title",
fileext: ".xls",
exclude_img: true,
exclude_links: true,
exclude_inputs: true
});
Why can't I get it to work?
You're pulling in the wrong package. You need to use jquery-table2excel
instead of table2excel
.
It looks like the NPM packages times out. The package is available through Bower (which you can ref as an import) or you can link directly to CDN assets. Here's an example to show you with import directly from URL.
$('#download').on('click', function(){
$(".table2excel").table2excel({
exclude: ".noExl",
name: "Excel Document Name",
filename: "myExcelFile.xls",
fileext: ".xls",
exclude_img: true,
exclude_links: true,
exclude_inputs: true
});
});
body {
font-family: Arial;
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
}
table thead tr th {
background: #f0f0f0;
border-bottom: 2px solid #ddd;
}
table th,
table td {
padding: 5px;
}
button {
background: navy;
color: white;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>
<table class="table2excel" data-tableName="Test Table 1">
<thead>
<tr class="noExl"><th>This shouldn't get exported</th><th>This shouldn't get exported either</th></tr>
<tr><th>This Should get exported as a header</th><th>This should too</th></tr>
</thead>
<tbody>
<tr>
<td>data1a with a <a href="#">link one</a> and <a href="#">link two</a>.</td>
<td>data1b with a <img src="image_file.jpg" alt="image">.</td></tr>
<tr>
<td>data2a with a <input tyle="text" value="text value">.</td>
<td>data2b with a <input tyle="text" value="second text value">.</td>
</tr>
</tbody>
<tfoot>
<tr><td colspan="2">This footer spans 2 cells</td></tr>
</tfoot>
</table>
<table class="table2excel" data-tableName="Test Table 2">
<thead>
<tr class="noExl"><td>This shouldn't get exported</td><td>This shouldn't get exported either</td></tr>
<tr><td>This Should get exported as a header</td><td>This should too</td></tr>
</thead>
<tbody>
<tr><td>data1a</td><td>data1b</td></tr>
<tr><td>data2a</td><td>data2b</td></tr>
</tbody>
<tfoot>
<tr><td colspan="2">This footer spans 2 cells</td></tr>
</tfoot>
</table>
<button id="download">Download</button>
or using table2excel
(not the jQuery plugin)
install
npm i table2excel --save
use
import 'table2excel';
const Table2Excel = window.Table2Excel;
const table2excel = new Table2Excel({
exclude: ".noExl",
name: "Excel Document Name",
filename: "myExcelFile",
exclude_img: true,
exclude_links: true,
exclude_inputs: true
});
table2excel.export(document.querySelector('.table2excel'));