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

相关推荐
某公司摸鱼前端4 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~4 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
wen's6 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
vvilkim7 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim7 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心7 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络7 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
失落的多巴胺8 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear9 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息9 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js