[ExtJS] 導入導出json文件

在處理一些業務數據時，可能需要將其進行導出、導入操作。這裏以導出自定義文件類型的 json類型數據爲例。

導出

藉助ExtJS的 File類的 saveBlobs 方法進行前端文件輸出。

saveBlobAs( content, filename, [charset], [mimeType] ) 

參數

content :  String

File content

filename :  String

Name of the file including the extension

charset :  String (可選)

File's charset

默認: 'UTF-8'

mimeType :  String (optional)

Mime type of the file

默認: 'application/octet-stream'

 

var content = Ext.JSON.encodeValue(json對象數據);
 
Ext.exporter.File.saveBlobAs(content, `文件名.自定義文件類型`,'text/plain;charset=utf-8','自定義文件類型');

這裏用Ext.JSON.encodeValue進行轉換主要處理中文字符

導入

前端讀取相關文件，可以藉助filebutton的文件選入，以及js的FileReader類

{
    xtype:'filebutton',
    text:'導入',
    listeners:{
        change:function(fielBtn) {
             var selectedFile = fielBtn.getFiles()[0];//獲取讀取的File對象
            var name = selectedFile.name;//讀取選中文件的文件名
            var size = selectedFile.size;//讀取選中文件的大小
            var reader = new FileReader();//js的FileReader類！！！重要
            reader.readAsText(selectedFile);//讀取文件的內容
            reader.onload = function(){
               let data = Ext.JSON.decode(this.result);//讀取轉換json數據  
            };
        }
    }
}