TypeScript unable to load / use table2excel

Question

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?

this? // npm install table2excel --save import 'table2excel'; const Table2Excel = window.Table2Excel; const table2excel = new Table2Excel(options); — , Jun 13 '18 at 13:16
@Cristian not working, It says, Property ' table2excel' does not exist on type window — , Jun 13 '18 at 14:01

dysfunc · Accepted Answer · 2018-08-09T17:15:46.730

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'));

When I use the following line `import 'table2excel';` I get this error: `Unexpected anonymous AMD define` — , Aug 10 '18 at 07:46
I'ts not posible to post a snippet since this is a SharePoint framework problem with importing npm files. — , Aug 13 '18 at 07:57
This library is a jquery plugin, so you can not import `table2excel`. Moreover, no need to import though — hgiasac, Aug 15 '18 at 16:50
I provided a secondary example using the NPM lib. The NPM package is not a jQuery plugin. It's a standalone version of the `table2excel` library. — dysfunc, Aug 15 '18 at 16:59

TypeScript unable to load / use table2excel

1 Answers1