如何在react 中使用导入导出功能

收藏

本帖最后由 lzynfd 于 2019-1-11 17:13 编辑

如何在react 中使用导入导出功能

我目前的项目用的是 ant design pro
关于react 文档几乎没有

KevinChen · KevinChen

您好，很抱歉我们的文档还不完善，导致这个问题延误了很久，目前已经找到解决办法：

class SpreadSheetsCon extends Component {
constructor(props) {
super(props);
this.state = {
newTabVisible:true,
tabStripVisible:true,
showHorizontalScrollbar: true,
showVerticalScrollbar:true,
allowUserZoom : true,
allowUserResize : true,
spreadBackColor: '#FFFFFF',
grayAreaBackColor: '#E4E4E4',
};
this.hostStyle = {
top: '90px',
bottom: '130px'
};
this.autoGenerateColumns = false;
this.data = dataService.getPersonAddressData();
this.workbookInitialized = function(workbook){
window.spread = workbook;
}
//this.findControl = GC.Spread.Sheets.findControl;
}

复制代码

您注意workbookInitialized 这个接口，是SpreadJS提供的一个加载完毕事件，

可以用来获取页面上SpreadJS 实例。

importExcel(){
var excelFile = document.getElementById("fileDemo").files[0];
var password = "";
// here is excel IO API
 new Excel.IO().open(excelFile, function (json) {
var workbookObj = json;
var spread = window.spread;
spread.fromJSON(workbookObj);
}, function (e) {
// process error
alert(e.errorMessage);
}, {password: password});
}

复制代码

<SpreadSheets workbookInitialized={this.workbookInitialized}
newTabVisible={this.state.newTabVisible} tabStripVisible={this.state.tabStripVisible}
showHorizontalScrollbar={this.state.showHorizontalScrollbar}
showVerticalScrollbar={this.state.showVerticalScrollbar}
backColor={this.state.spreadBackColor} grayAreaBackColor={this.state.grayAreaBackColor}
allowUserZoom={this.state.allowUserZoom} allowUserResize={this.state.allowUserResize}>
<Worksheet dataSource={this.data}
autoGenerateColumns={this.autoGenerateColumns}>
<Column width={150} dataField="Name"/>
<Column width={150} dataField="CountryRegionCode"/>
<Column width={100} dataField="City"/>
<Column width={200} dataField="AddressLine"/>
<Column width={100} dataField="PostalCode"/>
</Worksheet>
</SpreadSheets>

复制代码

AlexZ · AlexZ

可以参考下面的思路：

使用两个 Spread，其中一个隐藏，隐藏的 Spread 对象导入后，通过 sheet 的 fromJSON 和 toJSON方法讲你需要的 sheet 转移到另一个 Spread 中

请参考下面的博客文章：https://www.grapecity.com.cn/blogs/sjs-single-sheet-loading

AlexZ · AlexZ

请参考下面的代码

import '@grapecity/spread-sheets-vue'
import * as Excel from "@grapecity/spread-excelio"
import GC from '@grapecity/spread-sheets'
import * as FileSaver from "file-saver"
/*
GC.Spread.Sheets.LicenseKey = Excel.LicenseKey = "yourkey";
*/
export default {
//name: 'sample-header'
data(){
return {
dataSource: [
{ name: 'Alice', age: 27, birthday: '1985/08/31', position: 'PM' }
]
}
},
methods:{
spreadInitHandle: function (spread) {
window.mySpread = spread;
//GC.Spread.Common.CultureManager.culture('zh-cn');
GC.Spread.Common.CultureManager.culture('ja-jp');
//GC.Spread.Common.CultureManager.culture('en-us');
let sheet = spread.getActiveSheet();
let fullDateTimePattern = 'dddd, MMMM dd, yyyy h:mm:ss tt';
let date = new Date();
sheet.setValue(13, 3, date);
sheet.getCell(13, 3).formatter(fullDateTimePattern);
//在这里通过spread对象调用对应方法获取对应数据,如getValue,getDataSource,getArray等
//这里通过setRowCount,setColumnCount方法来设置显示的行数和列数
sheet.setRowCount(50)
sheet.setColumnCount(15);
},
exportExcel(e){
this.excelIO = new Excel.IO();
//let spread = GC.Spread.Sheet
if (window.mySpread) {
let ssjson = window.mySpread.toJSON();
this.excelIO.save(ssjson,(blob) => {
FileSaver.saveAs(blob, "test.xlsx");
}, (error) =>{
console.log(error);
});
}
}
}
}
</script>

复制代码

lzynfd · lzynfd

AlexZ 发表于 2019-1-11 17:51
请参考下面的代码

在 react 中怎么把导入的excel 表格显示在最初创建的表格上？？？

lzynfd · lzynfd

AlexZ 发表于 2019-1-11 18:29
可以参考下面的思路：

使用两个 Spread，其中一个隐藏，隐藏的 Spread 对象导入后，通过 sheet 的 fromJ ...

帮我看看该如何处理谢谢

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
Form,
Input,
Select,
Button,
Card,
Row,
Col,
Radio,
InputNumber, Upload, Icon,
} from 'antd';
import { SpreadSheets, Worksheet, Column } from '@grapecity/spread-sheets-react'; // Excel 插件
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css';
import Excel from '@grapecity/spread-excelio';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
const FormItem = Form.Item;
const { Option } = Select;
const { TextArea } = Input;
let ss = 1;
const formItemLayoutOne = {
labelCol: {
xs: { span: 24 },
sm: { span: 2 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 21 },
},
};
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 8 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
};
const twoCol = {
sm: 12,
xs: 24,
};
const threeCol = {
md: 8,
sm: 12,
xs: 24,
};
@connect(({ testQuestions, loading }) => ({
testQuestions,
submitting: loading.effects['form/submitRegularForm'],
}))
@Form.create()
class AddPracticalExercises extends PureComponent {
state = {
sheetList: [], // excel 列表
};
/**
* 创建表单
* @returns {*}
*/
getFields() {
const {
form: {
getFieldDecorator,
getFieldValue,
}, submitting,
} = this.props;
const submitFormLayout = {
wrapperCol: {
xs: { span: 24, offset: 0 },
sm: { span: 10, offset: 7 },
},
};
return (
<Form onSubmit={this.handleSubmit}>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col sm={24} style={{ paddingLeft: '4%' }}>
<FormItem {...formItemLayoutOne} label="上传Excel">
{getFieldDecorator('upload', {
rules: [{
required: true,
message: '点击选择Excel',
}],
valuePropName: 'fileList',
getValueFromEvent: this.normFile,
})(
<Upload name="logo" action="" listType="picture">
<Button>
<Icon type="upload"/> 点击选择Excel
</Button>
</Upload>,
)}
</FormItem>
</Col>
</Row>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col {...threeCol}>
<FormItem {...formItemLayout} label="账表类型">
{getFieldDecorator('xxs', {
rules: [{
required: true, message: '请选择账表类型',
}],
initialValue: '1',
})(
<span>
<Col span={15}>
<Select placeholder="请选择" style={{ width: '100%' }}>
<Option value="0">1</Option>
</Select>
</Col>
<Col span={8} push={1}>
<Button type="primary" icon='plus' onClick={this.addSheet}>添加</Button>
</Col>
</span>,
)}
</FormItem>
</Col>
<Col sm={24} style={{ paddingLeft: '4%' }}> {this.createSheet()} </Col>
</Row>
<FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
<Button type="primary" htmlType="submit" loading={submitting}>
提交
</Button>
</FormItem>
</Form>
);
}
createSpreadSheets = () => {
// excel 模拟数据
const data = [
{ Name: 'Apple', Category: 'Fruit', Price: 1, 'Shopping Place': 'Wal-Mart' },
{ Name: 'Potato', Category: 'Fruit', Price: 2.01, 'Shopping Place': 'Other' },
{ Name: 'Tomato', Category: 'Vegetable', Price: 3.21, 'Shopping Place': 'Other' },
{ Name: 'Sandwich', Category: 'Food', Price: 2, 'Shopping Place': 'Wal-Mart' },
{ Name: 'Hamburger', Category: 'Food', Price: 2, 'Shopping Place': 'Wal-Mart' },
{ Name: 'Grape', Category: 'Fruit', Price: 4, 'Shopping Place': 'Sun Store' },
];
const spreadSheetsConfig = {
backColor: '#fff',
showVerticalScrollbar: true,
showHorizontalScrollbar: true,
tabStripVisible: true,
grayAreaBackColor: '#C0C0C0',
};
const worksheetConfig = {
rowCount: 10,
colCount: 10,
name: 'sheet1',
};
return (
<SpreadSheets {...spreadSheetsConfig} hostStyle={{ width: '100%', height: '400px' }}>
<Worksheet {...worksheetConfig} dataSource={data}>
</Worksheet>
</SpreadSheets>
);
};
/**
* 创建Excel 及表单
*/
createSheet = () => {
const { sheetList } = this.state;
const {
form: {
getFieldDecorator,
},
} = this.props;
return sheetList.map((item, i) => {
return (
<Card
key={i}
type="inner"
title=""
style={{ marginBottom: '10px' }}
extra={<Button type="danger" onClick={() => this.removeSheet(i)}>删除</Button>}
>
{this.createSpreadSheets()}
<FormItem {...formItemLayout} label="数据同步">
<Button type='primary'>同步</Button>
</FormItem>
</Card>
);
});
};
/**
* 添加按钮点击
*/
addSheet = () => {
const { sheetList } = this.state;
this.setState({
sheetList: ['', ...sheetList],
});
};
/**
* 表单提交
* @param e
*/
handleSubmit = e => {
const { dispatch, form } = this.props;
e.preventDefault();
form.validateFieldsAndScroll((err, values) => {
if (!err) {
dispatch({
type: 'form/submitRegularForm',
payload: values,
});
}
});
};
/**
* 删除Excel
* @param e
*/
removeSheet = e => {
const { sheetList } = this.state;
const newSheetList = sheetList.map(item => ({ ...item }));
newSheetList.splice(e, 1);
this.setState({
sheetList: newSheetList,
});
};
/**
* 文件处理
*/
normFile = e => {
if (ss === 1) {
++ss;
console.log('Upload event:', e.file.originFileObj);
new Excel.IO().open(e.file.originFileObj, (s) => {
console.log( SpreadSheets, '------');
}, (s) => {
// console.log(s, '++');
}, { password: '' });
if (Array.isArray(e)) {
return e;
}
}
return e && e.fileList;
};
render() {
return (
<PageHeaderWrapper title="添加">
<Card bordered={false}>
{this.getFields()}
</Card>
</PageHeaderWrapper>
);
}
}
export default AddPracticalExercises;

