前端技术库拓展

PDF展示方案

PDFH5

git@github.com:gjTool/pdfh5.git

使用方式：

1、下载包

2、引入样式

//main.ts
import 'pdfh5/css/pdfh5.css';

3、导入使用

<script setup lang="ts">
import Pdfh5 from 'pdfh5';
import { ref, onMounted } from 'vue';
const demo = ref()
onMounted(() => {
  new Pdfh5(demo.value, {
    pdfurl: "./git.pdf",
    textLayer: true
  });
});
</script>

<template>
  <div class="demo" ref="demo"></div>
</template>

<style scoped>
.demo {
  width: 100%;
  height: 100%;
}
</style>

其他配置package方式

{
  "name": "parent-aiwrongbook-h5",
  "version": "0.0.1",
  "private": true,
  "type": "module",
  "dependencies": {
    "pdfh5": "^2.0.2"
  },
  "optionalDependencies": {
    "canvas": "^2.11.2",
    "path2d-polyfill": "^2.0.1"
  },
  "browser": {
    "canvas": false,
    "fs": false,
    "http": false,
    "https": false,
    "url": false,
    "zlib": false
  }
}

瀑布布局使用方式

官网教程：https://masonry.desandro.com/

1、下载引入

npm install masonry-layout

2、引入并初始化

<script>
    import Masonry from 'masonry-layout';
    var elem = document.querySelector('.grid');
    var msnry = new Masonry( elem, {
        // options
        itemSelector: '.grid-item',
        columnWidth: 200
    });

    // element argument can be a selector string
    //   for an individual element
    var msnry = new Masonry( '.grid', {
        // options
    });
</script>

可以配置的选项：

https://masonry.desandro.com/options

所有选项都是可选的，但建议使用 columnWidth 和 itemSelector。

具体选项

itemSelector

指定哪些子元素将用作布局中的项目元素。

我们建议始终设置itemSelector。这对于排除尺寸元素或不属于布局的其他元素itemSelector很有用。

columnWidth

我们建议设置columnWidth。如果columnWidth未设置，Masonry 将使用第一个项目的外部宽度。

使用元素大小调整来实现具有百分比宽度的响应式布局。设置columnWidth为元素或选择器字符串，可使用元素的外部宽度作为列的大小。

不往后写了，东西太多了！

矢量动画方案：Lottie

官网：https://airbnb.io/lottie/　仓库：https://github.com/airbnb/lottie-web

它到底是什么

Lottie 是「把 After Effects 的时间轴导出成 JSON、再由各端播放器实时重绘」的一套方案， 不是一种图片格式，也不是一个动画库的 API。

关键在于导出的不是像素，是结构。把官方 demo 里的 demo/adrock/data.json 拆开看，里面是帧率、图层数组、以及每层逐帧的位置、旋转、缩放——GIF 存的是「第 N 帧长什么样」，Lottie 存的是「第 N 层在第 N 帧的位置是多少」。

和其它做法的对比

优势的机制（不是形容词）

1、矢量重绘，所以一份文件适配所有 DPR 和任意尺寸，放大不糊，不需要出 @2x / @3x。

2、透明是天然的。GIF 的 alpha 只有一位，压在深色底上就是一圈白毛边； 视频要带 alpha 得上 HEVC 或 VP9 特定编码，两边浏览器支持都不干净。Lottie 根本不存背景。

3、体积靠「纯文本 + gzip」赢。实测 lottie-web 官方三个 demo：

官方 README 自己也专门提了一句：JSON 和播放器都记得开 gzip。不开压缩的话这条优势直接消失。

4、运行时可控。播放器返回一个实例，play / pause / setSpeed / goToAndStop / playSegments 都在，于是「跟着滚动进度走」「点赞按钮停在中间态」这类做法才成立—— 这些是 GIF 和视频给不了的。

5、一份源三端跑，web / iOS / Android / RN 用的是同一个 JSON。

局限性（用之前先看这一段）

1、它需要一个不小的运行时。这是最常被忽略的一笔。unpkg 上 lottie-web@5 各构建实测：

作个参照：本站那条能拖能甩的圆弧画廊，全部手势逻辑打进浏览器才 gzip 1.2 KB。 为一个转圈 loading 引 46 KB 是净亏，那种东西两行 CSS 就够了。

2、light 构建砍掉的是 AE 表达式。全量构建里能 grep 到唯一一处 eval(， 位置就在表达式函数的构造上；light 构建里 eval( 出现 0 次。 两个推论：用不到表达式就直接选 light；而如果你打算加载用户上传的第三方 JSON， 全量构建等于给它留了一条 eval 通道，这条要自己掂量。

3、JSON 不是恒定的小。上表里 navidad 那份原始 1.73 MB、gzip 后仍有 292 KB。 体积随图层数、路径顶点数线性涨，AE 里「画一个巨大形状只为遮住一小块」这种手法 会同时把文件和运行时开销一起顶上去（README 里点名提醒过）。

4、实时渲染是有 CPU 成本的。SVG 渲染器的做法是往 DOM 里塞节点，节点一多就慢； 遮罩尤其贵，官方 README 的原话是遮罩会带来巨大的性能损耗。 在低端安卓机上，一个复杂 Lottie 比同样内容的一段视频更费电——因为视频有硬解，它没有。

5、AE 的功能不是全支持。官方明确列出：支持预合成、形状、纯色、图片、空对象、文本、 遮罩与反向遮罩、时间重映射、表达式；不支持图片序列、视频、音频，也不支持负数的图层拉伸。 实务上的后果是：得在动画开工之前和设计师约好一份「能用的 AE 功能白名单」， 否则做完导出才发现效果没了，只能返工。

6、一旦图层里放的是位图，前面的优势会一起失效。AE 里没转成形状的 PNG / AI 图层， 导出时会落进一个 images 文件夹（或内嵌），此时它既不矢量、也不小了。

7、文字是个麻烦。要么在 AE 里转成形状（从此不可选中、无障碍软件读不到）， 要么依赖端上字体（三端字体不一致，排版必然对不齐）。

8、无障碍要自己补。渲染结果是一堆没有语义的 DOM 节点或一块 canvas 像素， aria-hidden、替代文本、prefers-reduced-motion 的关停，播放器都不会替你做。

9、三端播放器是三份独立实现，同一份 JSON 在 web / iOS / Android 上会有细微差别， 所以「一份源三端跑」的正确读法是「一份源，三端各验一遍」。

10、默认没有交互，开箱只是「播一段」。滚动联动、悬停播某一段这类要自己写， 或者再引一个 lottie-interactivity。

选型判断