高亮img、pdf重点部分(html2canvas、pdfjs-dist、react-pdf)

这篇具有很好参考价值的文章主要介绍了高亮img、pdf重点部分(html2canvas、pdfjs-dist、react-pdf)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

可用业务场景

报销单据审批中,高亮发票部分

需求

后台返回一张图片或者pdf、返回一组坐标,坐标类型[number,number,number,number],分别代表了x、y、width、height。需要根据坐标在图片上高亮出来坐标位置。如下图
高亮的坐标是:

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

高亮img、pdf重点部分(html2canvas、pdfjs-dist、react-pdf),React技术栈相关,pdf,react.js,前端
高亮img、pdf重点部分(html2canvas、pdfjs-dist、react-pdf),React技术栈相关,pdf,react.js,前端

技术选型

  • dom转成图片:html2canvas
  • pdf预览:pdfjs-dist、react-pdf
  • 遮照:纯css实现(四个绝对定位的dom)

这里的react-pdf使用的是V4,用来兼容IE11
遮照也可以换成是一个矩形框,看具体需求,我这里的需求是遮照高亮

代码

组件部分

/*
 * @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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue使用html2canvas将DOM节点生成对应的PDF

    要通过Vue使用html2canvas将DOM节点生成对应的PDF,您需要安装html2canvas和jspdf这两个库。html2canvas用于将DOM节点转换为Canvas,而jspdf用于将Canvas转换为PDF。以下是一个简单的示例代码,展示了如何使用html2canvas和jspdf生成PDF文件: 首先,安装html2canvas和jspdf依赖: 然后,在Vue组件中

    2024年02月11日
    浏览(55)
  • 纯前端--原生js将html页面变成pdf文件(html2canvas+jsPDF)

    1、将文档放在本地,用原生js进行引用和使用。 ① 新建一个名为 html2canvas.min.js 的文件,并且将线上的内容进行复制。 ② 引入 js 文件: 2、使用 npm 进行安装使用: 待续。。。 github 中文网站 CDN Jspdf.es.js:ES 2015 模块格式。 Jspdf.umd.js:UMD模块格式,用于 AMD 或脚本标签加载

    2024年02月08日
    浏览(56)
  • (vue)Vue项目中使用jsPDF和html2canvas生成PDF

    效果: 1.:安装jsPDF和html2canvas 2.在需要生成PDF文档的组件中引入jsPDF和html2canvas 解决参考: 1.https://www.jianshu.com/p/31d37bef539b 2.https://www.php.cn/faq/556634.html 3.https://blog.csdn.net/m0_54967474/article/details/123820384

    2024年02月10日
    浏览(53)
  • vue2如何将页面生成 pdf 导出 html2Canvas + jspdf

    npm i html2canvas npm i jspdf import html2canvas from \\\'html2canvas\\\'; import jsPDF from \\\'jspdf\\\' export const htmlToPDF = async (htmlId, title = \\\"报表\\\", bgColor = \\\"#fff\\\") = {   let pdfDom = document.getElementById(htmlId)   pdfDom.style.padding = \\\'0 10px !important\\\'   const A4Width = 595.28;   const A4Height = 841.89;   let canvas = await html2canvas(pd

    2024年02月16日
    浏览(55)
  • 前端生成pdf之html2canvas+jsPDF,以及解决图片不显示bug

    开发背景: 需要给页面中相应的内容生成pdf,查找文档后发现要用到两个插件。html2canvas 以及 jsPDF html2canvas 给dom结构转化为canvas,然后生成各种类型图片 jsPDF 把canvas 生成的图片url 转化为pdf 参数 image:表示要插入的图片资源,可以是图片文件的路径或者base64编码字符串。

    2024年02月02日
    浏览(52)
  • 使用html2canvas将整个元素导出为图片,其中包含svg和img,解决img跟svg导出时img或svg(canvg处理)不显示的问题,以及相关优化

    目录 前言 一、准备 二、解决问题 1.将svg跟img转为canvas的方法 2.将base64转换成file文件的方法 3.点击下载使用方法 1).对dom没有处理,需求只是将图片导出即可  2).涉及对dom的拖拽,流程图之类的(需复制dom,在复制的dom上进行处理)  三、效果图如下 查阅很多相关的文章和

    2024年01月20日
    浏览(64)
  • html2Canvas+jsPDF 下载PDF 遇到跨域的对象存储的图片无法显示

        一、问题原因  对象存储的域名和你网址的域名不一样,此时用Canvas相关插件 将DOM元素转化为PDF,就会出现跨域错误。 二、解决办法  两步 1. 图片元素上设置属性  crossorigin=\\\"anonymous\\\"  支持原生img和eleme组件  2. 存储桶设置资源跨域访问 阿里腾讯云为例:↓ 阿里云OS

    2024年02月15日
    浏览(47)
  • 【无标题】使用html2canvas和jspdf生成的pdf在不同大小的屏幕下文字大小不一样

    问题:使用html2canvas和jspdf生成的pdf在不同大小的屏幕下文字大小不一样,在mac下,一切正常,看起来很舒服,但是当我把页面放在扩展屏幕下(27寸),再生成一个pdf,虽然排版一样,但是文字就变得非常小 下面的是在mac下的,上面是在扩展屏幕下的,最开始我以为是文字大

    2024年02月16日
    浏览(50)
  • Vue基于html2canvas和jspdf生成pdf文件,解决jspdf中文乱码及自动换行等问题

    在做项目时有这么一个需求,需要将当前页面指定区域的内容导出pdf到本地。借助了两个插件分别是html2canvas.js和pdf.js来实现。使用过程中遇到的问题及解决方法 解决一些问题: 导出按A4纸大小排列 预留页面边距的问题 内容过多自动分页的问题 直接使用jspdf中文乱码的问题

    2024年01月25日
    浏览(60)
  • html2canvas使用文档

    Install NPM Install Yarn 以 vue 举例,这样写起来比较方便 如果想要将图片导出,可以这样写 名称 默认值 描述 allowTaint false 是否允许跨源图像污染画布 backgroundColor #ffffff 画布背景色(如果在DOM中未指定),为透明设置null canvas null 用作绘图基础的现有画布元素 foreignObjectRendering

    2024年03月28日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包