批量导出多个页面为pdf文件

import React, { useContext, useEffect, useRef, useState } from 'react';
import styles from './index.less';
import context from '@/layouts/context';
import { DownloadOutlined } from '@ant-design/icons';
import CurrencyTable from './components/currencyTable';
import DistributionTable from './components/distributionTable';
import ChartTwo from './components/chartTwo';
import ChartOne from './components/chartOne';
import BranchTable from './components/branchTable';
import GeneralTable from './components/generalTable';
import CreditorTable from './components/creditorTable';
import DepositedFunds from './components/depositedFunds';
import SecurityOne from './components/securityOne';
import Security from './components/security';
import SecurityTableOne from './components/securityTableOne';
import SecurityTableTwo from './components/securityTableTwo';
import SecurityTableThree from './components/securityTableThree';
import SecurityTableFour from './components/securityTableFour';
import icon from '@/assets/font/iconfont.css';
import { Checkbox, Button, Form, Popover, Spin } from 'antd';
import { plainOptions } from './vieModal';
import useCompToPDF from '@/hooks/use-pdf-hooks/usePDFHooks';
import whiteTheme from '@/themes/whiteTheme';

const IndexPage: React.FC<{ location: any }> = (props) => {
  const [form] = Form.useForm();
  const { indexInfo } = useContext(context);
  const [menu, setMenu] = useState<any[]>([]);
  const [currentIndex, setCurrentIndex] = useState(0); //导出弹窗的切换【pdf与excl之间的切换】
  const [divList, setDivList] = useState<any>([]); //动态添加的div
  const activeExportRef = useRef<any>([]);
  // 是否显示加载中的图标
  const [load, setLoad] = useState<boolean>(false);
  const [exportPDfName, setExportPDfName] = useState<string>('批量导出');
  const [openPopver, setOpenPopver] = useState<boolean>(false); //控制导出弹窗
  const [activeMenu, setActiveMenu] = useState({
    title: '有息债务',
    code: 'gfgs_cwzb_yxzw_item06',
  });
  const { exportPDf } = useCompToPDF({ fileName: exportPDfName });
  const yxzwRef = useRef<any>(); //有息债务
  const dbsxRef = useRef<any>(); //担保授信
  const fbbRef = useRef<any>(); //分布表
  const qxbzjgbRef = useRef<any>(); //期限币种结构表
  const zqrjgbRef = useRef<any>(); //债权人结构表
  const zbyxzwbdqkbRef = useRef<any>(); //总部有息债务变动情况表
  const fgsRef = useRef<any>(); //分公司合并报表单位债务变动情况表
  const scjeRef = useRef<any>(); //上存资金与负息资金明细表
  const dbt1Ref = useRef<any>(); //担保图1
  const dbt2Ref = useRef<any>(); //担保图2
  const fxb1Ref = useRef<any>(); //分析表1
  const fxb2Ref = useRef<any>(); //分析表2
  const fxb3Ref = useRef<any>(); //分析表3
  const fxb4Ref = useRef<any>(); //分析表4
  const ref1 = useRef<any>();
  let refGroup = {
    yxzwRef,
    dbsxRef,
    fbbRef,
    qxbzjgbRef,
    zqrjgbRef,
    zbyxzwbdqkbRef,
    fgsRef,
    scjeRef,
    dbt1Ref,
    dbt2Ref,
    fxb1Ref,
    fxb2Ref,
    fxb3Ref,
    fxb4Ref,
  };
  let callBackIdsRef = useRef<any>([]); //担保授信
  const [allowExport, setAllowExport] = useState<boolean>(false); //选中的导出页面是否加载完毕，加载完毕后调用导出pdf方法
  useEffect(() => {
    if (indexInfo && indexInfo.children) {
      //获取菜单信息
      let menuData: any[] = [];
      indexInfo.children.forEach((item: any) => {
        menuData.push({
          title: item.title,
          code: item.code,
        });
      });
      setMenu(menuData);
    }
  }, [indexInfo]);

  //新div加载完回调函数
  const useCallBackExport = (id: string) => {
    callBackIdsRef.current = [...callBackIdsRef.current, id];
    if (callBackIdsRef.current.length === activeExportRef.current.length) {
      // 图的页面如果只导出一个，导出的标题是这个页面的名字，导出多个显示批量导出
      if (activeExportRef.current.length > 1) {
        setExportPDfName('批量导出');
      } else {
        if (id === 'yxzwRef') {
          setExportPDfName('有息债务');
        } else if (id === 'dbsxRef') {
          setExportPDfName('担保授信');
        } else if (id === 'dbt1Ref') {
          setExportPDfName('担保图1');
        } else if (id === 'dbt2Ref') {
          setExportPDfName('担保图2');
        }
      }
      //页面全部返回加载完毕信息
      setAllowExport(true);
    }
  };
  //批量导出pdf点击确定事件
  const sumbitArticle = (nameGroup: string[]) => {
    if (!nameGroup) {
      return;
    }
    activeExportRef.current = nameGroup;
    callBackIdsRef.current = [];
    let newDiv = nameGroup.map((item: string, index: number) => {
      return getBottomContentView({ title: '', code: '' }, item);
    });
    setLoad(true); //添加loading
    setDivList(newDiv);
  };

  //允许导出
  useEffect(() => {
    if (divList.length > 0) {
      let dataParam: any[] = [];
      activeExportRef.current.forEach((item: string) => {
        let isTable = true;
        if (
          item === 'yxzwRef' ||
          item === 'dbsxRef' ||
          item === 'dbt1Ref' ||
          item === 'dbt2Ref'
        ) {
          isTable = false;
        }
        if (!isTable) {
          dataParam.push({ ref: (refGroup as any)[item].current });
        }
      });
      setLoad(false); //loading结束
      if (dataParam.length > 0) {
        exportPDf(dataParam);
      }

      form.resetFields(); //清空选中数据
      setOpenPopver(false); //关闭弹窗
      //清空
      callBackIdsRef.current = [];
      activeExportRef.current = [];
      setAllowExport(false);
      setDivList([]);
    }
  }, [allowExport]);

  // 获取具体页面
  const getBottomContentView = (
    menu: { title: string; code: string },
    exportId?: string,
  ) => {
    if (menu.code === 'gfgs_cwzb_yxzw_item01' || exportId === 'fbbRef') {
      //分布表
      return (
        <div ref={fbbRef} className={styles.charts}>
          <DistributionTable
            exportId={exportId ?? undefined}
            useCallBackExport={useCallBackExport}
          />
        </div>
      );
    } else if (
      menu.code === 'gfgs_cwzb_yxzw_item02' ||
      exportId === 'qxbzjgbRef'
    ) {
      //币种结构表
      return (
        <div ref={qxbzjgbRef} className={styles.charts}>
          <CurrencyTable
            exportId={exportId ?? undefined}
            useCallBackExport={useCallBackExport}
          />
        </div>
      );
    } else if (
      menu.code === 'gfgs_cwzb_yxzw_item03' ||
      exportId === 'zqrjgbRef'
    ) {
      //债权人结构表
      return (
        <div ref={zqrjgbRef} className={styles.charts}>
          <CreditorTable
            useCallBackExport={useCallBackExport}
            exportId={exportId ?? undefined}
          />
        </div>
      );
    } else if (
      menu.code === 'gfgs_cwzb_yxzw_item04' ||
      exportId === 'zbyxzwbdqkbRef'
    ) {
      //总部有息债务变动情况表
      return (
        <div ref={zbyxzwbdqkbRef} className={styles.charts}>
          <GeneralTable
            useCallBackExport={useCallBackExport}
            exportId={exportId ?? undefined}
          />
        </div>
      );
    } else if (menu.code === 'gfgs_cwzb_yxzw_item05' || exportId === 'fgsRef') {
      //分公司合并报表单位债务变动情况表
      return (
        <div ref={fgsRef} className={styles.charts}>
          <BranchTable
            useCallBackExport={useCallBackExport}
            exportId={exportId ?? undefined}
          />
        </div>
      );
    } else if (
      menu.code === 'gfgs_cwzb_yxzw_item06' ||
      exportId === 'yxzwRef'
    ) {
      //图形名称1

      return (
        <div
          ref={yxzwRef}
          className={styles.charts}
          id={exportId ? 'exportCharts' : 'charts'}
        >
          <ChartOne
            useCallBackExport={useCallBackExport}
            exportId={exportId ?? undefined}
          />
        </div>
      );
    } else if (
      menu.code === 'gfgs_cwzb_yxzw_item07' ||
      exportId === 'dbsxRef'
    ) {
      //图形名称2
      return (
        // 导出的数据
        <div
          ref={dbsxRef}
          className={styles.charts}
          id={exportId ? 'exportCharts2' : 'charts'}
        >
          <ChartTwo
            useCallBackExport={useCallBackExport}
            exportId={exportId ?? undefined}
          />
        </div>
      );
    } else if (
      menu.code === 'gfgs_cwzb_yxzw_item08' ||
      exportId === 'scjeRef'
    ) {
      //上存资金与负息资金明细表
      return (
        <div ref={scjeRef} className={styles.charts}>
          <DepositedFunds
            useCallBackExport={useCallBackExport}
            exportId={exportId ?? undefined}
          />
        </div>
      );
    } else if (
      menu.code === 'gfgs_cwzb_yxzw_item09' ||
      exportId === 'dbt1Ref'
    ) {
      //担保图1
      return (
        <div
          ref={dbt1Ref}
          className={styles.charts}
          id={exportId ? 'exportCharts3' : ''}
        >
          <SecurityOne
            useCallBackExport={useCallBackExport}
            exportId={exportId ?? undefined}
          />
        </div>
      );
    } else if (
      menu.code === 'gfgs_cwzb_yxzw_item10' ||
      exportId === 'dbt2Ref'
    ) {
      //担保图2
      return (
        <div
          ref={dbt2Ref}
          className={styles.charts}
          id={exportId ? 'exportCharts4' : 'charts'}
        >
          <Security
            useCallBackExport={useCallBackExport}
            exportId={exportId ?? undefined}
          />
        </div>
      );
    } else if (
      menu.code === 'gfgs_cwzb_yxzw_item11' ||
      exportId === 'fxb1Ref'
    ) {
      //担保种类分析表1
      return (
        <div ref={fxb1Ref} className={styles.charts}>
          <SecurityTableOne
            useCallBackExport={useCallBackExport}
            exportId={exportId ?? undefined}
          />
        </div>
      );
    } else if (
      menu.code === 'gfgs_cwzb_yxzw_item12' ||
      exportId === 'fxb2Ref'
    ) {
      //担保方式分析表2
      return (
        <div ref={fxb2Ref} className={styles.charts}>
          <SecurityTableTwo
            useCallBackExport={useCallBackExport}
            exportId={exportId ?? undefined}
          />
        </div>
      );
    } else if (
      menu.code === 'gfgs_cwzb_yxzw_item13' ||
      exportId === 'fxb3Ref'
    ) {
      //担保期限分析表3
      return (
        <div ref={fxb3Ref} className={styles.charts}>
          <SecurityTableThree
            useCallBackExport={useCallBackExport}
            exportId={exportId ?? undefined}
          />
        </div>
      );
    } else if (
      menu.code === 'gfgs_cwzb_yxzw_item14' ||
      exportId === 'fxb4Ref'
    ) {
      //担保期限分析表4
      return (
        <div ref={fxb4Ref} className={styles.charts}>
          <SecurityTableFour
            useCallBackExport={useCallBackExport}
            exportId={exportId ?? undefined}
          />
        </div>
      );
    }
  };
// 表单提交时
  const onFinish = (values: any) => {
    sumbitArticle(values.checkbox_group); //调用方法获取子组件的dom结构
  };
  // 表单点击取消时
  const onReset = () => {
    form.resetFields();
    setOpenPopver(false); //关闭弹窗
  };
  // 一键导出弹窗内容

  const content = () => {
    return (
      <div className={styles.exportBody}>
        {load && (
          <div className={styles.spin}>
            <Spin size="large" />
          </div>
        )}

        <div className={styles.tabBody}>
          <div>
            <Form form={form} name="control-hooks" onFinish={onFinish}>
              <Form.Item name="checkbox_group">
                <Checkbox.Group>
                  {plainOptions[0].map((data: any) => {
                    return (
                      <Checkbox value={data.value} disabled={data.disabled}>
                        {data.label}
                      </Checkbox>
                    );
                  })}
                </Checkbox.Group>
              </Form.Item>
              <div className={styles.bottomButton}>
                <Button
                  className={styles.okButton}
                  type="primary"
                  htmlType="submit"
                >
                  确定
                </Button>
                <Button
                  className={styles.okButton}
                  htmlType="button"
                  onClick={onReset}
                >
                  取消
                </Button>
              </div>
            </Form>
          </div>
        </div>
      </div>
    );
  };

  const handleOpenChange = (newOpen: boolean) => {
    setOpenPopver(newOpen);
  };
  return (
    <div className={styles.container}>
      <div className={styles.menu}>
        {/* 导出按钮 */}
        <div className={styles.exportButton}>
          <Popover
            content={content}
            trigger="click"
            open={openPopver}
            overlayClassName={styles.popstyle}
            onOpenChange={handleOpenChange}
          >
            <div className={styles.button}>
              <DownloadOutlined twoToneColor="#eb2f96" />
              &nbsp; 一键导出
            </div>
          </Popover>
        
        </div>
      </div>

      <div className={styles.content} ref={ref1}>
        {activeMenu && getBottomContentView(activeMenu)}
        {divList}
      </div>
    </div>
  );
};

