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?

National

this? // npm install table2excel --save import 'table2excel'; const Table2Excel = window.Table2Excel; const table2excel = new Table2Excel(options); – Antifederalist

@Cristian not working, It says, Property ' table2excel' does not exist on type window – National

Answer 1

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

Piccalilli

When I use the following line import 'table2excel'; I get this error: Unexpected anonymous AMD define – National

I'ts not posible to post a snippet since this is a SharePoint framework problem with importing npm files. – National

This library is a jquery plugin, so you can not import table2excel. Moreover, no need to import though – Backwards

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. – Piccalilli

Answer 2

if (selectedValue === "excel") {
  $("#table_report, #total_table").table2excel({
    exclude: ".noExl",
    name: "Excel Document Name",
    filename: "table_report.xls",
    fileext: ".xls",
    preserveColors: false,
  });
}

<div class="container table-report mt-3">
  <table style="text-align: right" id="table_report">
    <thead>
      <tr>
        <th>text</th>
        <th>text</th>
        <th>text</th>
        <th>text</th>
        <th>text</th>
        <th>text</th>
        <th>text</th>
        <th>text</th>
        <th> text</th>
        <th>text</th>
        <th>text</th>
        <th>text</th>
        <th>text</th>
        <th>textا </th>
        <th> text</th>
        <th>text</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  <table id="total_table">
    <thead>
      <tr>
        <th style="width: 5%;"></th>

      </tr>
    </thead>
    <tbody>
      <!-- Total row will be appended here -->
    </tbody>
  </table>
</div>

Themistocles