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-...

相关推荐
一一一8719 分钟前
javaScript数据存储, 对象和原型与原型链
javascript
梦想CAD控件25 分钟前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
WTSolutions1 小时前
Excel 转 JSON by WTSolutions API 文档
javascript
努力只为躺平1 小时前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript
bitbitDown1 小时前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
DoraBigHead2 小时前
🧠 别急着传!大文件上传里,藏着 Promise 的高级用法
前端·javascript·面试
嘉琪0012 小时前
封装一个有最小化的dialog组件
前端·javascript·css
李明卫杭州2 小时前
希尔排序
前端·javascript
爱学习的茄子2 小时前
JavaScript闭包应用场景完全指南:从基础概念到工程实践
前端·javascript·面试
用户2519162427112 小时前
Canvas之绘制图形
前端·javascript·canvas