export default IndexPage;

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

interface CompToPDFProps {
  fileName: string;
}
const PDFFile = {
  A4: [592.28, 841.89],
};

//自定义的hooks函数
/**
 *
 * @param props
 * @param isTable 是否是导出表格
 * @returns
 */
const useCompToPDF = (props: CompToPDFProps) => {
  const { fileName } = props;
  const exportPDf = (elementAll: any[]) => {
    if (elementAll) {
      let pdf = new jsPDF('l', 'pt', PDFFile.A4); //方向p竖直 l横向，尺寸ponits，格式a4
      let promises: any = [];
      elementAll.forEach((element: any) => {
        var promise = html2canvas(element.ref, {
          scrollX: -window.scrollX, // 设置滚动的水平位置
          scrollY: -window.scrollY, // 设置滚动的垂直位置
        });
        promises.push(promise);
      });
      Promise.all(promises).then((canvases) => {
        canvases.forEach((canvas, index: number) => {
          //获取画布的宽高
          let canvasWidth = canvas.width;
          let canvasHeight = canvas.height;
          //一页PDF显示html生成的canvas高度
          let pdfPageHeight = (PDFFile.A4[1] / PDFFile.A4[0]) * canvasWidth;
          //未生成pdf的html页面内高度
          let pdfAllHeight = canvasHeight;
          let position = 0; //页面偏移
          //转换图片为dataURL，参数：图片格式和清晰度(0-1)
          let pageData: any;
          let blackWhiteCanvas = document.createElement('canvas');
          let bwContext = blackWhiteCanvas.getContext('2d');
          blackWhiteCanvas.width = canvasWidth;
          blackWhiteCanvas.height = canvasHeight;
          // 将原始彩色图像绘制到黑白Canvas上
          if (bwContext) {
            // 将原始彩色图像绘制到黑白Canvas上
            bwContext.drawImage(canvas, 0, 0, canvasWidth, canvasHeight);
            /// 获取黑白图像的图像数据
            let imageData = bwContext.getImageData(
              0,
              0,
              canvasWidth,
              canvasHeight,
            );
            let data = imageData.data;
            //图片整体替换彩色替换成黑白色
            // 定义待替换的颜色数组
            const targetColors = [[20, 62, 961]];

            // 定义目标颜色数组，与 targetColors 数组一一对应
            const replaceColors = [[0, 0, 0]];

            // 遍历每个像素
            for (let i = 0; i < data.length; i += 4) {
              const r = data[i];
              const g = data[i + 1];
              const b = data[i + 2];
              let avg = (r + g + b) / 3;
              data[i] = avg; // R
              data[i + 1] = avg; // G
              data[i + 2] = avg; // B
              // 检查像素颜色是否与待替换的颜色匹配
              for (let j = 0; j < targetColors.length; j++) {
                const targetColor = targetColors[j];
                const replaceColor = replaceColors[j];
                if (
                  r === targetColor[0] &&
                  g === targetColor[1] &&
                  b === targetColor[2]
                ) {
                  // 将颜色修改为目标颜色
                  data[i] = replaceColor[0];
                  data[i + 1] = replaceColor[1];
                  data[i + 2] = replaceColor[2];
                  // 不修改透明度，不修改 data[i + 3]
                  break;
                }
              }
            }

            // 将处理后的黑白图像数据重新绘制到黑白Canvas上
            bwContext.putImageData(imageData, 0, 0);
            // 转换为黑白图像的dataURL
            pageData = blackWhiteCanvas.toDataURL('image/jpeg', 1.0);
          } else {
            pageData = canvas.toDataURL('image/jpeg', 1.0);
          }
          //html页面生成的canvas在pdf中图片的宽高
          let imgWidth = PDFFile.A4[0] - 60; //减去边距宽度
          let imgHeight = (canvasHeight / canvasWidth) * PDFFile.A4[0];
          //当内容未超过pdf一页显示的范围，无需分页
          if (pdfAllHeight < pdfPageHeight && index === 0) {
            // 从图片顶部开始打印   30 左右边距, 0 上下边距
            pdf.addImage(
              pageData,
              'jpeg',
              30,
              30,
              imgWidth * 1.48,
              imgHeight * 1.48,
            );
          } else {
            if (index !== 0) {
              pdf.addPage();
            }
            while (pdfAllHeight > 0) {
              pdf.addImage(
                pageData,
                'jpeg',
                30,
                30,
                imgWidth * 1.48,
                imgHeight * 1.48,
              );
              pdfAllHeight -= pdfPageHeight;
              position -= PDFFile.A4[1];
              //避免添加空白页
              if (pdfAllHeight > 0) {
                pdf.addPage();
              }
            }
          }
        });
        pdf.save(`${fileName}.pdf`);
      });
    }
  };
  return {
    exportPDf,
  };
};

