From 653a092c3fdb9ea05a00b4980079b401d465c7c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=B2=81=E8=AA=89=E7=A8=8B?= <2659568239@qq.com>
Date: Fri, 15 Dec 2023 16:10:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SaveAs/index.tsx            | 42 ++++++++++++++++++++++
 src/pages/GLQ/WebMMJ/StatusQuery/index.tsx |  7 ++--
 2 files changed, 45 insertions(+), 4 deletions(-)
 create mode 100644 src/components/SaveAs/index.tsx

diff --git a/src/components/SaveAs/index.tsx b/src/components/SaveAs/index.tsx
new file mode 100644
index 0000000..a326b04
--- /dev/null
+++ b/src/components/SaveAs/index.tsx
@@ -0,0 +1,42 @@
+import { FC, useRef } from 'react';
+import ButtonComp from '../ButtonComp';
+
+interface PageProps {
+  domId: string; // 元素id
+  fileName?: string; // 文件名称
+  btnName?: string; // 按钮名称
+  style?: any;
+}
+
+const SaveAs: FC<PageProps> = ({
+  domId,
+  fileName = '文件名称',
+  btnName = '文件另存',
+  style
+}) => {
+  const downloadLink: any = useRef(null);
+
+  const saveAs = () => {
+    const element: any = document.getElementById(domId);
+    const text = element.innerText || element.textContent;
+
+    // 创建一个Blob对象，保存文本内容
+    const blob = new Blob([text], { type: 'text/plain' });
+    // 设置下载链接的href和download属性
+    downloadLink.current.href = URL.createObjectURL(blob);
+    downloadLink.current.download = fileName;
+    // 点击下载链接
+    downloadLink.current.click();
+    // 释放下载链接
+    URL.revokeObjectURL(downloadLink.current.href);
+  }
+
+  return (
+    <div style={{...style}}>
+      <a ref={downloadLink} style={{ display: 'none' }} />
+      <ButtonComp type={'cancel'} text={btnName} onClick={() => saveAs()} />
+    </div>
+  )
+}
+
+export default SaveAs
\ No newline at end of file
diff --git a/src/pages/GLQ/WebMMJ/StatusQuery/index.tsx b/src/pages/GLQ/WebMMJ/StatusQuery/index.tsx
index 7a59198..bbe04df 100644
--- a/src/pages/GLQ/WebMMJ/StatusQuery/index.tsx
+++ b/src/pages/GLQ/WebMMJ/StatusQuery/index.tsx
@@ -5,6 +5,7 @@ import { useEffect, useRef, useState } from 'react';
 import { secretInit_getStatus } from '@/services/gql';
 import { message } from 'antd';
 import ClearInfoDialog from '@/components/ClearInfoDialog';
+import SaveAs from '@/components/SaveAs';
 
 // 网络MMJ管理 --> 状态查询
 export default function Page() {
@@ -61,7 +62,7 @@ export default function Page() {
         <div className='line'></div>
         <div className='pd20 pb100'>
           <div ref={outputRef} className={styles.html_con}>
-            <div style={{ padding: '0px 12px' }} key={currentLineIndex}>
+            <div id='messageInfo' style={{ padding: '0px 12px' }} key={currentLineIndex}>
               {lines.slice(0, currentLineIndex).map((line: string, index: number) => (
                 <p key={index} style={{ paddingTop: index == 0 ? 20 : 10 }}>{line}</p>
               ))}
@@ -69,9 +70,7 @@ export default function Page() {
           </div>
           <div className={styles.btn_warp}>
             <ButtonComp style={{ marginRight: 20 }} text={'状态查询'} onClick={() => { statusQuery() }} />
-            <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'文件另存'} onClick={() => {
-              message.info('该功能还在开发中！');
-            }} />
+            <SaveAs style={{ marginRight: 20}} domId='messageInfo'/>
             <ButtonComp type={'cancel'} disabled={lines.length == 0} text={'清空信息'} onClick={() => setVisibility(true)} />
           </div>
         </div>