基于antd实现

上图

组件代码

生成pdf

需要下载两个包

yarn add html2canvas jspdf

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
import './App.css';
import { Button } from 'antd';
import { useState } from 'react';
// utils/htmlToPdf.js：导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
function GetPdf() {
 const  htmlToPdf = (id, title) => {
    const element = document.getElementById(`${id}`)
    const opts = {
      scale: 12, // 缩放比例，提高生成图片清晰度
      useCORS: true, // 允许加载跨域的图片
      allowTaint: false, // 允许图片跨域，和 useCORS 二者不可共同使用
      tainttest: true, // 检测每张图片已经加载完成
      logging: true // 日志开关，发布的时候记得改成 false
    }
      html2Canvas(element, opts)
      .then((canvas) => {
        console.log(canvas)
        const contentWidth = canvas.width
        const contentHeight = canvas.height
        // 一页pdf显示html页面生成的canvas高度;
        const pageHeight = (contentWidth / 592.28) * 841.89
        // 未生成pdf的html页面高度
        let leftHeight = contentHeight
        // 页面偏移
        let position = 0
        // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        const imgWidth = 595.28
        const imgHeight = (592.28 / contentWidth) * contentHeight
        const pageData = canvas.toDataURL('image/jpeg', 1.0)
        console.log(pageData)
        // a4纸纵向，一般默认使用；new JsPDF('landscape'); 横向页面
        const PDF = new JsPDF('', 'pt', 'a4')

        // 当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          // addImage(pageData, 'JPEG', 左，上，宽度，高度)设置
          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
        } else {
          // 超过一页时，分页打印（每页高度841.89）
          while (leftHeight > 0) {
            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight
            position -= 841.89
            if (leftHeight > 0) {
              PDF.addPage()
            }
          }
        }
        PDF.save(title + '.pdf')
      })

      .catch((error) => {
        console.log('打印失败', error)
      })
  }
  const getPdg = ()=>{
    setstate(false)
    htmlToPdf('getPdf', '个人报告')
      

  }
  return (
    <><div className="App" id="getPdf">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
    <Button onClick={getPdg}>点击生成pdf</Button>
    {/* svg图片导出不了 */}
    </>
  );
}

export default GetPdf;

滑动验证代码

需下载一个包

yarn add react-simple-verify

import React, { Component } from 'react';
import ReactSimpleVerify from 'react-simple-verify'; // 引入react滑块验证
import 'react-simple-verify/dist/react-simple-verify.css'; // 引入react滑块验证的css
export default class Yanzhengma extends Component {
	// 验证成功之后进行的操作
    success(){
    }
    // 重置
    reset=()=>{
        const $verify = this.refs.verify 
        $verify.reset()
        this.setState({
          isPass: false
        })
    }
    render() {
        return (
            <div>
            	{/* react滑块组件 */}
                <ReactSimpleVerify ref="verify" success={ this.success.bind(this) } />
                {/* 重置按钮 */}
                <button onClick={this.reset}>reset</button>
            </div>
        )
    }
}

需要源文件点击gitee.com/dedededede1…