[ExtJS] 导入导出json文件

29号同学

于 2020-06-16 08:43:13 发布

阅读量381

点赞数

分类专栏： ExtJS 文章标签：导入导出 js extjs

本文链接：https://blog.youkuaiyun.com/ZYD45/article/details/106779700

版权

ExtJS 专栏收录该内容

55 篇文章

订阅专栏

这篇博客介绍了如何使用ExtJS进行JSON文件的导入和导出操作。在导出方面，利用File类的saveBlobs方法，通过指定文件内容、名称、字符集和MIME类型来完成。在导入时，结合filebutton组件和FileReader类来读取选定的文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在处理一些业务数据时，可能需要将其进行导出、导入操作。这里以导出自定义文件类型的 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数据  
            };
        }
    }
}