(# [feature](ui)add profile download button 17547)

ui/src/pages/query-profile/index.tsx

@@ -18,7 +18,7 @@
  */
 
 import React, {useEffect, useRef, useState} from 'react';
-import {Button, Col, Row, Typography} from 'antd';
+import {Button, Col, Row, Typography, Space} from 'antd';
 import {queryProfile} from 'Src/api/api';
 import Table from 'Src/components/table';
 import {useHistory} from 'react-router-dom';
@@ -75,6 +75,20 @@ export default function QueryProfile(params: any) {
         history.push('/QueryProfile/');
     }
 
+    function download(profile) {
+        const blob = new Blob([JSON.stringify(profile)], {
+            type: "text/plain"
+        });
+        const tagA = document.createElement("a");
+        tagA.download = `profile_${(new Date()).valueOf()}.txt`;
+        tagA.style.display = "none";
+        tagA.href = URL.createObjectURL(blob);
+        document.body.appendChild(tagA);
+        tagA.click();
+        URL.revokeObjectURL(tagA.href);
+        document.body.removeChild(tagA);
+    }
+
     return (
         <Typography style={{padding: '30px'}}>
             <Title>Finished Queries</Title>
@@ -82,7 +96,12 @@ export default function QueryProfile(params: any) {
             <Row style={{paddingBottom: '15px'}}>
                 <Col span={12}><Text strong={true}>This table lists the latest 100 queries</Text></Col>
                 <Col span={12} style={{textAlign: 'right'}}>
-                    {profile ? <Button type="primary" onClick={goPrev}>back</Button> : ''}
+                    {profile ? <Space>
+                        <Button type="primary" onClick={goPrev}>back</Button>
+                        <Button onClick={() => {
+                            download(profile)
+                        }}>download</Button>
+                    </Space> : ''}
                 </Col>
             </Row>
             {