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

1.导出Json

javascript 复制代码
//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);
    }
}

使用

less 复制代码
exportJson([id:1,name:'张三'],[id:2,name:'李四'])

2.导入Json

javascript 复制代码
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异步处理

使用

typescript 复制代码
<input type="file" @change="onchange">
async onchange(file){
    await importJson(file)
    ......
}

3.导出压缩包

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

ini 复制代码
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

javascript 复制代码
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")//压缩包内指定名称的文件
    })
}

使用

typescript 复制代码
<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-...

相关推荐
sunbyte16 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
爱学习的茄子2 小时前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神2 小时前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript
ruanhongbiao2 小时前
饿了么el-upload上传组件报错:TypeError: ***.upload.addEventListener is not a function
javascript·elementui
_一两风2 小时前
JS执行机制-event loop
javascript
止观止2 小时前
JavaScript对象创建9大核心技术解析
开发语言·javascript·ecmascript
1024小神2 小时前
cocos游戏开发中,如何制作一个空气墙
前端·javascript
爱编程的喵2 小时前
深入理解JavaScript事件循环机制:从同步到异步的完整解析
前端·javascript
20262 小时前
11. vite打包优化
前端·javascript·vite
1024小神2 小时前
Cocos游戏开发中,检测两个物体碰撞,并实现物理反弹逻辑
前端·javascript