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 [];
};