前端导入导出文件

一、导出

1、返回值是url:创建个a标签即可

    printRecord(params).then((response) => {if (response.success) {let a = document.createElement('a');//创建a标签//从新页面打开,下载的话不需要这个,打开一个图片需要从新页面打开a.setAttribute("target", "_blank");a.href = response.data;//文件urldocument.body.appendChild(a);a.click();//触发下载document.body.removeChild(a)} else {message.error(response.message);}}).catch((error) => {console.log(error);}).finally(()=>{this.setState({nowLoading:false})})

 

2、返回值是文件流:响应类型设置为blob,将文件转化为url,a标签点击下载。

        axios({method: 'get',url: WEBCONFIG.HOST + `/bapi/api/user-trajectory/biz/user-trajectory/local/export?type=${97}`,responseType: 'blob',headers: { 'X-Cfpamf-App-Key': WEBCONFIG.APP_KEY, 'authorization': WEBCONFIG.token }}).then(response => {this.download(response, '员工居住地址明细');}).catch((error) => {message.error("导出失败,请检查当前查询条件是否能查出数据!");}).finally(() => {this.setState({ exportLoading:false})})// 导出download = (data, name) => {if (!data) {return}const time = moment().format('YYYYMMDD');const blob = new Blob([data.data], { type: "application/vnd.ms-excel" });const url = URL.createObjectURL(blob);const link = document.createElement('a');link.style.display = 'none';link.href = url;//下载下来的文件的名字link.setAttribute('download', `${name + time}.xls`);document.body.appendChild(link);link.click()}

 

 

3、返回值是文件流。然后是pdf,且想直接打印,只能通过iframe。

注意:后端如果返回的是url,不行,iframe的url会跨域,不能调用计算机的打印程序成功,必须返回的是文件流,自己创建url,且经实测,这个设置url步骤有延迟,1s后才能调用打印程序成功。

    <iframe  id="printIframe" src='' style={{display: 'none'}}></iframe>axios({method:'post',url: WEBCONFIG.HOST + `/loan/customer/printRecord`,responseType: 'blob',headers: {'X-Cfpamf-App-Key':WEBCONFIG.APP_KEY,'authorization':WEBCONFIG.token},data: params,}).then(response => {var blob = new Blob([response.data],{ type: 'application/pdf' });const url = URL.createObjectURL(blob);var red = document.getElementById("printIframe");red.setAttribute("src", url); setTimeout(() =>{red.focus(); red.contentWindow.print();},1000)}).catch((error) => {message.error("导出失败,请检查当前查询条件是否能查出数据!");if(error.toString().indexOf('Request failed with status code 401')){store.dispatch({type: 'login/logout',});}}).finally(()=>{this.setState({nowLoading:false})})

二、导入

1、上传到阿里云

动态获取aliyun参数配置,client.put上传文件,上传后每次得到的都是临时地址,每次得重新请求新的临时地址预览。

举例:上传视频 antd3.0

const OSS = require('ali-oss');// 获取阿里云上传token
export async function getStsOssConfig(params) {return request(`${WEBCONFIG.HOST}/bizconfig/common/getStsOssConfig?${stringify(params)}`);
}const fileTypes = ['png','jpeg','jpg','bmp','gif','xlsx','xls','txt','pdf','doc','docx','ppt','pptx','rar','zip','dat','avi','rmvb','wps','jpe','xml','3gp','m3u8','mp4','csv','mp3','m4a','awb','heic']export function validateFileType(file){//限制上传文件类型let idx = file.name.lastIndexOf('.'),res=true;if(idx>-1){let filetype = file.name.substr(idx+1,file.name.length-idx);console.log(filetype,'fileInfo',file)if(!(fileTypes.includes(filetype.toLowerCase()))){let list=[]let content = <span>上传的文件类型必须以下范围中:{fileTypes.map((k,idx)=>{list.push(k)if((idx+1)%10===0 || idx === fileTypes.length-1){let str = list.join('、');list = []return <span><span>{str}</span><br/></span>}})}</span>message.error(content);res = false;}}return res;
}
export function queryStsOssConfig(param,file,docCode) {//限制上传文件类型let flag = validateFileType(file);if(!flag){return Promise.resolve()}// 前端生成uuidconst s = [];const hexDigits = "0123456789abcdef";for (let i = 0; i < 8; i++) {s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);}let uuid = s.join("");if (file.name.indexOf(".") > 0){const arr = file.name.split(".");if(docCode){uuid = (`${docCode}_${getDataByKey(Global.USERID)  }_web_${  uuid  }_${moment().format('YYYYMMDDHHmmss')}.${arr[arr.length - 1]}`);}else{uuid = (`${getDataByKey(Global.USERID)  }_web_${  uuid  }_${moment().format('YYYYMMDDHHmmss')}.${arr[arr.length - 1]}`);}}const defaultParams = {key:param,};try{return new Promise((resolve, reject) => {getStsOssConfig(defaultParams).then((response) =>{if(response && response.success){const configData=response.data;let endpoint2 = configData.endpoint;const index=endpoint2.lastIndexOf(".");endpoint2=endpoint2.substring(0,index);const index2 = endpoint2.lastIndexOf(".");endpoint2=endpoint2.substring(0,index2);const client = new OSS({region: endpoint2,accessKeyId: configData.accessKeyId,accessKeySecret: configData.accessKeySecret,stsToken:configData.securityToken,bucket: configData.bucket,timeout:5 * 60 * 1000});client.put(uuid, file).then((response2)=>{resolve({...response2,config:response.data},uuid);}).catch((error) => {console.log(error);message.error('提交失败,请稍候重试');});}else{message.error(response?.message);}}).catch((error) => {reject(error);});});}catch (e){console.log(e);};
}
<Draggerdisabled={this.state.disableList.videoUpload}accept=".3gp, .mp4, .avi, .mov"beforeUpload={this.beforeUploadHandle}onRemove={this.onRemove}fileList={this.state.fileList}onPreview={this.onPreview}
><p className="ant-upload-drag-icon">{this.state.uploadVideoloading ? <Icon type="loading" /> : <Icon type="inbox" />}</p><p>将文件拖到此处,或<span style={{ color: '#3399ff' }}>点击上传</span></p>
</Dragger><Modaltitle="预览"visible={this.state.previewVideoVisible}onCancel={this.handleCancel}footer={null}width='40%'><video height='350' controls style={{ width: '100%' }}><source src={this.state.tempVideoUrl} /></video></Modal>// 获取阿里云图片地址urlgetOssUrl = (fileId, file) => {const self = this;const params = {name:fileId,}return getSCRMTempUrl(params).then((response) => {if (response.success) {// console.log('getSCRMTempUrl');// console.log(response);self.setState({fileList: [file],tempVideoUrl: response.data,});} else {message.error(response.message);}}).catch((error) => {message.error(Global.NORMAL_ERR);}).finally(() => {this.setState({uploadVideoloading: false})})};// 上传图片beforeUploadHandle = (file) => {// console.log('file');// console.log(file);if (file.type !== 'video/mp4' && file.type !== 'video/3gpp' && file.type !== 'video/avi' && file.type !== 'video/quicktime') {return message.error("只能上传3GP/MP4/AVI/MOV视频文件!")}const isLt500M = file.size / 1024 / 1024 < 500;if (!isLt500M) {return message.error('上传视频大小不能超过500M!');}if (file.size * 1024)this.setState({uploadVideoloading: true})queryStsOssConfig("SCRM", file).then((response) => {if (response) {// console.log('queryStsOssConfig');// console.log(response);this.getOssUrl(response.name, file);this.setState({fileName: file.name,fileId: response.name})} else {this.setState({uploadVideoloading: false})message.error("上传失败");}}).catch((error) => {console.log(error);message.error('提交失败,请稍候重试');this.setState({uploadVideoloading: false})})return false;};onPreview = (file) => {this.setState({previewVideoVisible: true})}onRemove = () => {this.setState({fileList: [],tempVideoUrl: '',fileName: '',fileId: ''});}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/357339.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue进阶

1、vue-cli 使用 在开发中&#xff0c;需要打包的东西不止是js、css、html。还有更多的东西要处理&#xff0c;这些插件和加载器如果我们一一去添加就会比较麻烦&#xff0c;vue官方提供了一个快速搭建vue项目的脚手架&#xff0c;使用它能快速的构建一个web工程模板。 官网&…

Diff 算法核心原理

什么是虚拟DOM 讲Diff算法前&#xff0c;我先给大家讲一讲什么是虚拟DOM吧。这有利于后面大家对Diff算法的理解加深。 虚拟DOM是一个对象&#xff0c;一个什么样的对象呢&#xff1f;一个用来表示真实DOM的对象&#xff0c;要记住这句话。我举个例子&#xff0c;请看以下真实…

python 列表 字典 读写文件:pickle模块的基本使用

建议大家使用cPickle&#xff0c;速度更快&#xff01;&#xff01;&#xff01; python数据持久存储&#xff1a;pickle模块的基本使用&#xff08;转载&#xff09; 作者: pzxbc出处: http://pzxbc.cnblogs.com/本文版权归作者和博客园共有&#xff0c;欢迎转载&#xff0c;但…

first-child、first-of-type等属性的差别

1、xxx:first-child 伪类 xxx作为第一个子元素 //p元素作为第一个子元素的都会变色 p:first-child { background:yellow; } //p作为父元素的 第一个子元素。不要求第一个元素的类型 p>:first-child {background:yellow; }//p作为父元素的 第一个子元素。要求第一个元素的类…

我的Serverless实战——引领云计算的下一个十年

前言&#xff1a;如今&#xff0c;越来越多的大厂企业开始大规模使用Serverless&#xff0c;处于变革中的开发者&#xff0c;大多已从观望状态转向尝试阶段&#xff0c;越来越多Serverless落地场景被解锁。作为基础研发底座&#xff0c;越来越多企业开始接受Serverless&#xf…

各种边距clientWidth、offsetWidth、scrollWidth、clientLeft、getBoundingClientRect详解

1、clientWidth、offsetWidth、scrollWidth <!DOCTYPE html> <html><head><meta charset"utf-8" /><style>#box1 {padding: 50px;position: static;}#box {border: 1px solid red;overflow: scroll;height: 200px;width: 500px;}#con…

花了两天时间用html+css+js做了一个网页版坦克大战游戏

大家好&#xff0c;我是孙叫兽&#xff0c;本期内容给大家分享如何用htmlcssjavaScript去做一个简易网页版坦克游戏。 目录 坦克游戏玩法及介绍 项目结构 源码地址&#xff1a; 坦克游戏玩法及介绍 我们先来看一下首页。 打开这个首页很简单&#xff0c;基本是上面这个样子&…

设置文字多行显示溢出显示省略号

#news_text { border: 1px solid red; width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /*这里可以设置文本显示的行数*/ overflow: hidden; }<div id"news_text"&g…

vue项目有几个接口content Download时间特别长的解决办法

做的可视化地图项目&#xff0c;有几个接口加载比较慢&#xff0c;大概16S左右&#xff0c;第一次加载接近一分钟&#xff0c;这谁能受得了。 对比了正式环境和测试环境&#xff0c;这个接口数据量一样&#xff0c;就是在测试服务器比较慢&#xff0c;排除滚动插件及其它的影响…

Jmeter调试工具---HTTP Mirror Server

转自&#xff1a;http://www.cnblogs.com/puresoul/p/4907655.html 一、HTTP Mirror Server的作用&#xff1a; 它可以在本地临时搭建一个HTTP服务器&#xff0c;该服务器把接收到的请求原样返回&#xff0c;这样就可以看到发送出的请求的具体内容&#xff0c;以供调试。 二、…

520 单身福利|女朋友又找我要礼物

大家好&#xff0c;我是孙叫兽&#xff0c;520快到了&#xff0c;给大家分享一下单身福利&#xff01;时间过得真快&#xff0c;一转眼又到了 520&#xff0c;有对象的程序员又激动又扎心的节日&#xff0c;其实吧&#xff0c;程序员对这种节日又期待又焦灼&#xff0c;为什么呢…

pit和systick_PIT和TestNG突变测试简介

pit和systick变异测试是一种技术&#xff0c;它可以发现测试未涵盖代码的哪些部分。 它类似于代码覆盖范围 &#xff0c;但变异测试不限于在测试期间执行给定行的事实。 这个想法是修改生产代码&#xff08;引入突变&#xff09;&#xff0c;这应该改变其行为&#xff08;产生不…

使用vue-seamless-scroll自动滚动插件复制出来的数据点击事件无效的解决办法

引言&#xff1a;做可视化地图项目&#xff0c;使用vue-seamless-scroll实现表格数据自动滚动&#xff0c;有个bug就是复制出来的数据点击事件失效。这个插件底层的实现是cope的形式&#xff0c; 无限滚动原理&#xff1a;无限滚动的原理就是把之前的遍历的内容复制一份&#x…

最短路的几种算法及其优化(模板)

一.Dijkstra 算法 dijkstra算法适用于边权为正的情况&#xff0c;求单源最短路&#xff0c;适用于有向图和无向图 模板伪代码&#xff1a; 清除所有点的标号 设d[0]0&#xff0c;其余d[i]INF&#xff1b; 循环n次{ 在所有未标记的节点中&#xff0c;寻找d[i]最小的点x 给x做标记…

极客青年说,北京沙龙

大家好&#xff0c;我是孙叫兽&#xff0c;本期内容给大家分享infoq写作平台在北京站的沙龙主题。主要流程如下&#xff1a;早上起来&#xff0c;吃了点饭&#xff0c;然后就去北京望京悠乐汇的A1202,这次是个轰趴馆&#xff0c;比较适合年轻的程序员放松。去的稍微早了点&…

vue点击弹窗自动触发点击事件的解决办法

业务场景&#xff1a;使用vue element ui 的el-dialog&#xff0c;点击弹窗之后&#xff0c;默认加载第一个按钮的数据进行初始化。 div 指令&#xff1a; // 自动触发点击事件directives:{trigger:{inserted(el,binging){// console.log("自动触发事件")el.click()}…

vue根据表格字段不同的状态显示不同的颜色。

业务需求:根据后台返回的数据,对表格中的严重等级和问题状态做一下颜色区分。数据很大,大概一年左右的数据,在二级弹窗中,数据滚动的形式。 大家好,我是孙叫兽 不加状态前: 我这个使用vue+div循环的实现,很便捷,使用element ui也是可以的。 然后再computed:{}中添加…

Apache JMeter教程

要负载测试您的Web应用程序吗&#xff1f; 然后&#xff0c;您应该了解Apache JMeter &#xff01; 该JMeter教程介绍了基本概念以及如何创建测试计划以及如何执行它以对应用程序进行基准测试。 这是我在Disy的Tech-Blog上的文章的交叉张贴 -谢谢您让我在公司时间写文章&…

Echats给柱状图及提示文字添加百分号(%)的解决办法

业务需求&#xff1a;给柱状图添加百分号。 目录 柱状图上添加%效果图 悬浮标签添加%效果图&#xff1a; 刚开始从后台取的数据带%&#xff0c;我这边取这个值的时候显示undifined&#xff0c; 后来就让这哥们把这类的数据从数据库把%去掉。这样我这边就取到了数据&#xff0…

前端使用linux命令更新项目生产包与测试包命令

业务需求&#xff1a;把vue开发的项目打成dist.zip文件&#xff0c;丢到服务器去&#xff0c;通过域名进行访问。 首先登录云管平台的账号和密码&#xff0c;找到对应的服务器&#xff0c;然后连接到堡垒机。 在命令行进入到域名下的地址及目录。 切换到测试文件夹 点击左上角…