export default useCompToPDF;

/*
 * @Author: gxx
 * @Date: 2023-03-15 15:41:03
 * @LastEditors: jld
 * @LastEditTime: 2023-11-02 17:35:57
 * @FilePath: \business-analysis-report-stock\src\pages\GFGS\gfgs_cwzb\debt\components\chartOne\index.tsx
 * @Description: 文件描述
 */
import {
  forwardRef,
  useContext,
  useEffect,
  useImperativeHandle,
  useRef,
  useState,
} from 'react';
import PandectCard from './components/pandectCard';
import styles from './index.less';
import context from '@/layouts/context';
import { getPandectInfo } from './viewModal';
import whiteTheme from '@/themes/whiteTheme';

const ChartOne: React.FC<{
  useCallBackExport?: (id: string) => void;
  exportId?: string | undefined;
}> = (props) => {
  const { instDate } = useContext(context);
  const { useCallBackExport, exportId } = props;
//如果有exportId证明是要导出功能的操作，需要先把页面置成黑白

  if (exportId) {
    let themeStyle1 = whiteTheme;
    themeStyle1.forEach((item, index) => {
      const myDiv = document.getElementById('exportCharts');
      if (myDiv) {
        myDiv.style.setProperty(item.property, item.value);
      }
    });
  }
  const [pandectInfo, setPandectInfo] = useState<any>([]);
  // 点击同比环比按钮切换
  const [switchButton, setSwitchButton] = useState('QOQ');
  useEffect(() => {
    //获取数据
    const getData = async () => {
      //接口数据
      let pandectInfoTemp = await getPandectInfo(
        instDate
      );
      setPandectInfo(pandectInfoTemp);
数据加载完之后调用回调函数返回这个页面的id
      if (useCallBackExport && exportId) {
        setTimeout(() => {
          useCallBackExport('yxzwRef');//调用导出的回调函数
        }, 500);
      }
    };
    getData();
  }, [instDate, switchButton]);
  return (
    <div className={styles.box}>
     内容
    </div>
  );
};
export default ChartOne;