TypeScript无法加载/使用table2excel

Question

我在我的TypeScript webpart for SharePoint Online中使用此插件

我已经包含jquery并且table2excel在脚本中,所有与之无关table2excel的工作正常.

import * as $ from 'jquery';
require('table2excel');

我使用安装'table2excel' npm i table2excel

然后当我尝试使用table2excel它时返回以下错误:```

$(...).table2excel不是函数```

(<any>$("#ViewTablehidden")).table2excel({
    exclude: ".noExl",
    name: "title",
    filename: "title",
    fileext: ".xls",
    exclude_img: true,
    exclude_links: true,
    exclude_inputs: true
});

为什么我不能让它工作？

Answer 1

你拉错了包裹。您需要使用jquery-table2excel而不是table2excel.

NPM 包似乎超时了。该包可通过 Bower 获取（您可以将其引用为导入），也可以直接链接到 CDN 资产。下面是一个示例，向您展示如何直接从 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>

或使用table2excel（不是 jQuery 插件）

安装

npm i table2excel --save

使用

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