可用业务场景
报销单据审批中,高亮发票部分
需求
后台返回一张图片或者pdf
、返回一组坐标
,坐标类型[number,number,number,number]
,分别代表了x、y、width、height。需要根据坐标在图片上高亮出来坐标位置。如下图
高亮的坐标是:
const rect: Rect[] = [
[100, 100, 200, 200],
[200, 300, 200, 200],
];
技术选型
- dom转成图片:html2canvas
- pdf预览:pdfjs-dist、react-pdf
- 遮照:纯css实现(四个绝对定位的dom)
这里的react-pdf使用的是V4,用来兼容IE11
遮照也可以换成是一个矩形框,看具体需求,我这里的需求是遮照高亮文章来源:https://www.toymoban.com/news/detail-688805.html
代码
组件部分
/*
* @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
图片的话不用在意实际的宽度和高度,当然如果有更好。pdf不知道需不需要实际的宽度和高度,这里抛出去了fileSize的属性,demo里没有使用,没有测试。文章来源地址https://www.toymoban.com/news/detail-688805.html
到了这里,关于高亮img、pdf重点部分(html2canvas、pdfjs-dist、react-pdf)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!