手机端pdf文件预览base64编码版本

最新推荐文章于 2025-05-14 15:37:06 发布

是gary啊

最新推荐文章于 2025-05-14 15:37:06 发布

阅读量723

点赞数 9

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/m0_46697445/article/details/135746013

本文讲述了将PDF文件后端转为Base64并以图片形式在前端渲染，通过分页、懒加载和缩放功能提升性能，适用于移动端大文件预览。作者提供了示例代码和基本思路。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

继上次的手机pdf文件预览方案，前端使用pdf预览插件，后端返回文档流渲染方式。这种方式预览性能消耗太大，插件原理是通过绘制canvas进行渲染，性能不好且插件本身有不少问题，尤其是在移动端list渲染时比较明显。

原文链接：文档流预览方式

思量再三，最后后端接口返回时，将pdf文件转为base64格式，前端使用图片方式进行渲染，考虑到有文件较大的情况，接口分页，前端进行list懒加载，这种方式相比于之前的预览方式性能提高了很多。增加缩放功能，在线预览的功能基本满足。代码如下：

    <div className={styles.btnContainer}>
    <span>缩放</span>
          <Slider
            min={0.5}
            max={2}
            defaultValue={1}
            step={0.1}
            className={styles.mySlider}
            onChange={onChangeScale}
          />
    </div>
    <List>
            {flowData.map((e: any, index: any) => (
              <div className={styles.pdfContainer} key={index}>
                {/* pdf图片遮罩，iphone中禁止长按图片下载 */}
                <div></div>
                <img
                  src={'data:img/jpeg;base64,' + e}
                  alt=""
                  style={{ width: '100%' }}
                />
              </div>
            ))}
          </List>
    <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />

  const loadMore = async () => {
    setPageNum(pageNum + 1);
    if (pageNum !== 0 && titHash) {
      let res = await readOnline({ titHash, pageNum });
      if (viewerContainerDom.current && pdfPreviewRefDom.current) {
        if (res?.success) {
          let append = res.data?.bytesBase64;
          if (!pdfListTotal) {
            setPdfListTotal(res.data.pageCount);
          }
          setFlowData((val) => [...val, ...[append]]);
        }
      }
    }
  };

基本思路就是这些和代码就这些，由于pdf内容敏感不便截图录制gif，各位兄弟可以动手尝试查看效果~