文件導出在軟件開發中是個比較常用的功能,基本原理也很簡單:
- 瀏覽器向後臺發送一個Get請求
- 後臺處理程序接收到請求後,經過處理,返回二進制文件流
- 瀏覽器接收到二進制文件流後提示下載文件
調用的js方法如下 , 通過URL傳值的方式Get請求到後臺處理程序
function expExcel(){ var url="../function/expExcel?ExportUnit=謹華控股"; window.location.href=url; }
這種方式雖然簡單實用,但在有些情況下也不適用。比如只能採用GET方法,傳遞參數不能太複雜。一般需要在調用的頁面創建一個隱藏iframe。。。。。
下面一個angularjs 的一個導出實例
self.excel = function() { var dataUrl = "http://www.order.com/list/excel"; $http({ method: 'post', url: dataUrl, data: {}, transformRequest: function(data) { return $.param(data); }, headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, responseType: 'arraybuffer' }).success(function(data) { var blob = new Blob([data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }); var da = new Date(); var fileName = "數據導出" + da.getFullYear() + '-' + (da.getMonth() + 1) + "-" + da.getDate() + ".xlsx"; self.saveas(blob, fileName); }); }; self.saveas = function(blob, fileName) { if (window.navigator.msSaveOrOpenBlob) { // For IE: navigator.msSaveBlob(blob, fileName); } else { // For other browsers: var link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); link.download = fileName; link.click(); window.URL.revokeObjectURL(link.href); } }
一直以來,JS都沒有比較好的可以直接處理二進制的方法。而Blob的存在,允許我們可以通過JS直接操作二進制數據。
Blob對象可以看做是存放二進制數據的容器,此外還可以通過Blob設置二進制數據的MIME類型。
var blob = new Blob([data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });