下载组件

src/components/download/Download.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { LoadingOutlined } from '@ant-design/icons'
+
+export interface DownloadProps {
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    server?: () => Promise<any>
+    fileName?: string
+
+    [key: string]: any
+}
+
+const Download = ({ server, style, className, fileName, children, ...props }: DownloadProps) => {
+
+    const [ isLoading, setLoading ] = useState(false)
+    const serverRef = useRef(server)
+    serverRef.current = server
+
+    useEffect(() => {
+        serverRef.current = server
+    }, [ server ])
+
+    return (
+            <div className={className}
+                 style={style} {...props}
+
+                 onClick={() => {
+                     if (isLoading) return
+                     serverRef.current && serverRef.current()?.then(res => {
+
+                         if (!res) {
+                             return res
+                         }
+
+                         const downloadUrl = window.URL.createObjectURL(new Blob([ res ]))
+                         const a = document.createElement('a')
+                         a.style.display = 'none'
+                         a.href = downloadUrl
+                         a.download = fileName || ''
+                         const event = new MouseEvent('click')
+                         a.dispatchEvent(event)
+                         window.URL.revokeObjectURL(downloadUrl)
+                         setTimeout(() => a.remove())
+                         return res
+                     })?.finally(() => {
+                         setLoading(false)
+
+                     })
+                 }}
+            >
+                {isLoading && <LoadingOutlined/>}
+                {children}
+            </div>
+    )
+}
+
+export default Download

src/pages/websites/ssl/index.tsx

@@ -30,6 +30,7 @@ import SSLDetail from './components/Detail.tsx'
 import { detailAtom } from './components/store.ts'
 import Upload from './components/Upload.tsx'
 import { FormInstance } from 'antd/lib'
+import Download from '@/components/download/Download.tsx'
 
 
 const SSL = () => {
@@ -261,14 +262,12 @@ const SSL = () => {
                         </Else>
 
                     </If>,
-                    <Action key="download"
-                            as={'a'}
-                            onClick={() => {
-
+                    <Download key="download"
+                              server={async () => {
                               }}
                     >
-                        {t('actions.download', '下载')}
-                    </Action>,
+                        <a>{t('actions.download', '下载')}</a>
+                    </Download>,
                     <Popconfirm
                             key={'del_confirm'}
                             disabled={isDeleting}

src/request.ts

@@ -12,6 +12,7 @@ export type { AxiosRequestConfig }
 type FetchMethod = <T = any, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>) => Promise<IApiResult<T>>
 
 interface RequestMethods extends Pick<AxiosInstance, 'get' | 'post' | 'put' | 'delete' | 'request' | 'postForm' | 'patch' | 'patchForm' | 'putForm' | 'options' > {
+    download: (url: string, data?: any) => Promise<BlobPart>
 }
 
 
@@ -119,6 +120,23 @@ axiosInstance.interceptors.response.use(
             return Promise.reject(error)
         })
 
+//扩展download方法
+// @ts-ignore fix download
+axiosInstance.download = (url: string, data?: any) => {
+    const formData = new FormData()
+    for (const key in data) {
+        formData.append(key, data[key])
+    }
+    const config = {
+        method: 'post',
+        url,
+        data: formData,
+        responseType: 'blob',
+        timeout: 40 * 1000,
+    } as AxiosRequestConfig
+    return axiosInstance.request(config)
+}
+
 
 //创建返回IApiResult类型的request
 export const createFetchMethods = () => {

src/service/websites.ts

@@ -7,8 +7,10 @@ const websitesServ = {
         ...createCURD<any, WebSite.ISSL>('/website/ssl'),
         upload: async(params: WebSite.SSLUploadDto)=>{
             return request.post<any, WebSite.SSLUploadDto>('/website/ssl/upload', params)
-        }
-
+        },
+        download: async(params: any)=>{
+            return request.download('/website/ssl/download', params)
+        },
     },
     acme: {
         ...createCURD<any, WebSite.IAcmeAccount>('/website/acme')