Question

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

我在脚本中添加了jquery和table2excel，与table2excel无关的所有内容都正常运行。

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

我使用npm i table2excel

安装了'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资产。这是一个example，向您展示直接从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'));

TypeScript无法加载/使用table2excel

1 个答案: