Question

我有一个功能，可以将表数据下载到csv中。但是按钮功能仅在将其放在index.html页面中而表在subpage.html页面中时才起作用。但是以某种方式，当我导航到该页面时，索引页面中的按钮可以下载该subpage.html中的表数据。

Index.html：此处的按钮有效

      <body>
      <header ng-include="'views/header.html'"></header>
      <main ng-view></main>
      <button type="button" id="btnDownload"> Download as CSV</button>
      </body>

Subpage.html：如果我将按钮放在此处不起作用

      <div>
          <table id="tabletodownload" ng-show="auditoriums === 'none'" style="border:1px solid #000;">

                  <tr> <th> Customer Name </th> <th> Order Value </th> <th> Ordered On </th> </tr>

                  <tr ng-repeat="audit in auditoriums| limitTo: 1 - auditoriums.length">
                    <td>{{audit.NAME}}</td>
                    <td>{{audit.ADDRESSBLOCKHOUSENUMBER}}</td>
                    <td>{{audit.ADDRESSPOSTALCODE}}</td>
                    <td>{{audit.ADDRESSSTREETNAME}}</td>
                  </tr>

          </table>
          <br />
      </div>
      <button type="button" id="btnDownload"> Download as CSV</button>

从DL到csv的Javascript代码：

      $(function() {
       $('#btnDownload').click(function() {
               $("#tabletodownload").tableToCSV({
                   filename: 'CustomerList'
               });
           });
      });

      jQuery.fn.tableToCSV = function (options) {
          var settings = $.extend({
              filename: ""
          }, options);
          var clean_text = function (text) {
              text = $.trim(text.replace(/"/g, '""'));
              return '"' + text + '"';
          };
          $(this).each(function () {
              var table = $(this);
              var caption = settings.filename;
              var title = [];
              var rows = [];
              $(this).find('tr').each(function () {
                  var data = [];
                  $(this).find('th').each(function () {
                      var text = clean_text($(this).text());
                      title.push(text);
                  });
                  $(this).find('td').each(function () {
                      var text = clean_text($(this).text());
                      data.push(text);
                  });
                  data = data.join(",");
                  rows.push(data);
              });
              title = title.join(",");
              rows = rows.join("\n");
              var csv = title + rows;
              var uri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv);
              var download_link = document.createElement('a');
              download_link.href = uri;
              var ts = new Date().getTime();
              if (caption == "") {
                  download_link.download = ts + ".csv";
              } else {
                  download_link.download = caption + "-" + ts + ".csv";
              }
              document.body.appendChild(download_link);
              download_link.click();
              document.body.removeChild(download_link);
          });
      };

Answer 1

如果index.html和subpage.html是2个不同的页面（而不是angularjs模板或类似的东西），则可能是因为处理按钮单击的代码而函数的其余部分不存在subpage.html。

又快又脏

我认为您没有使用任何构建工具。最简单的方法是将按钮功能移至subpage.html

内的脚本标签

angularjs方式

我看到您在项目中使用angularjs。像按钮单击一样手动附加evenlisterens不是angularjs的处理方式。您可以轻松地将功能移至控制该页面的角度控制器，并在调用该函数的按钮上添加ng-click属性。这样，您可以让框架决定何时以及hpw附加click事件监听器，而不是自己管理。

顺便说一句... 大多数情况下，使用诸如angular / react / vue之类的框架使jQuery变得不必要。在这种情况下，您还可以使用为amgularjs设计的库，以从表中创建csv。 jQuery非常是 DOM 的思维方式，而angular则更是 DATA 的思维方式。我认为，为什么最好不要混合使用这些东西。

这可能会帮助您： https://github.com/kollavarsham/ng-table-to-csv

在子页面中时，按钮功能不起作用

1 个答案: