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

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。