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

相关推荐
coding随想16 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我43 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
DanB242 小时前
html复习
javascript·microsoft·html
呼啦啦呼啦啦啦啦啦啦8 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
前端 贾公子10 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录10 小时前
链表合并:双指针与递归
前端·javascript·算法
拼图20910 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode10 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
koooo~11 小时前
JavaScript中的Window对象
开发语言·javascript·ecmascript