XZWALL/src/pages/H5Code/index.tsx

import React, { useCallback, useEffect, useMemo, useState } from "react";
import styles from "./index.module.scss";
import H5Logo from "@/assets/img/H5Logo.png";
import { useLocation } from "react-router";
import { urlParameter } from "@/utils/history";
import { useDispatch, useSelector } from "react-redux";
import { getH5InfoAPI } from "@/store/action/h5code";
import { RootState } from "@/store";
import { baseURL } from "@/utils/http";
import classNames from "classnames";
import html2canvas from "html2canvas";
import { Spin } from "antd";

function H5Code() {
  useEffect(() => {
    const root: any = document.querySelector("#root");
    root.style.overflow = "hidden";
    root.style.overflow = "hidden";
    root.style.minHeight = "100vh";
    root.style.minWidth = "100vw";
    document.title = "徐州汉画像石艺术馆";
  }, []);

  // 获取地址栏参数
  const dispatch = useDispatch();
  const location = useLocation();

  useEffect(() => {
    const obj = urlParameter(location.search);
    if (obj.id) dispatch(getH5InfoAPI(obj.id));
  }, [dispatch, location.search]);

  // 从仓库获取详情
  const info = useSelector((state: RootState) => state.h5codeReducer.h5info);

  // 点击下载海报
  const [donImg, setDonImg] = useState(false);

  const dataURLToBlob = useCallback((dataurl: any) => {
    let arr = dataurl.split(",");
    let mime = arr[0].match(/:(.*?);/)[1];
    let bstr = atob(arr[1]);
    let n = bstr.length;
    let u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
  }, []);

  const donImgFu = useCallback(() => {
    setDonImg(true);

    window.setTimeout(() => {
      const canEle: HTMLDivElement = document.querySelector(".H5MainBoxInfo")!; //获取dom
      let a = document.createElement("a");
      html2canvas(canEle).then((canvas) => {
        let dom = document.body.appendChild(canvas);
        dom.style.display = "none";
        a.style.display = "none";
        document.body.removeChild(dom);
        let blob: any = dataURLToBlob(dom.toDataURL("image/png"));
        a.setAttribute("href", URL.createObjectURL(blob));
        //这块是保存图片操作  可以设置保存的图片的信息
        a.setAttribute("download", info.name + ".png");
        document.body.appendChild(a);
        a.click();
        URL.revokeObjectURL(blob);
        document.body.removeChild(a);
        setDonImg(false);
      });
    }, 100);
  }, [dataURLToBlob, info.name]);

  const infoTxt = useMemo(() => {
    let txt = info.description ? info.description : "-";
    if (txt.length >= 60 && donImg) txt = txt.substring(0, 60) + "...";
    return txt;
  }, [donImg, info.description]);

  return (
    <div className={styles.H5Code}>
      <div className="H5MainBox">
        <div className="H5MainBoxInfo">
          <div className="H5Img">
            {info.thumb ? <img src={baseURL + info.thumb} alt="" /> : null}
          </div>
          {/* 占位盒子 */}
          <div className="H5Loc"></div>
          {/* 文字信息 */}
          <div className="H5TxtBox">
            {/* 名字 */}
            <div className="name">
              <div>{info.name}</div>
            </div>
            {/* 简介信息 */}
            <div className="txtMain">
              <p>类别：{info.dictTexture}</p>
              <p>年代：{info.dictAge}</p>
              <p>级别：{info.dictLevel}</p>
              <div>简介：{infoTxt}</div>
            </div>
          </div>
          {/* logo */}
          <div className="H5Logo">
            <img src={H5Logo} alt="" />
          </div>
        </div>
        <div className="H5MainBoxButton">
          <div onClick={donImgFu}>下载海报</div>
        </div>
      </div>

      {/* 加载中的背景 */}
      <div
        className={classNames(
          "H5lodingBacBox",
          donImg ? "H5lodingBacBoxShow" : ""
        )}
      >
        <Spin size="large" />
      </div>
    </div>
  );
}

const MemoH5Code = React.memo(H5Code);

export default MemoH5Code;