Question

我正在运行NodeJS并已通过npm安装了table2csv软件包

 sudo npm install table2csv

现在，我正在尝试在网页中使用此程序包，但我不知道如何正确调用它，这是我的示例：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <!--/var/www/node_modules/table2csv/dist/table2csv.min.js-->
    <script src=”node_modules/table2csv/dist/table2csv.min.js”></script>

    <script>function exportCSV(){
        var csv = $("#fullDataTable").table2CSV();
        window.location.href = 'data:text/csv;charset=UTF-8,'+ encodeURIComponent(csv);
    }
    </script>

</head>
<body>
    <table id="fullDataTable">
        <thead>
            <tr>
              <th>Foo.</th>
              <th>bar.</th>
              <th>bla.</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>
    <Button onclick="exportCSV()">DOWNLOAD</button>
</body>
</html>

该软件包的完整路径为/var/www/node_modules/table2csv/dist/table2csv.min.js，并且我尝试使用../node_modules/table2csv/dist/table2csv.min.js之类的变体，因为我的网页文件位于/var/www/views中。

（当前网页正确显示，但是当我单击Download按钮时没有任何反应）

如何正确调用包裹？

------更新------

我添加了一个CDN链接，但功能/按钮仍然无法正常工作

<head>
<meta charset="utf-8">
<!--/var/www/node_modules/table2csv/dist/table2csv.min.js-->
<script src="https://cdn.jsdelivr.net/npm/table2csv@1.1.3/src/table2csv.min.js"></script>

<script>function exportCSV(){
    var csv = $("#fullDataTable").table2CSV();
    window.location.href = 'data:text/csv;charset=UTF-8,'+ encodeURIComponent(csv);
}
</script>
</head>

----更新2 ----

始终使用table2csv导入之前的jQuery！

（该问题仍未得到解决，因为该库无法加载

----更新3 -----

使用CDN链接时，控制台给我以下错误

在Uncaught SyntaxError: Unexpected token < table2csv.min.js:1上的

<!doctype html>似乎很奇怪

Uncaught TypeError: document.getElementById(...).table2csv is not a function
at exportCSV (about:11)
at HTMLButtonElement.onclick (about:34)

第11行：var csv = document.getElementById('fullDataTable').table2csv();

----更新4 ----

我放弃了，只是将table2csv.js的内容复制到了HTML中的<script>块中。哈利路亚。

Answer 1

使用npm时，您进入的是 module 世界（与您可能习惯的静态脚本世界相反）。因此，已安装软件包所在的文件夹名为node-modules。

模块通常不会影响全局名称空间，这意味着它们不会提供任何可用于全局调用的内容，例如像onclick=""之类的内联事件侦听器。

您不能直接从HTML引用任何node_modules软件包，这将是一个巨大的安全问题，因为通常node_modules不在您的Webroot内部，并且允许访问Webroot外部的文件和文件夹是非常不安全。

您现在有三个选择：

深入了解 webpack 等模块和模块捆绑器的世界。在了解和理解您正在做的事情的同时，大概需要3个月的时间来理解和使用它。如果您打算进行繁重的Javascript开发，则无法解决此问题。
将/var/www/node_modules/table2csv/dist/table2csv.min.js复制到您的项目文件夹，并像使用您自己的Javascript一样包含它。不利之处在于，每次更新软件包时，您都必须手动执行此操作。

找到一个托管所需文件的CDN（内容分发网络），然后从那里引用它。

<script src="https://cdn.jsdelivr.net/npm/table2csv@1.1.3/dist/table2csv.min.js" integrity="sha256-O3PXZsVrc25oRq6k38cesC5NsdZOD/tMdjQXEWdaaZU=" crossorigin="anonymous"></script>

使用NodeJS / npm调用本地JS包

1 个答案: