React实现lottie文件预览（可识别json文件或压缩包带资源的素材）

React实现lottie文件预览（可识别json文件或压缩包带资源的素材）

• 🔴 1、React实现lottie文件预览，所用到的第三方库

• 🟢 1.1、

react-lottie 
jszip-sync

 npm install react-lottie jszip-sync // 或者yarn add react-lottie jszip-sync

jszip 使用会有点问题，后面就进行说明

• 🟢 1.2、可实现的效果

• 可以实现json文件的直接预览

• 也可以实现压缩包带资源的素材

• 可以实现资源线上化模式的方式预览压缩包

• 也可以实现资源本地化模式的方式预览压缩包

• 🟢 1.3、踩坑

• mac 电脑的压缩文件在使用 jszip 解压之后，会存在一些隐藏文件的出现 __MACOSX 开头的文件，DS_Store后缀的文件，在进行文件资源遍历的时候需要过滤掉

 file.dir || file.name.startsWith('__MACOSX') || file.name.includes('DS_Store')

/* 使用jszip-sync 而不是 jszip会出现线上部署之后 async 方法调用不通 *//* npm包地址 https://www.npmjs.com/package/jszip-sync */
import JSZip from 'jszip-sync'; /* 下面是伪代码 */
cosnt res = await fetch('资源地址')const data = await response.blob(); const zip = new JSZip();const content = await zip.loadAsync(data);let urls = {} as any;let jsonData = '';for (let filename of Object.keys(content.files)) {const file = content.files[filename];/* todo 过滤掉隐藏文件 *//* 根据不同文件类型获取自己想要的数据格式 *//* 如果是图片/媒体资源文件 */await file.async('blob');/* 如果是json文件 */await file.async('string');/* 其中二进制文件可以通过 下面方式转化为一个本地的url */URL.createObjectURL('二进制文件数据');}

获取到json 数据 外加 图片/媒体资源文件 就可以组装数据

/* 核心就是吧json 数据中的资源 映射到本地链接 */export const dealAssets = (assets, urls: any) => {if (Array.isArray(assets || [])) {return assets.map((item) => {if (urls[item.p]) {console.log('成功匹配到资源');item.p = urls[item.p];item.u = '';}return item;});}message.error('映射资源失败，json文件中未找到asset列表');return [];
};