优化导出加水印

src/pages/Detail/Index.js

@@ -87,8 +87,6 @@ function Detail(props) {
   });
   const cellPosition = useRef({});
 
-  const [imgPic, setImgPic] = useState('');
-
   useEffect(() => {
     // if (!version.id) return
     // 不请求excelFileList 时清空excelFileList,否则会出现清单切换后如果attachment_id不存在，附件信息没有更新
@@ -537,7 +535,6 @@ function Detail(props) {
   }, [compareList]);
 
   useEffect(() => {
-    // if (versionList.length == 0) return;
     if (!currentUser.ID) return;
     if (!version.id) {
       changeVersion(excelID);
@@ -560,15 +557,6 @@ function Detail(props) {
               新建清单
             </Button>
           )}
-          <Button
-            onClick={() => {
-              const src = sheetRef.current?.luckysheet.getScreenshot();
-              exportExcelImg(src).then(res => setImgPic(res));
-              // setImgPic(src);
-            }}
-          >
-            导出图片
-          </Button>
           <CurrentInfo version={version} flowDetail={flowDetail} />
         </div>
         <div className={styles.btns}>
@@ -578,12 +566,18 @@ function Detail(props) {
               保存
             </Button>
           )}
+          <Button type="primary" onClick={() => setVersionTreeVisible(true)}>
+            历史版本
+          </Button>
           <Button
             type="primary"
             style={{ marginRight: 20 }}
-            onClick={() => setVersionTreeVisible(true)}
+            onClick={() => {
+              const src = sheetRef.current?.luckysheet.getScreenshot();
+              exportExcelImg(src, currentUser?.CName);
+            }}
           >
-            历史版本
+            导出图片
           </Button>
           <Avatar.Group style={{ marginRight: 20 }}>
             {user.map((item, id) => (
@@ -617,7 +611,6 @@ function Detail(props) {
           onChange={e => exportExcl(e.target.files)}
         />
       </div>
-      {imgPic && <img src={imgPic} />}
       {showPsrBtns && <PsrControl sheetRef={sheetRef} />}
       <div style={{ display: 'flex' }}>
         <div

src/pages/Detail/exportExcelImg.js

@@ -1,3 +1,4 @@
+import { downloadFile } from '@/utils/utils';
 import { async } from '@antv/x6/lib/registry/marker/async';
 
 function blobToImg(blob) {
@@ -30,7 +31,7 @@ function watermark(canvas, text) {
     let ctx = canvas.getContext('2d');
     // 设置填充字号和字体，样式
     ctx.font = '24px 宋体';
-    ctx.fillStyle = '#FFC82C';
+    ctx.fillStyle = '#92dfff';
     // 设置右对齐
     ctx.textAlign = 'right';
     // 在指定位置绘制文字，这里指定距离右下角20坐标的地方
@@ -41,15 +42,14 @@ function watermark(canvas, text) {
     });
   });
 }
-export default async function(data64) {
-  // let img = await blobToImg(data64);
+export default async function(data64, text = '金科环境') {
   let img = new Image();
   img.src = data64;
   document.body.appendChild(img);
   let canvas = await imgToCanvas(img);
-  let blob = await watermark(canvas, '金科环境');
+  let blob = await watermark(canvas, text);
   let newImage = await blobToImg(blob);
-  return URL.createObjectURL(blob);
-
-  return newImage;
+  const url = URL.createObjectURL(blob);
+  downloadFile(url, '111');
+  // return URL.createObjectURL(blob);
 }