diff --git a/src/api/public.ts b/src/api/public.ts index 99f5e16..ed9293f 100644 --- a/src/api/public.ts +++ b/src/api/public.ts @@ -58,3 +58,18 @@ export const fileDownload = (url: string) => { responseType: 'blob', }) } +/** + * 下载验证 + * @param url 需要下载的文件url + * @returns axios对象 + */ + +export const downloadCertificate = (url: string) => { + return apis({ + method: 'get', + url: '/com/file/downloadCertificate', + params: { + url: url, + }, + }) +} diff --git a/src/pages/registerDetail/index.tsx b/src/pages/registerDetail/index.tsx index 3502cc2..3b48be2 100644 --- a/src/pages/registerDetail/index.tsx +++ b/src/pages/registerDetail/index.tsx @@ -1,9 +1,8 @@ import { CloudDownloadOutlined } from '@ant-design/icons' -import { loadModule } from '@sentry/utils' import { Button, Empty, message, notification, Skeleton, Space } from 'antd' import React, { Fragment, useLayoutEffect, useState } from 'react' import { useNavigate, useParams } from 'react-router-dom' -import { fileDownload } from '../../api/public' +import { downloadCertificate} from '../../api/public' import { getCompetitionInfo, getCompetitionSignInfo, getTeamInfo, getWorkInfo } from '../../api/user' import TopBar from '../../components/TopBar' import './index.scss' @@ -189,62 +188,47 @@ function RegisterDetail() { } } + const getFileNameFromUrl = (url: string) => { + const urlParts = url.split("/"); + return urlParts[urlParts.length - 1]; + }; /** * 文件下载 * @param url 文件url */ - const downloadFile = (url: string) => { + const downloadFile = async (url: string) => { + const loadingKey='downloading' message.loading({ content: '正在下载文件', - duration: 500, + duration: 30, key: 'downloading', }) - fileDownload(url) - .then((res) => { - const content = res.headers['content-disposition'] - console.log('content', res) - const fileBlob = new Blob([res.data]) - const url = window.URL.createObjectURL(fileBlob) - let filename = 'no-file' - const name1 = content.match(/filename=(.*);/) // 获取filename的值 - const name2 = content.match(/filename\*=(.*)/) // 获取filename*的值 - // name1 = decodeURIComponent(name1) - // name2 = decodeURIComponent(name2.substring(6)) // 下标6是UTF-8 - if (name2 !== null) { - filename = decodeURIComponent(name2[0].substring(17)) - } else { - if (name1 !== null) { - filename = decodeURIComponent(name1[0]) - } else { - filename = 'no-file' - } - } - if (filename !== 'no-file') { - const a = document.createElement('a') - a.style.display = 'none' - a.href = url - a.download = filename - document.body.appendChild(a) - a.click() - document.body.removeChild(a) - URL.revokeObjectURL(url) - message.success({ - content: '😁 下载成功', - key: 'downloading', - }) - } else { - message.error({ - content: '😞 下载发生了错误,请联系管理员', - key: 'downloading', - }) - } + const res = await downloadCertificate(url) + console.log(res.data); + + const response=res.data + if (response.success) { + const file = await fetch(response.data.url) + const fileBlob = await file.blob() + const urlvalue = window.URL.createObjectURL(fileBlob) + const a = document.createElement('a') + a.style.display = 'none' + a.href = urlvalue + a.download = getFileNameFromUrl(url) + document.body.appendChild(a) + a.click() + document.body.removeChild(a) + URL.revokeObjectURL(urlvalue) + message.success({ + content: '😁下载完成!' }) - .catch((err) => { - message.error({ - content: '😞 下载发生了错误,请联系管理员', - key: 'downloading', - }) + } else { + message.error({ + content: '😞 下载发生了错误,请联系管理员', + key: 'downloading', }) + } + message.destroy(loadingKey) } const changeRegisterInfo = () => { diff --git a/src/pages/reviewApprover/index.tsx b/src/pages/reviewApprover/index.tsx index 5f3cba7..489bf74 100644 --- a/src/pages/reviewApprover/index.tsx +++ b/src/pages/reviewApprover/index.tsx @@ -7,7 +7,7 @@ import { useNavigate, useParams } from 'react-router-dom' import TopBar from '../../components/TopBar' import { uploadWorkScoreInfo } from '../../api/judge' // import Pdf from './components/index' -import { fileDownload } from '../../api/public' +import { downloadCertificate } from '../../api/public' import { DownloadOutlined } from '@ant-design/icons' const { Link } = Anchor @@ -40,62 +40,48 @@ const ReviewApprover: React.FC = (props) => { // 提交表单 const navigate = useNavigate() + + const getFileNameFromUrl = (url: string) => { + const urlParts = url.split("/"); + return urlParts[urlParts.length - 1]; + }; /** * 文件下载 * @param url 文件url */ - const downloadFile = (url: string) => { + const downloadFile = async (url: string) => { + const loadingKey = 'downloading' message.loading({ content: '正在下载文件', - duration: 500, + duration: 30, key: 'downloading', }) - fileDownload(url) - .then((res) => { - const content = res.headers['content-disposition'] - console.log('content', res) - const fileBlob = new Blob([res.data]) - const url = window.URL.createObjectURL(fileBlob) - let filename = 'no-file' - const name1 = content.match(/filename=(.*);/) // 获取filename的值 - const name2 = content.match(/filename\*=(.*)/) // 获取filename*的值 - // name1 = decodeURIComponent(name1) - // name2 = decodeURIComponent(name2.substring(6)) // 下标6是UTF-8 - if (name2 !== null) { - filename = decodeURIComponent(name2[0].substring(17)) - } else { - if (name1 !== null) { - filename = decodeURIComponent(name1[0]) - } else { - filename = 'no-file' - } - } - if (filename !== 'no-file') { - const a = document.createElement('a') - a.style.display = 'none' - a.href = url - a.download = filename - document.body.appendChild(a) - a.click() - document.body.removeChild(a) - URL.revokeObjectURL(url) - message.success({ - content: '😁 下载成功', - key: 'downloading', - }) - } else { - message.error({ - content: '😞 下载发生了错误,请联系管理员', - key: 'downloading', - }) - } + const res = await downloadCertificate(url) + console.log(res.data); + + const response = res.data + if (response.success) { + const file = await fetch(response.data.url) + const fileBlob = await file.blob() + const urlvalue = window.URL.createObjectURL(fileBlob) + const a = document.createElement('a') + a.style.display = 'none' + a.href = urlvalue + a.download = getFileNameFromUrl(url) + document.body.appendChild(a) + a.click() + document.body.removeChild(a) + URL.revokeObjectURL(urlvalue) + message.success({ + content: '😁下载完成!' }) - .catch((err) => { - message.error({ - content: '😞 下载发生了错误,请联系管理员', - key: 'downloading', - }) + } else { + message.error({ + content: '😞 下载发生了错误,请联系管理员', + key: 'downloading', }) + } + message.destroy(loadingKey) } // 处理提交事件 const handleSubmit = () => { diff --git a/src/pages/reviewJudge/index.tsx b/src/pages/reviewJudge/index.tsx index eefe04a..951c347 100644 --- a/src/pages/reviewJudge/index.tsx +++ b/src/pages/reviewJudge/index.tsx @@ -5,7 +5,7 @@ import { useNavigate, useParams } from 'react-router-dom' import { uploadWorkJudgeInfo } from '../../api/judge' import TopBar from '../../components/TopBar' import './index.scss' -import { fileDownload } from '../../api/public' +import { downloadCertificate } from '../../api/public' import { DownloadOutlined } from '@ant-design/icons' const { Link } = Anchor @@ -33,62 +33,48 @@ const ReviewJudge: React.FC = (props) => { // 提交 const navigate = useNavigate() + + const getFileNameFromUrl = (url: string) => { + const urlParts = url.split("/"); + return urlParts[urlParts.length - 1]; + }; /** * 文件下载 * @param url 文件url */ - const downloadFile = (url: string) => { + const downloadFile = async (url: string) => { + const loadingKey = 'downloading' message.loading({ content: '正在下载文件', - duration: 500, + duration: 30, key: 'downloading', }) - fileDownload(url) - .then((res) => { - const content = res.headers['content-disposition'] - console.log('content', res) - const fileBlob = new Blob([res.data]) - const url = window.URL.createObjectURL(fileBlob) - let filename = 'no-file' - const name1 = content.match(/filename=(.*);/) // 获取filename的值 - const name2 = content.match(/filename\*=(.*)/) // 获取filename*的值 - // name1 = decodeURIComponent(name1) - // name2 = decodeURIComponent(name2.substring(6)) // 下标6是UTF-8 - if (name2 !== null) { - filename = decodeURIComponent(name2[0].substring(17)) - } else { - if (name1 !== null) { - filename = decodeURIComponent(name1[0]) - } else { - filename = 'no-file' - } - } - if (filename !== 'no-file') { - const a = document.createElement('a') - a.style.display = 'none' - a.href = url - a.download = filename - document.body.appendChild(a) - a.click() - document.body.removeChild(a) - URL.revokeObjectURL(url) - message.success({ - content: '😁 下载成功', - key: 'downloading', - }) - } else { - message.error({ - content: '😞 下载发生了错误,请联系管理员', - key: 'downloading', - }) - } + const res = await downloadCertificate(url) + console.log(res.data); + + const response = res.data + if (response.success) { + const file = await fetch(response.data.url) + const fileBlob = await file.blob() + const urlvalue = window.URL.createObjectURL(fileBlob) + const a = document.createElement('a') + a.style.display = 'none' + a.href = urlvalue + a.download = getFileNameFromUrl(url) + document.body.appendChild(a) + a.click() + document.body.removeChild(a) + URL.revokeObjectURL(urlvalue) + message.success({ + content: '😁下载完成!' }) - .catch((err) => { - message.error({ - content: '😞 下载发生了错误,请联系管理员', - key: 'downloading', - }) + } else { + message.error({ + content: '😞 下载发生了错误,请联系管理员', + key: 'downloading', }) + } + message.destroy(loadingKey) } const handleSubmit = () => { console.log(isPass); diff --git a/src/pages/workDetail/index.tsx b/src/pages/workDetail/index.tsx index 9b7d9ca..292d516 100644 --- a/src/pages/workDetail/index.tsx +++ b/src/pages/workDetail/index.tsx @@ -4,7 +4,7 @@ import { UploadFile } from 'antd/lib/upload/interface' import FormRender, { useForm } from 'form-render' import React, { Fragment, ReactElement, useEffect, useLayoutEffect, useState } from 'react' import { useNavigate, useParams } from 'react-router-dom' -import { fileDownload } from '../../api/public' +import { downloadCertificate, fileDownload } from '../../api/public' import { getCompetitionInfo, getLicense, @@ -77,55 +77,48 @@ function WorkDetail() { return fileName } + const getFileNameFromUrl = (url: string) => { + const urlParts = url.split("/"); + return urlParts[urlParts.length - 1]; + }; + /** * 文件下载 * @param url 文件url */ - const downloadFile = (url: string) => { + const downloadFile = async (url: string) => { + const loadingKey = 'downloading' message.loading({ content: '正在下载文件', - duration: 500, + duration: 30, key: 'downloading', }) - fileDownload(url).then((res) => { - const content = res.headers['content-disposition'] - console.log('content', res) - const fileBlob = new Blob([res.data]) - const url = window.URL.createObjectURL(fileBlob) - let filename = 'no-file' - const name1 = content.match(/filename=(.*);/) // 获取filename的值 - const name2 = content.match(/filename\*=(.*)/) // 获取filename*的值 - // name1 = decodeURIComponent(name1) - // name2 = decodeURIComponent(name2.substring(6)) // 下标6是UTF-8 - if (name2 !== null) { - filename = decodeURIComponent(name2[0].substring(17)) - } else { - if (name1 !== null) { - filename = decodeURIComponent(name1[0]) - } else { - filename = 'no-file' - } - } - if (filename !== 'no-file') { - const a = document.createElement('a') - a.style.display = 'none' - a.href = url - a.download = filename - document.body.appendChild(a) - a.click() - document.body.removeChild(a) - URL.revokeObjectURL(url) - message.success({ - content: '😁 下载成功', - key: 'downloading', - }) - } else { - message.error({ - content: '😞 下载发生了错误,请联系管理员', - key: 'downloading', - }) - } - }) + const res = await downloadCertificate(url) + console.log(res.data); + + const response = res.data + if (response.success) { + const file = await fetch(response.data.url) + const fileBlob = await file.blob() + const urlvalue = window.URL.createObjectURL(fileBlob) + const a = document.createElement('a') + a.style.display = 'none' + a.href = urlvalue + a.download = getFileNameFromUrl(url) + document.body.appendChild(a) + a.click() + document.body.removeChild(a) + URL.revokeObjectURL(urlvalue) + message.success({ + content: '😁下载完成!' + }) + } else { + message.error({ + content: '😞 下载发生了错误,请联系管理员', + key: 'downloading', + }) + } + message.destroy(loadingKey) } const useGetWorkSchema = () => {