前端導出文件方式

咱們在平常開發中, 常常會遇到須要將查詢結果導出爲Excel, PDF等等文件的需求. 下面, 我將爲你們介紹一下幾種比較常見的導出方式.

##1. 服務器轉發方式

這種方式應該是應用的最廣泛的方式了, 一般咱們會將頁面元素收集起來發送給服務端, 或者乾脆直接調用服務端接口, 由服務端直接獲取數據並拼裝爲對應的文件格式, 最後將數據拼入 HTTP Response 中並對 Header 處理, 最後返回給客戶端, 實現文件下載.

一般對於 HTTP Header 處理方式以下:

1. 添加 Content-type: <MIME Type>
2. 添加 Content-Disposition: attachment; filename=」<file_name.ext>」

<?php

$file = $_GET['file'];  

header('Content-type: application/excel');

header('Content-Disposition: attachment; filename="'.$file.'"');

?>

這種作法的好處是不會存在瀏覽器兼容性的問題, 以及後端含有豐富的文件處理框架, 例如: Java可使用 Apache 的 POI, JXL等.

缺點則是, 會增長與服務器的交互, 若是採起前臺獲取數據傳遞給服務器的方式, 會產生巨大的開銷.

##2. ActiveXObject 與 execCommand

ActiveXObject 中可使用例如 Excel.application 來建立 Excel 對象並保存之本地.

另外一種方式則是經過 execCommand 的 SaveAs 參數進行文件的保存, 例如:

var doc = window.document;
doc.open('application/CSV','replace');
doc.charset = "utf-8";
doc.write("col1,col2");
doc.close();
doc.execCommand("SaveAs",null,"demo.csv")

以上兩種方式均存在一個致命的缺點, 那就是隻有 IE 支持, 因此對於開發來講幫助有限.

##3. data 協議

這種方式經過指定一個資源的 data URI 來實現文件的導出下載功能.

function download(text, name) {
  var link = document.createElement("a");
  link.download = name;
  link.href = 'data:text/html,' + encodeURIComponent(text);
  link.click();
}
download("Hello, World!", "helloWorld.txt");

data協議的語法以下:

data:[sMediaType;][sBase64Encoding;],sResourceData

若是是指純文本內容, 只須要把文本嵌入到 URI 中便可, 如:

var uri = 'data:,Hello%2C%20World!' //Hello, World

若是是其餘類型文件, 則須要將文件內容轉化爲 Base64 格式, 能夠經過一些開源的框架實現, 例如: js-base64, base64-js等, 或者利用 WindowBase64.btoa() 函數, 詳細內容請參考MDN的文章.

##4. HTML5

HTML5 中, 能夠經過 window.URL.createObjectURL 方法來建立一個新的對象URL,該對象URL能夠表明某一個指定的File對象或Blob對象.

var text = 'Hello, World!';
var MIME_TYPE = 'text/plain';

var downloadFile = function() {
  window.URL = window.webkitURL || window.URL;

  var bb = new Blob([text], {type: MIME_TYPE});

  var a = document.createElement('a');
  a.download = 'demo.txt';
  a.href = window.URL.createObjectURL(bb);
  a.textContent = 'Download ready';
  a.dataset.downloadurl = [MIME_TYPE, a.download, a.href].join(':');
  a.click();
};

downloadFile();

##5. 開源框架

Downloadify:

//官方例子:
Downloadify.create('downloadify',{
  filename: function(){
    return document.getElementById('filename').value;
  },
  data: function(){ 
    return document.getElementById('data').value;
  },
  onComplete: function(){ 
    alert('Your File Has Been Saved!'); 
  },
  onCancel: function(){ 
    alert('You have cancelled the saving of this file.');
  },
  onError: function(){ 
    alert('You must put something in the File Contents or there will be nothing to save!'); 
  },
  transparent: false,
  swf: 'media/downloadify.swf',
  downloadImage: 'images/download.png',
  width: 100,
  height: 30,
  transparent: true,
  append: false
});

jsZip: jsZip 是一個用於建立, 讀寫 .zip 格式壓縮文件的框架, 可是經過一些技巧, 例如: 構建 XML文件以及一些二進制文件, 生成Excel的壓縮格式, 最終轉換爲Excel進行導出.

var fileName = 'demo.xls';
var zip           = new window.JSZip();
var _rels         = zip.folder("_rels");
var xl            = zip.folder("xl");
var xl_rels       = zip.folder("xl/_rels");
var xl_worksheets = zip.folder("xl/worksheets");

zip.file(           '[Content_Types].xml', excelStrings['[Content_Types].xml'] );
_rels.file(         '.rels',               excelStrings['_rels/.rels'] );
xl.file(            'workbook.xml',        excelStrings['xl/workbook.xml'] );
xl_rels.file(       'workbook.xml.rels',   excelStrings['xl/_rels/workbook.xml.rels'] );
xl_worksheets.file( 'sheet1.xml',          excelStrings['xl/worksheets/sheet1.xml'].replace( '__DATA__', xml ) );

var exeelURI = (window.URL || window.webkitURL || window).createObjectURL(blob);
window.open(exeelURI, "_blank");

https://github.com/SheetJS/js-xlsx:基於jsZip封裝好的excel導入導出控件