关于文件导出(下载)功能不兼容IE浏览器的解决方案
先来看主流的文件导出或下载的解决方案,代码如下:
1 <script> 2 function saveFile(file){ 3 var element = document.createElement('a'); 4 element.setAttribute('href',encodeURIComponent(file.data)); 5 element.setAttribute('download', file.name); 6 document.body.appendChild(element); 7 element.click(); 8 document.body.removeChild(element); 9 } 10 </script>
为了便于理解,后台php伪代码如下:
1 <?php 2 function generateData() { 3 $path = './report/'; 4 if (!is_dir($path)) { 5 mkdir($path,0777);//目录不存在就创建一个 6 } 7 $file = [ 8 'path' => $path, 9 'name' => "data_export_".date("YmdHis").".csv" 10 ]; 11 file_put_contents($file['path'].$file['name'], $csvData); 12 $handle = file_get_contents($file['path']. $file['name']); 13 $strs = base64_encode($handle); 14 $result = Array( 15 'data' => $strs, 16 'name' => $file['name'] 17 ); 18 return json_encode($result); 19 } 20 ?>
但是这种方式并不兼容目前主流的IE浏览器,据说IE9 以上的IE浏览器都会报一个 request URI too large 的错误,IE8的浏览器反而可以....那么下载功能如何做到兼容呢?代码
其实很简单,建议深入了解一下Blob对象
1 <script> 2 function (file) { 3 var blob = new Blob([window.atob(file.data)], {type: "text/csv"});
//因为后台base_64编码了,这里window.atob解码一下 4 window.navigator.msSaveBlob(blob,file.name); 5 }//注意:msSaveBlob这个方法对Google&Chrome无效 6 </script>
解决这个bug的过程真正的感受到了什么叫'车到山前必有坑,船到桥头自然沉',最后快要放弃的时候在故纸堆里一块好久没人维护的代码里找到了类似的解决方案,才知道js还有Blob这么个对象.过后自己又到网上查了下关于Blob的资料才发现有很多前人已经给出了很完美的解决方案,只是我没找到而已,因为压根儿不知道Blob对象,所以关键字完全对不上,不管怎样突破盲点的感觉很爽...最后放一段简单的Blob学习代码:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 5 <title>Bolb测试一</title> 6 </head> 7 <body> 8 <button id="btn" onclick="saveFile()">点击下载</button> 9 <script type="text/javascript"> 10 function saveFile(){ 11 var fileObj = new Blob(['How are you?'],{type:'text/plain'}); 12 console.log(fileObj); 13 window.navigator.msSaveBlob(fileObj,'BlobDemo.txt'); 14 } 15 </script> 16 </body> 17 </html>
