前端分页加载&懒加载预览PDF

🌟前端分页加载/懒加载预览PDF🌟

前言

公众号:【可乐前端】,期待关注交流,分享一些有意思的前端知识

在开发过程中,我们经常会遇到预览PDF的需求。这个时候我们一般是会有一个PDF的地址,然后通过一些手段将PDF文件预览在页面上。比如说以下的方式或者第三方库:

  • embed标签
  • iframe标签
  • pdf.js
  • react-pdf

但是当PDF比较大的时候,加载速度缓慢以及占用内存过大会是一个比较严重的问题。PDF体积较大时,网络传输的时间必然会较长,这样用户的体验会比较差;当打开较大的PDF时,会占用较多的内存,可能会导致标签页/浏览器卡死或者崩溃。

常规预览方式

先来看看常规的PDF预览方式,这里简单提两种预览方式,都是十分简单的,代码如下:

import { PDF_URL } from "./constant"

const Normal = () => {
  return (
    <div>
      <embed src={PDF_URL} type="application/pdf" width="100%" height="600px"></embed>
      <iframe width={'100%'} height={600} src={PDF_URL} />
    </div>
  )
}

export default Normal

一种使用embed标签去预览,另一种是用iframe标签去预览,这里都是借助于浏览器自带的PDF渲染引擎去把PDF预览出来。也是平时我们用的比较多的一种方式。

image.png

但我这是一个15M左右,100页+PDF,在我4M带宽的服务器下,传输时间需要大概30秒左右,时间还是相当长的。

所以下面要介绍的是PDF的分页加载和渲染。旨在解决大PDF网络传输过慢以及占用内存过大的问题。

按图片分割

既然一次性加载整个PDF文件太过缓慢,那我们可以考虑把它拆分成一个个更细的单元去进行预览。这里我可以先把一整个PDF文件按页码转成一张张图片,1页PDF对应1张图片。那么经过这样的预处理之后,我们就很容易能够做到按需加载、或者分片加载,而不是一次性加载一整个PDF文件。这样用户的首屏等待时间会大大降低,可以提升用户体验。

PDF转图片

这里需要先预处理一下数据,将PDF文件转换为图片。我这里使用的是 pdf-image 这个库,具体的安装教程可以点击链接查看。

安装完之后可以用node写一个这样的预处理脚本,将所需要处理的PDF文件的每一页都转换成一张图片:

const PDFImage = require("pdf-image").PDFImage;
const path = require("path");
const fs = require("fs");
const FILE_PATH = path.join(__dirname, "../public/files/test.pdf");
const outputDirectory = path.join(__dirname, "../public/files/tmp");

const pdfImage = new PDFImage(FILE_PATH, {
  convertOptions: {
    "-density": 250, // 提高分辨率,根据需要调整
    "-quality": 100,
    "-trim": null,
  },
  outputDirectory,
});

const run = async () => {
  const info = await pdfImage.getInfo();
  for (let i = 0; i < Number(info.Pages); i++) {
    try {
      await pdfImage.convertPage(i);
    } catch (error) {
      console.log("error", error);
    }
  }
};
run();

image.png

拿到了每一页的图片之后,我们就可以拿这些图片去做预览功能了。这里有100多张图片,渲染的时候不需要一次性将它们渲染出来,可以做一下懒加载。这里我是使用IntersectionObserver去实现了图片的懒加载。先实现一个懒加载的hook如下:

  • 这里可以先给每一个元素一个默认的高度,然后利用IntersectionObserver监听元素是否出现在视口范围内
  • 如果出现在视口返回内,就加载这张图片
import { useEffect,useRef,useCallback } from "react";

const useObserve = ({ rootRef, itemSelector }) => {
  const observer = useRef(null);

  const handlerObserve = entries => {
    entries.forEach(({ isIntersecting, target }) => {
      if (isIntersecting) {
        const targetImg = target.children[0];
        targetImg.src = targetImg.dataset.src;
        // 修改过src属性之后,即可移除data-src属性并且取消监视
        targetImg.removeAttribute("data-src");
        observer.current.unobserve(target);
      }
    });
  };
  const addObserve = () => {
    const list = document.querySelectorAll(itemSelector);
    list.forEach(item => {
      observer.current.observe(item);
    });
  };

  const initObserver = useCallback(() => {
    observer.current = new IntersectionObserver(handlerObserve, {
      root: rootRef.current,
      rootMargin: "0px 0px 200px 0px", // 监视区向下拓展200px
    });
    addObserve();
  }, []);
  useEffect(() => {
    initObserver();
    return () => {
      observer.current.disconnect();
    };
  }, []);
};

export default useObserve;

然后实现预览组件如下:

import { Carousel } from "antd";
import styles from "./index.module.less";
import { LeftOutlined, RightOutlined } from "@ant-design/icons";
import { useState, useEffect, useRef, useMemo, useCallback } from "react";
import { API_PREFIX } from "../../../../env";
import useObserve from "./useObserve";
const defaultImage = "";

