ant design 文件下载

 文件下载//导出报表
const exportExel = () => {axios({method: 'post',url: '/insMngGjzy/comb/attribution/export',responseType: 'arraybuffer',data: {combId: Number(id),type: tempOthers?.type || 4,startDate: tempOthers?.dateArr?.[0] || '',endDate: tempOthers?.dateArr?.[1] || '',industryCode: tempOthers?.industryCode || infoObj?.hydm || 0},headers: {clientType: 1,accessToken:getCookie('token') ||'DC0956D491D5BCA4B86809D38DD5C5CB2CA3350B6BE7D98DEEF4EBDDF721A92735FE7A58BA18AE7B6EBDACEEFE27DFF845D0158C216718F3'}}).then((res: any) => {getFile(res,`${infoObj.zzmc}-${infoObj.zhmc}业绩归因报表`,'xlsx','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');});};export const getFile = (res: any, title: string, suffix: string, type: string) => {const blob = new Blob([res.data], { type });const reader = new FileReader();reader.readAsDataURL(blob);reader.onload = e => {const a = document.createElement('a');a.download = `${title}.${suffix || 'xls'}`;a.href = e.target.result;document.body.appendChild(a);a.click();document.body.removeChild(a);};};//下载文件const getUrl = () => {dispatch({type: 'combManage/goGetSysUrl',payload: {type: 'STOCK_POOL_IMPORT_MODEL'},callback: (res: any) => {if (res.code === 1008) {downLoadFromUrl(res.data.url);}}});};export const downLoadFromUrl = (url: string) => {if (url) {var x = new XMLHttpRequest();x.open('GET', url, true);x.responseType = 'blob';x.onload = function(e) {download(x.response, url.substr(url.lastIndexOf('/') + 1), 'application/vnd.ms-excel');};x.send();}};//下载图片const getQqrCode=()=>{axios({method: 'post',url: '/InvestmentAssistant/qrCode/image.do',responseType: 'arraybuffer',data: {type:1},headers: {clientType: 1,}}).then((res: any) => {var data = res.data;let imageUrl ="data:image/png;base64," +btoa(new Uint8Array(data).reduce((data, byte) => data + String.fromCharCode(byte),""));setCode(imageUrl)},()=>{setCode("")});}
// 获取研报并且跳转
export const getReport = (id: number | string,flag: string,reportTitle: string,callback: () => {}
) => {axios({method: 'get',url: `/insMngGjzy/report/${flag}/${id}`,responseType: 'arraybuffer',headers: {clientType: 1,accessToken:getCookie('token') ||'DC0956D491D5BCA4B86809D38DD5C5CB2CA3350B6BE7D98DEEF4EBDDF721A92735FE7A58BA18AE7B6EBDACEEFE27DFF845D0158C216718F3'}}).then((res: any) => {console.log('resres', res);if (res?.status === 200) {const blob = new Blob([res.data], { type: '' });const reader = new FileReader();reader.readAsDataURL(blob);reader.onload = e => {if (e.target.result) {//docx类型if (res.headers['content-disposition']) {if (res.headers['content-disposition'].indexOf('docx') > -1) {let disposition: { [key: string]: any } = { filename: reportTitle + '.docx' };const headersContent = res.headers['content-disposition'].split(';');headersContent.forEach((item: string) => {const itemArr = item.split('=');if (itemArr.length === 2) {disposition[itemArr[0].trim()] = itemArr[1];}});// 文件流const a = document.createElement('a');a.download = decodeURIComponent(disposition['filename']); //对中文进行解码decodeURIComponent方法a.href = e.target.result;document.body.appendChild(a);a.click();document.body.removeChild(a);callback();return;}}//pdf类型localStorage.setItem('pdfCtt', e.target.result);window.open(`${window.location.origin}/institute_gjzy/pdf?id=${id}`, '_blank');callback();}};}});
};

ant design 文件下载相关推荐

Ant Design of React从入门到开发教程
Ant Design Pro 是一个企业级中后台前端/设计解决方案. 目录: 一:开发前的准备二:创建页面三:创建组件并引用四:封装网络请求和网络请求走向五:登录流程以及路由权限设置六:父组 ...
ant Design Pro 登录状态管理
未登录自动跳转到登录页面,登录成功不跳转回登录页面的实现代码调用流程. ant Design Pro 是一个企业中后台管理框架,开始做他,第一个肯定是要做登录,下面来看一下它是怎么登录的. 先看路由配 ...
Ant Design Pro 网络请求流程
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 在 Ant Design Pro 中,一个完整的前端 UI 交互到服务端处理流程是这样的: UI 组件交互操作 ...
【Ant Design Pro 一】环境搭建，创建一个demo
技术交流qq群 173683895 搭建 Ant Design Pro 的前期准备:你的本地环境需要安装 cnpm.node. 注:代码块中的 $ 代表: $后面是在命令行输入的命令,举例 $ ...
react-native安装Ant Design
1.集成Ant Design到项目项目根目录中执行命令: npm install @ant-design/react-native --save 2.集成按需加载babel-plugin-impor ...
实现Ant Design 自定义表单组件
Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...
ant design pro （八）构建和发布
一.概述原文地址:https://pro.ant.design/docs/deploy-cn 二.详细 2.1.构建当项目开发完毕,只需要运行一行命令就可以打包你的应用: npm run buil ...
ant design后台模板-1.前端环境搭建
学习了一段时间的React,试着搭建一个后台管理的模板,算是这一段时间的学习总结,前端将采用create-react-app作为脚手架,引用react-router进行路由处理,后台将采用spring ...
Ant Design 被删代码已恢复，现登顶 GitHub Trending Top 2
[CSDN 编者按]前几天沸沸扬扬的 Ant Design 代码被删事件有了新进展.经多方努力,目前被删代码已恢复,到底是删库跑路还是年终没给够目前尚无明确定论,事件起因仍在调查中-- 作者 | 李磊 ...

ant design 文件下载

ant design 文件下载相关推荐

最新文章

热门文章