[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数据  
            };
        }
    }
}