zip保存数据和接口获取压缩包 jsZip

import { saveAs } from 'file-saver'
import JSZip from 'jszip'
//导出项目使用(压缩包内多个json文件)
export const moreJsonToZip = async (arr,zipName) => {
	console.log('导出的数据',arr);
	const zip = new JSZip();
	arr.forEach(item => {
		const { name, data } = item
		const blob = new Blob([JSON.stringify(data)], {
			type: "application/json",
		});
		zip.file(name, blob);
	})
	const resBlob = await zip.generateAsync({
		type: "blob",
		compression: "DEFLATE",
		compressionOptions: {
			level: 9,
		},
	});
	saveAs(resBlob, zipName)
}

    const arr= [
      {
        name: "config.json",
        data: proxy.$parent.getConfParams(),
      },
      {
        name: "points.json",
        data: res,
      },
      {
        name: "loginConfig.json",
        data: master.loginPage,
      },
    ];

在这里插入图片描述

// json变成zip.generateAsync的返回值 fileName是xxx.json zipName是xxx.zip
export const generateAsyncZipData = async (data, zipName, fileName) => {
	const blob = new Blob([JSON.stringify(data)], {
		type: "application/json",
	});
	const zip = new JSZip();
	zip.file(fileName, blob);
	const res = await zip.generateAsync({
		type: "blob",
		compression: "DEFLATE",
		compressionOptions: {
			level: 9,
		},
	});
	const file = new File([res], zipName);
	return file
}

  const file = await generateAsyncZipData(params, "config.zip", `config.json`);
 	const formData = new FormData();
  const version = parseInt(commonUtil.getItem("yzt_version"));
  formData.append("uploadFile", file);
  formData.append("pid", subProjectId.value);
  formData.append("version", version);
  // 接口接受formData数据格式
  return postConfigZip(formData); //调接口保存压缩包
//获取zip并解压
export const analysisZipData = async (zipUrl, params, fileName = "config") => {
	try {
		const res = await getZip(zipUrl, params);
		console.log('res组态数据', res);
		const { status, data } = res;
		if (data.type == 'application/zip') {
			const zip = new JSZip();
			// loadAsync加载其他类型资源会出问题,比如资源乱码  解压
			const { files } = await zip.loadAsync(data, { optimizedBinaryString: true });
			const config = await files[`${fileName}.json`].async('string');
			return JSON.parse(config)
		} else if (data.type === 'application/json') {
			//接口异常
			// console.log('接口异常application/json');
			return null
		}
	} catch (error) {
		ElMessage.error("网络请求失败!");
	}
	return null;
}


export function getZip(url, params) {
	return request({
		method: 'get',
		url: `http://xx.xxxx.xxx.x:3005${url}`,
		params,
		responseType: 'blob'  //必须blob
	});
}

版权声明:本文为weixin_45890414原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。