可用業(yè)務(wù)場(chǎng)景

報(bào)銷單據(jù)審批中，高亮發(fā)票部分

需求

后臺(tái)返回一張圖片或者pdf、返回一組坐標(biāo)，坐標(biāo)類型[number,number,number,number]，分別代表了x、y、width、height。需要根據(jù)坐標(biāo)在圖片上高亮出來(lái)坐標(biāo)位置。如下圖
高亮的坐標(biāo)是：

const rect: Rect[] = [
  [100, 100, 200, 200],
  [200, 300, 200, 200],
];

技術(shù)選型

• dom轉(zhuǎn)成圖片：html2canvas
• pdf預(yù)覽：pdfjs-dist、react-pdf
• 遮照：純css實(shí)現(xiàn)（四個(gè)絕對(duì)定位的dom）

這里的react-pdf使用的是V4，用來(lái)兼容IE11
遮照也可以換成是一個(gè)矩形框，看具體需求，我這里的需求是遮照高亮

代碼

組件部分

/*
 * @Author: Do not edit
 * @Date: 2023-08-25 13:48:06
 * @LastEditors: atwlee
 * @LastEditTime: 2023-08-28 14:08:34
 * @Descripttion:
 * @FilePath: /test/src/pages/generate.tsx
 */

import { FC, useEffect, useRef } from "react";
import styles from "./index.modules.less";
import html2canvas from "html2canvas";
import { Document, Page, pdfjs } from "react-pdf";

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  "pdfjs-dist/build/pdf.worker.min.js",
  import.meta.url
).toString();

export type Rect = [number, number, number, number];

interface GenerateProps {
  fileUrl: string;
  rects: Rect[];
  onGenerateCallback: (imgs: string[]) => void;
  fileType: "img" | "pdf";
  fileSize?: [number, number];
}

const Index: FC<GenerateProps> = (props) => {
  const { fileUrl, rects, onGenerateCallback, fileType, fileSize } = props;
  const divRef = useRef<HTMLDivElement>(null);

  const handleGenerateImg = () => {
    const results: string[] = [];
    rects.forEach((item, index) => {
      html2canvas(
        divRef.current!.querySelector(`[data-key="generate${index}"]`)!,
        {
          useCORS: true,
        }
      ).then((canvas) => {
        results.push(canvas.toDataURL("image/png"));
        results.length === rects.length && onGenerateCallback(results);
      });
    });
  };

  const pdf2img = useRef<string[]>([]);
  const onPageLoadSuccess = () => {
    rects.forEach((item, index) => {
      html2canvas(
        divRef.current!.querySelector(`[data-key="generate${index}"]`)!,
        {
          useCORS: true,
        }
      ).then((canvas) => {
        pdf2img.current.push(canvas.toDataURL("image/png"));
        if (pdf2img.current.length === rects.length) {
          onGenerateCallback(pdf2img.current);
          pdf2img.current = [];
        }
      });
    });
  };

  useEffect(() => {
    fileType === "img" && handleGenerateImg();
  }, [fileUrl, rects, fileType]);

  return (
    <div ref={divRef} className={styles.contanier}>
      {/* pdf */}
      {fileType === "pdf" && (
        <Document file={fileUrl}>
          {rects.map((i, index) => (
            <div
              className={styles.rectItem}
              key={index}
              data-key={`generate${index}`}
            >
              <Page
                pageNumber={1}
                width={fileSize?.[0]}
                height={fileSize?.[1]}
                onRenderSuccess={onPageLoadSuccess}
              />
              <div className={styles.coverTop} style={{ height: i[1] }} />
              <div
                className={styles.coverRight}
                style={{
                  left: i[0] + i[2],
                  top: i[1],
                  height: i[3],
                }}
              />
              <div
                className={styles.coverBottom}
                style={{ top: i[1] + i[3] }}
              />
              <div
                className={styles.coverLeft}
                style={{ width: i[0], top: i[1], height: i[3] }}
              />
            </div>
          ))}
        </Document>
      )}

      {/* img */}
      {fileType === "img" &&
        rects.map((i, index) => (
          <div
            className={styles.rectItem}
            key={index}
            data-key={`generate${index}`}
          >
            <img src={fileUrl} width={fileSize?.[0]} height={fileSize?.[1]} />
            <div className={styles.coverTop} style={{ height: i[1] }} />
            <div
              className={styles.coverRight}
              style={{
                left: i[0] + i[2],
                top: i[1],
                height: i[3],
              }}
            />
            <div className={styles.coverBottom} style={{ top: i[1] + i[3] }} />
            <div
              className={styles.coverLeft}
              style={{ width: i[0], top: i[1], height: i[3] }}
            />
          </div>
        ))}
    </div>
  );
};

export default Index;

使用

/*
 * @Author: Do not edit
 * @Date: 2023-08-24 15:57:05
 * @LastEditors: atwlee
 * @LastEditTime: 2023-08-28 14:13:37
 * @Descripttion:
 * @FilePath: /test/src/pages/index.tsx
 */
import { useState } from "react";
import Generate from "./generate";
import type { Rect } from "./generate";
import yayJpg from "./yay.jpg";
import pdfUrl from "./redv2.pdf";

const rect: Rect[] = [
  [100, 100, 200, 200],
  [200, 300, 200, 200],
];

export default function HomePage() {
  const [imgs, setImgs] = useState<string[]>([]);
  const onGenerateCallback = (img: string[]) => {
    setImgs(img);
  };

  const hiddenStyle = { height: 0, overflow: "hidden" };

  return (
    <div>
      <h2>Yay! Welcome to umi!</h2>
      <div style={hiddenStyle}>
        <Generate
          // fileType="pdf"
          fileType="img"
          // fileUrl={pdfUrl}
          // fileUrl={'https://www.sdta.cn/pdf/e-map.pdf'}
          fileUrl={yayJpg}
          // fileUrl={
          //   "https://img1.baidu.com/it/u=2488875768,1454762303&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"
          // }
          rects={rect}
          onGenerateCallback={onGenerateCallback}
        />
      </div>
      {imgs.map((i, index) => {
        return <img src={i} key={index} alt="" />;
      })}
    </div>
  );
}

demo源碼

PS

圖片的話不用在意實(shí)際的寬度和高度，當(dāng)然如果有更好。pdf不知道需不需要實(shí)際的寬度和高度，這里拋出去了fileSize的屬性，demo里沒(méi)有使用，沒(méi)有測(cè)試。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-688805.html

到了這里，關(guān)于高亮img、pdf重點(diǎn)部分（html2canvas、pdfjs-dist、react-pdf）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！