const Preview = () => {
  const [list, setList] = useState(() => {
    return new Array(105).fill(0).map((item, index) => {
      return {
        page: index,
        originSrc: `${API_PREFIX}/files/tmp/test-${index}.png`,
      };
    });
  });
  const contentRef = useRef(null);
  useObserve({
    rootRef: contentRef,
    itemSelector: ".image-item-observe",
  });
  return (
    <div className={styles.preview}>
      <div ref={contentRef} className={styles.content}>
        {list.map((item, index) => {
          return (
            <div class={`${styles["image-item-wrapper"]} image-item-observe`}>
              {/* 设置一个默认的缺省图,避免在加载过程中出现白屏的现象 */}
              <img
                class={styles["image-item"]}
                src={defaultImage}
                data-src={item.originSrc}
                key={index}
                width="100%"
              />
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default Preview;


这样就实现了按需加载预览PDF的功能

image.png

按页分割

上面介绍的是把PDF转成图片之后,利用加载多图的方式来做PDF的懒加载。下面这种方式是,把一个大的PDF切分成若干个小的PDF,再使用常规的预览方式去预览。首先还是写一个脚本来预处理数据,切分PDF文件。

const fs = require("fs");
const { PDFDocument } = require("pdf-lib");
const path = require("path");
async function splitPDF(inputPath, outputPrefix) {
  const pdfBytes = await fs.promises.readFile(inputPath);
  const pdfDoc = await PDFDocument.load(pdfBytes);

  const totalPages = pdfDoc.getPageCount();
  const pagesPerChunk = 10;

  for (let startPage = 1; startPage <= totalPages; startPage += pagesPerChunk) {
    const endPage = Math.min(startPage + pagesPerChunk - 1, totalPages);

    const newPdfDoc = await PDFDocument.create();

    for (let pageNum = startPage; pageNum <= endPage; pageNum++) {
      const [copiedPage] = await newPdfDoc.copyPages(pdfDoc, [pageNum - 1]);
      newPdfDoc.addPage(copiedPage);
    }

    const outputPath = `${outputPrefix}/${Math.floor(endPage / 10)}.pdf`;
    const newPdfBytes = await newPdfDoc.save();
    await fs.promises.writeFile(outputPath, newPdfBytes);

    console.log(`PDF successfully split from page ${startPage} to ${endPage}.`);
  }
}

const FILE_PATH = path.join(__dirname, "../public/files/test.pdf");
const outputDirectory = path.join(__dirname, "../public/files/tmp-file");
splitPDF(FILE_PATH, outputDirectory);

切分后的结果如下:

image.png

然后预览的时候就十分简单,我是直接用iframe去一份份的预览,点击加载更多再去加载下一个片段。一个简单的预览组件如下,一个个地加载我们分割的PDF文件:

import React, { useState, useEffect, useRef } from "react";
import { API_PREFIX } from "../../../../env";
const pdfs = new Array(11)
  .fill(0)
  .map((_, index) => `${API_PREFIX}/files/tmp-file/${index + 1}.pdf`);

const Split = () => {
  const [list, setList] = useState([pdfs[0]]);
  return (
    <div>
      {list.map((url, index) => {
        return (
          <div>
            <iframe
              id={`iframe-${index}`}
              key={index}
              width={"100%"}
              height={600}
              src={url}
            />
          </div>
        );
      })}
      <button
        disabled={list.length === pdfs.length}
        onClick={() => {
          const arr = [...list];
          arr.push(pdfs[arr.length]);
          setList(arr)
        }}
      >
        加载更多
      </button>
    </div>
  );
};

export default Split;

最后

上文介绍了两种大PDF文件如何更快的预览的方式,如果你有什么有趣的方式,欢迎在评论区一起脑暴讨论。感谢您的阅读,喜欢的话点个关注点个赞吧~

  • 18
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端接口数据分页加载数据通常需要以下步骤: 1. 在后端编写分页查询接口,接口需要接收当前页码和每页显示的数据条数作为参数,并返回对应页码的数据。 2. 在前端编写分页组件,组件需要显示当前页码和总页数,并且需要绑定点击事件,当用户点击某一页码时,组件需要向后端发送请求获取对应页码的数据。 3. 在前端编写数据渲染逻辑,当获取到后端返回的数据时,需要将数据渲染到页面上。 以下是一个简单的示例代码: ```javascript // 后端接口示例: // GET /api/data?page=2&pageSize=10 // 返回对应页码的数据 // 前端分页组件示例: Vue.component('pagination', { props: { total: { type: Number, required: true }, pageSize: { type: Number, default: 10 }, current: { type: Number, default: 1 } }, computed: { pageCount() { return Math.ceil(this.total / this.pageSize); }, pages() { const pages = []; for (let i = 1; i <= this.pageCount; i++) { pages.push(i); } return pages; } }, methods: { handleClick(page) { this.$emit('change', page); } }, template: ` <ul> <li v-if="current > 1" @click="handleClick(current - 1)">上一页</li> <li v-for="page in pages" :class="{ active: page === current }" @click="handleClick(page)">{{ page }}</li> <li v-if="current < pageCount" @click="handleClick(current + 1)">下一页</li> </ul> ` }); // 前端数据渲染逻辑示例: new Vue({ el: '#app', data: { data: [], total: 0, current: 1 }, methods: { async fetchData() { const res = await axios.get('/api/data', { params: { page: this.current, pageSize: 10 } }); this.data = res.data.list; this.total = res.data.total; }, handlePageChange(page) { this.current = page; this.fetchData(); } }, mounted() { this.fetchData(); }, template: ` <div> <ul> <li v-for="item in data">{{ item }}</li> </ul> <pagination :total="total" :current="current" @change="handlePageChange"></pagination> </div> ` }); ``` 在以上示例代码中,分页组件 `pagination` 接收三个 props:`total` 表示数据总条数,`pageSize` 表示每页显示的数据条数,默认为 10,`current` 表示当前页码,默认为 1。组件通过计算属性 `pageCount` 计算总页数,通过循环生成每一页码,并且绑定点击事件。当用户点击某一页码时,组件会触发 `handleClick` 方法,该方法会通过 `$emit` 触发 `change` 事件,向父组件传递当前点击的页码。 在父组件中,通过调用 `fetchData` 方法获取数据,并将数据渲染到页面上。当用户点击分页组件中的页码时,会触发 `handlePageChange` 方法,该方法会更新当前页码并重新调用 `fetchData` 方法获取对应页码的数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值