REACT web端 使用html2canvas插件，左右拖动的dom打印配置

可以使用html2canvas插件将指定的DOM元素转换为图片，然后在React中使用拖动库，如react-draggable，实现左右拖动的效果。

以下是一个简单的示例代码：

import React, { useRef, useState } from 'react';
import html2canvas from 'html2canvas';
import Draggable from 'react-draggable';

const PrintConfig = () => {
  const contentRef = useRef(null);
  const [imageData, setImageData] = useState(null);

  const handlePrint = () => {
    html2canvas(contentRef.current).then(canvas => {
      setImageData(canvas.toDataURL());
    });
  };

  return (
    <div>
      <button onClick={handlePrint}>打印</button>
      <Draggable bounds="parent">
        <img src={imageData} alt="打印内容" />
      </Draggable>
      <div ref={contentRef}>
        {/* 在这里放置需要打印的DOM元素 */}
      </div>
    </div>
  );
};

export default PrintConfig;

在上面的代码中，我们使用`useRef`钩子来获取需要打印的DOM元素的引用。然后，在点击打印按钮时，我们使用html2canvas插件将该元素转换为图片，并将图片数据存储在状态变量中。

最后，我们在`<img>`元素中使用`Draggable`组件将图片包裹起来，使其可以拖动。在`bounds`属性中，我们使用`parent`来指定拖动范围为父元素。