前端导出Excel技巧-优快云博客

本文介绍两种前端导出Excel的方法：一是使用ng-csv适用于Angular项目；二是利用FileSaver.js，适合所有前端项目，包括Angular。通过示例代码详细说明了如何实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天分享一下如何在前端应用中导出excel。

如果你是用angular，那么可以使用ng-csv，ng-csv导出的是csv文件，并不是.xls等常规excel格式的文件，但是csv也是可以通过excel打开的，属于曲线救国吧- -

使用方法：
1.将ng-csv.min.js引用到index.html中，并且还要同时引入angular-sanitize.min.js（ng 安全模块，应对XSS）
2.引入ngCsv组件，var myapp = angular.module('myapp', ['ngSanitize', 'ngCsv'])
3.在需要使用的地方加上ng-csv指令，比如：

<button class="btn btn-default"
        ng-csv="getArray" 
        csv-header="getHeader()"
        filename="test.csv">
		导出CSV</button>

此时在js中应有对应的getArray对象和getHeader()方法：

 $scope.getArray = [{a: 1, b:2}, {a:3, b:4}];
 $scope.getHeader = function () {return ["A", "B"]};

如此点击button即可导出。

如果你不是使用的angular，那么可以使用FileSaver.js，当然FileSaver在angular应用里也是通用的。

地址：https://github.com/eligrey/FileSaver.js/

事实上，从FileSaver这个名字可以看出，这个插件并不仅仅可以用来导出excel，它是能导出file的，具体的看上面github便知，我这边说下导出excel。
我们只要在H5页面里有一个table，并且这个table在id为exportable的div下：

 <div id="exportable">
      <table>
            <thead >
            <tr>
                <th class="th_style">部门</th>
                <th class="th_style">姓名</th>
                <th class="th_style">身份证</th>
             </tr>
            </thead>
		    <tbody>
            <tr>
	            <td>department</td>
                <td>name</td>
                <td>nationalid</td>
			 </tr>
		    </tbody>
	  </table>
 </div>

对应的导出按钮的click事件：

$scope.output=function () {
	 var blob = new Blob([document.getElementById('exportable').innerHTML], {
        type: "application/vnd.ms-excel;charset=utf-8"
      });
      saveAs(blob, "Report.xls");
    }

如此即可导出。