js导入导出Json, 导入导出压缩包zip

1.导出Json

//data:导入的数据,可以是数组、对象、字符串等
//name:导出的文件名
function exportJson(data, name) {
    if (data) {
        const url = `data:text/csv;charset=utf-8,\ufeff${JSON.stringify(data)}`
        const link = document.createElement("a")
        link.href = url
        link.download = `${name||'file'}.json`;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
}

使用

exportJson([id:1,name:'张三'],[id:2,name:'李四'])

2.导入Json

async function importJson(file) {
    if (!file) return
    return new Promise(function(resolve, reject) {
        let reader = new FileReader()
        reader.readAsText(file)
        reader.onload = function(res) {
            try {
                let data = JSON.parse(res.target.result)
                resolve(data)
            } catch (error) {
                resolve(res.target.result)
            }
        }
    })
}

说明

1.解析json并Json.parse的时候可能会因为json内容有问题而报错，所以这里使用了try...catch..，如果报错则原样输出，再对字符串进行处理

2.解析json需要时间，这里一定要用async await异步处理

使用

<input type="file" @change="onchange">
async onchange(file){
    await importJson(file)
    ......
}

3.导出压缩包

使用到第三方库，常用的是jszip

npm install jszip
import jszip from "jszip";

function exportZip(){
    const zip = new jszip();
    //1.将文件放入压缩包, zip.file(文件名, 文件)
    zip.file(1.jpg, 图片)//图片可以是file,blob等格式
    zip.file(2.json, json文件)//将数组等转成json,参考导出json
    ......
    
    //2.下载压缩包
    zip.generateAsync({type:"blob"}).then(function(res) {
        const url = window.URL.createObjectURL(res);  
        const link = document.createElement('a');  
        link.href = url;  
        link.download = '文件名.zip';
        link.click();  
    });
}

4.导入压缩包

使用到第三方库，常用的是jszip

npm install jszip
import jszip from "jszip";

function importZip(file){
    const zip = new jszip();
    zip.loadAsync(file).then(async (res) => {
        zip.files//压缩包里面的所有内容, 就是一个大对象
        zip.file('1.jpg').async("blob")//压缩包内指定名称的文件
    })
}

使用

<input type="file" @change="onchange">
onchange(file){
    importZip(file.target.files[0])
}

5.更多js方法示例

github

kangleyunju.github.io/js_useful_t…

npm

www.npmjs.com/package/js-…