复制代码

KevinChen · KevinChen

好的，正在处理您的问题，今天之内给您答复。

lzynfd · lzynfd

KevinChen 发表于 2019-1-14 14:18
好的，正在处理您的问题，今天之内给您答复。

好的

lzynfd · lzynfd

KevinChen 发表于 2019-1-14 14:18
好的，正在处理您的问题，今天之内给您答复。

怎么样了？

KevinChen · KevinChen

您好，请参考API 中关于react的使用方法:

http://help.grapecity.com/spread ... heetswithReact.html

另外，引入的@grapecity/spread-sheets-react 在官网下载的产品包中有源码，位置是：

Spread.Sheets.All.12.0.4\scripts\interop\react

react样例工程位置：

Spread.Sheets.All.12.0.4\samples\ReactSample

lzynfd · lzynfd

KevinChen 发表于 2019-1-15 11:08
您好，请参考API 中关于react的使用方法:

http://help.grapecity.com/spread/SpreadSheets12/webframe.h ...

我知道用法，

const excelIo = new Excel.IO();
excelIo.open(e.file.originFileObj, (s) => {
const sheet = new Spread.Spread.Sheets.Workbook();
sheet.fromJSON(s);
}, (s) => {
// console.log(s, '++');
}, { password: '' });

复制代码

const spreadSheetsConfig = {
backColor: '#fff',
showVerticalScrollbar: true,
showHorizontalScrollbar: true,
tabStripVisible: true,
grayAreaBackColor: '#C0C0C0',
};
const worksheetConfig = {
rowCount: 10,
colCount: 10,
name: 'sheet1',
};
return (
<SpreadSheets {...spreadSheetsConfig} hostStyle={{ width: '100%', height: '400px' }}>
<Worksheet {...worksheetConfig}>
</Worksheet>
</SpreadSheets>
);

复制代码

这里读到文件后，怎样放在表格中？？？

		自动登录	找回密码
密码			立即注册

[已处理] 如何在react 中使用导入导出功能

12 个回复

评分

评分

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章

活字格认证