Question

我有一个由表组成的div元素。表值是从json数组获取的，我必须创建一个新的数组行，它现在还使用导出按钮显示在表中我必须在特定文件名和特定路径中的csv文件中导出表值。出口：

$("#export").click(function(e) {
    alert('inside export method');
    var a = document.createElement('a');
    //getting data from our div that contains the HTML table
    var data_type = 'data:application/vnd.ms-excel';
    var table_div = document.getElementById('exportdata');
    var table_html = table_div.outerHTML.replace(/ /g, '%20');
    alert(table_html);

    a.href = data_type + ', ' + table_html;
    //setting the file name
    alert("pname"+pname);
    a.download = 'export.xls';
    alert('after got a id');
    //triggering the function
    a.click();

    //just in case, prevent default behaviour
    e.preventDefault();

});

这是xls的代码，但是我必须将值存储在csv文件中，并且名称必须具体，每次导出值时都应该在与最后一行相同的文件中更新。

HTML：

<div id="exportdata">
<table class="table table-bordered table-striped tablelink">

<thead>
  <tr>
    <td>
      <a href="#" ng-click="sortType = 'issueno'; sortReverse = !sortReverse">
        ISSUE NO
        <span ng-show="sortType == 'issueno' && !sortReverse" class="fa fa-caret-down"></span>
        <span ng-show="sortType == 'issueno' && sortReverse" class="fa fa-caret-up"></span>
      </a>
    </td>
    <td>
      <a href="#" ng-click="sortType = 'dateassigned'; sortReverse = !sortReverse">
      DATE ASSIGNED
        <span ng-show="sortType == 'dateassigned' && !sortReverse" class="fa fa-caret-down"></span>
        <span ng-show="sortType == 'dateassigned' && sortReverse" class="fa fa-caret-up"></span>
      </a>
    </td>
    <td>
      <a href="#" ng-click="sortType = 'assignedby'; sortReverse = !sortReverse">
      ASSIGNEDBY
        <span ng-show="sortType == 'assignedby' && !sortReverse" class="fa fa-caret-down"></span>
        <span ng-show="sortType == 'assignedby' && sortReverse" class="fa fa-caret-up"></span>
      </a>
    </td>
    <td>
      <a href="#" ng-click="sortType = 'issuetype'; sortReverse = !sortReverse">
      ISSUE TYPE
        <span ng-show="sortType == 'issuetype' && !sortReverse" class="fa fa-caret-down"></span>
        <span ng-show="sortType == 'issuetype' && sortReverse" class="fa fa-caret-up"></span>
      </a>
    </td>
    <td>
      <a href="#" ng-click="sortType = 'priority'; sortReverse = !sortReverse">
      PRIORITY
        <span ng-show="sortType == 'priority' && !sortReverse" class="fa fa-caret-down"></span>
        <span ng-show="sortType == 'priority' && sortReverse" class="fa fa-caret-up"></span>
      </a>
    </td>
    <td>
      <a href="#" ng-click="sortType = 'targetdate'; sortReverse = !sortReverse">
      TARGET DATE
        <span ng-show="sortType == 'targetdate' && !sortReverse" class="fa fa-caret-down"></span>
        <span ng-show="sortType == 'targetdate' && sortReverse" class="fa fa-caret-up"></span>
      </a>
    </td>
    <td>
      <a href="#" ng-click="sortType = 'status'; sortReverse = !sortReverse">
      STATUS
        <span ng-show="sortType == 'status' && !sortReverse" class="fa fa-caret-down"></span>
        <span ng-show="sortType == 'status' && sortReverse" class="fa fa-caret-up"></span>
      </a>
    </td>
    <td>
      <a href="#" ng-click="sortType = 'attachment'; sortReverse = !sortReverse">
      ATTACHMENT
        <span ng-show="sortType == 'attachment' && !sortReverse" class="fa fa-caret-down"></span>
        <span ng-show="sortType == 'attachment' && sortReverse" class="fa fa-caret-up"></span>
      </a>
    </td>
    <td  style='visibility:hidden'>
      <a href="#" ng-click="sortType = 'description'; sortReverse = !sortReverse">
      DESCRIPTION
        <span ng-show="sortType == 'description' && !sortReverse" class="fa fa-caret-down"></span>
        <span ng-show="sortType == 'description' && sortReverse" class="fa fa-caret-up"></span>
      </a>
    </td>
  </tr>
</thead>

<tbody>
  <tr ng-repeat="roll in sushi | orderBy:sortType:sortReverse | filter:searchcon">
    <td ng-click="display(roll.issueno);"><a href="#">{{ roll.issueno }}</a></td>
    <td>{{ roll.dateassigned }}</td>
    <td>{{ roll.assignedby }}</td>
    <td>{{ roll.issuetype}}</td>
    <td>{{ roll.priority}}</td>
    <td>{{ roll.targetdate}}</td>
    <td>{{ roll.status}}</td>
    <td>{{ roll.attachment}}</td>
    <td style='visibility:hidden'>{{roll.description}}</td>
  </tr>
  <tr id="newr">
  </tr>
</tbody>

使用一些导出按钮，每当新记录存储在表中时，该文件应该替换

Answer 1

我建议使用angular-file-saver包来保存文件。

更好的方法是直接遍历模型sushi，而不是通过生成的HTML。

如何将div值转换为特定文件名和特定路径中的csv文件

1 个答案: