文档章节

React 同步上传excle,并下载结果

BryanYang
 BryanYang
发布于 2017/06/01 20:01
字数 164
阅读 301
收藏 0
import fetch from 'ascm-comp/lib-fetch/index';

const React = require('mui/reactjs/react');
const Fusion = require('mui/fusion/index');

const { Button } = Fusion;

require('./index.less');

class UploadModal extends React.Component {

  static propTypes = {
    action: React.PropTypes.string,
    resultFileName: React.PropTypes.string,
    name: React.PropTypes.string,
  }

  uploadClick() {
    return () => {
      this.upload.click();
    };
  }

  post() {
    return (e) => {
      const oReq = new XMLHttpRequest();
      oReq.open('POST', this.props.action, true);
      oReq.responseType = 'arraybuffer';
      oReq.withCredentials = true;
      oReq.onload = function () {
        const arrayBuffer = oReq.response; // Note: not oReq.responseText
        if (arrayBuffer) {
          const byteArray = new Uint8Array(arrayBuffer);
          const aLink = document.createElement('a');
          const blob = new Blob([byteArray], { type: 'application/vnd.ms-excel' });
          let fileName = this.props.resultFileName ||'result.xlsx';
          try {
            const disposition = oReq.getResponseHeader('Content-Disposition') || '';
            fileName = disposition.split('filename=').length > 1 ? disposition.split('filename=')[1] : 'result.xlsx';
          } catch (err) {
            console.error(err);
          }
          aLink.download = fileName;
          aLink.href = URL.createObjectURL(blob);
          aLink.target = '_blank';
          document.body.appendChild(aLink);
          aLink.click();
        }
      };
      const form = new FormData();
      form.append(this.props.name||'file', e.target.files[0]);
      form.append('_scm_token_', window._scm_token_);
      oReq.send(form);
    };
  }

  render() {

    return (
      <span>
        <Button onClick={this.uploadClick()}>{this.props.children}</Button>
        <input
          type="file" ref={(c) => { this.upload = c; }}
          onChange={this.post()}
          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;"
          style={{ display: 'none' }}
        />
      </span>
    );
  }
}

module.exports = UploadModal;

© 著作权归作者所有

BryanYang
粉丝 16
博文 165
码字总数 52036
作品 0
石景山
程序员
私信 提问
加载中

评论(0)

Java +EasyUI+SpringMvc实现Excle导入导出(上)

前言 先介绍下项目的开发环境,采用java开发语言进行开发,前台UI使用的是EasyUI框架,接下来是SpringMvc与Ejb结合来开发,整个项目管理采用的是Maven管理,服务器用的是Jboss6.2.0企业版。 ...

fightingKing
2015/01/26
0
0
Weblogic 配置问题

把代码上传到weblogic 服务器上时,出现了一个路径问题,求各位大神帮忙解决。 项目有一个功能是把查询的数据导出excle表格,用了ireport的jasper,在本地上跑的时候可以正常导出excle表格,但...

Expectation
2014/06/16
111
0
java批量下载乱码问题

系统有个打包批量下载excel报表数据的功能, 我是先用url下载方式去报表服务器下载,保存到web服务器上,文件名是报表的名称,含有中文, 然后多个excle打包成zip在下载给客户端,zip的文件名...

游荡在记忆深处
2015/11/12
246
3
SpringBoot读取Resource下文件的几种方式

最近在项目中涉及到Excle的导入功能,通常是我们定义完模板供用户下载,用户按照模板填写完后上传;这里模板位置resource/excel/test.xlsx,尝试了四种读取方式,并且测试了四种读取方式分别...

朝如青丝暮成雪
2019/05/13
464
0
weblogic 下 为何使用java实现的下载,下载后的文件跟源文件总会差几个字节?

jsp里就一个简单的输入输出操作,大致逻辑如上 有没达人碰到过这样问题的 这样的结果就是如果是图片文件,虽然差了几个字节,但是还是可以打开 excle的话就是下载后的文件会提示文件中有无法读取...

pillsilly
2013/04/19
735
1

没有更多内容

加载失败,请刷新页面

加载更多

在两个日期之间查找对象MongoDB

我一直在围绕在mongodb中存储推文,每个对象看起来像这样: {"_id" : ObjectId("4c02c58de500fe1be1000005"),"contributors" : null,"text" : "Hello world","user" : { "following......

javail
23分钟前
35
0
《aelf经济和治理白皮书》重磅发布:为DAPP提供治理高效、价值驱动的生态环境

2020年2月17日,aelf正式发布《aelf经济和治理白皮书》,这是aelf继项目白皮书后,在aelf网络经济模型和治理模式方面的权威论述。 《aelf经济和治理白皮书》描述了aelf生态中各个角色及利益的...

AELF开发者社区
34分钟前
44
0
EditText的首字母大写

我正在开发一个小小的个人待办事项列表应用程序,到目前为止,一切都运行良好。 我想知道一个小怪癖。 每当我去添加一个新项目时,我都会看到一个带有EditText视图的Dialog。 当我选择EditT...

技术盛宴
38分钟前
30
0
战疫 | 高德工程师如何在3天上线“医护专车”

新冠状病毒肺炎疫情突袭,无数医护人员放弃与家人团聚,明知凶险,仍然奋战在一线。但因为武汉公交、地铁、网约车停运,医护人员上下班很难。白衣天使疾呼打车难。 (截图摘自《财经国家周刊...

amap_tech
46分钟前
41
0
img在IE中无法按比例显示

在IE浏览器中使用img标签当给img标签设置width:98%时,显示时还是会把img的原始高度显示出来 解决方式给父标签设置width,但width不能使用100%需要指定一个值 <div style="width:900px;"> ...

有理想的鸭子
46分钟前
45
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部