前端导入导出文件

一、导出

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,一经查实,立即删除!

相关文章

选取文档元素的API

除了现在常用的选取API 1 document.getElementById() 2 document.getElementsByName() 3 document.getElementsByTagName() 4 ... 新增的API 主要是  document.querySelector(div>ul)  document.querySelectorAll(div>ul>li) 这两个API的强大之处在于能像CSS选…

vue进阶

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

每天一个linux命令(1):ln 命令

每天一个linux命令&#xff08;35&#xff09;&#xff1a;ln 命令 ln 是linux中又一个非常重要命令&#xff0c;它的功能是为某一个文件在另外一个位置建立一个同步的链接.当我们需要在不同的目录&#xff0c;用到相同的文件时&#xff0c;我们不需要在 每一个需要的目录下都放…

ehcache 程序_将Ehcache添加到Openxava应用程序

ehcache 程序介绍 本文介绍如何在Openxava应用程序上快速启用Ehcache&#xff0c;从而提高性能。 查看实体及其图形时&#xff0c;将加载关系。 添加第二级缓存可加快关联元素的检索速度&#xff0c;因为已加载的元素是从缓存而不是数据库中检索的。 最终&#xff0c;该页面解…

Diff 算法核心原理

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

比较Java 8中的命令式和功能性算法

Mario Fusco的流行推文令人印象深刻&#xff0c;显示了类似算法的命令性和功能性方法之间的主要区别实际上是&#xff1a; 势在必行–功能分离pic.twitter.com/G2cC6iBkDJ — Mario Fusco&#xff08;mariofusco&#xff09; 2015年3月1日 两种算法都做同样的事情&#xff0…

mvc的视图中显示DataTable的方法

mvc的视图中显示DataTable的方法&#xff1a; 不断的循环画出table {ViewBag.Title "ShowDataTable"; } using System.Data; model Models.ConModel{var table Model.ExcelTable as DataTable; }<script src"~/Scripts/My97DatePicker/WdatePicker.js"…

rem,em,px,rpx等

1、任意浏览器的默认字体高都是16px。谷歌浏览器显示的最小字体大小是12px。 exp&#xff1a;突破谷歌浏览器显示12px限制。 &#xff08;1&#xff09;、<div>文本</div> 文本嵌套块标签&#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作为父元素的 第一个子元素。要求第一个元素的类…

js 手机端触发事事件、javascript手机端/移动端触发事件

处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件: touchstart: // 手指放到屏幕上的时候触发 touchmove: // 手指在屏幕上移动的时候触发 touchend: // 手指从屏幕上拿起的时候触发 touchcancel: // 系统取消touch事件的时候触发。至于系统…

java 8 lambda_Java 8的烹调方式– Lambda项目

java 8 lambda什么是project lambda &#xff1a;Project lambda是用于以Java语言语法启用lambda表达式的项目。 Lambda表达式是功能编程语言&#xff08;如lisp&#xff09;中的主要语法。 Groovy将是支持lambda表达式&#xff08;也称为闭包&#xff09;的java的最接近亲戚。…

我的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…

encodeURIComponent的使用

URL 元字符&#xff1a;分号&#xff08;;&#xff09;&#xff0c;逗号&#xff08;,&#xff09;&#xff0c;斜杠&#xff08;/&#xff09;&#xff0c;问号&#xff08;?&#xff09;&#xff0c;冒号&#xff08;:&#xff09;&#xff0c;at&#xff08;&#xff09;&a…

如何以及何时使用枚举和注释

本文是我们名为“ 高级Java ”的学院课程的一部分。 本课程旨在帮助您最有效地使用Java。 它讨论了高级主题&#xff0c;包括对象创建&#xff0c;并发&#xff0c;序列化&#xff0c;反射等。 它将指导您完成Java掌握的过程&#xff01; 在这里查看 &#xff01; 目录 1.简…

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

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

软件工程第一次冲刺进度条(1-10天)

第一天&#xff08;4.20&#xff09;昨天做了什么今天做了什么遇到的问题配置安装所需要的环境和相关软件 查询android关于界面编程与视图的相关资料并且初步编写代码 配置虚拟机的时候电脑上总是失败第二天&#xff08;4.21&#xff09;昨天做了什么今天做了什么遇到的问题查询…

css基础过渡与动画与应用于vue、react

一、css属性过渡transition 1、解释&#xff1a; 使用该属性后变化不会在一瞬间完成&#xff0c;会有一个连续的变化效果。第一个参数设置哪些属性变化时需要有连续的效果。 不论用什么方式使属性的值发生变化&#xff0c;transition都会生效。 2、语法&#xff1a; trans…

Android项目开发填坑记-Fragment的onAttach

背景 现在Android开发多使用一个Activity管理多个Fragment进行开发&#xff0c;不免需要两者相互传递数据&#xff0c;一般是给Fragment添加回调接口&#xff0c;让Activity继承并实现。 回调接口一般都写在Fragment的onAttach()方法中&#xff0c;Fragment 3.0 的onAttach()方…