[英]react/javascript how to export table data which is a json into a downloadable excel
I'm using the react-csv plugin to convert the json data to a csv,but this plugin does not work on IE. 我正在使用react-csv插件将json数据转换为csv,但是此插件在IE上不起作用。
Can anyone post any tried and tested way either in react plugin or javascript way wherein I can export my data as excel in all the browsers - IE,Firefox,Safari and Chrome. 任何人都可以通过react插件或javascript方式发布任何经过考验的方式,其中我可以在所有浏览器-IE,Firefox,Safari和Chrome中将数据导出为excel。
You can export data even in Internet explorer by using this library. 您甚至可以使用此库在Internet Explorer中导出数据。
usage of this package is simple, 这个包的用法很简单,
const dataSet1 = [
{
name: "Johson",
amount: 30000,
sex: 'M',
is_married: true
},
{
name: "Monika",
amount: 355000,
sex: 'F',
is_married: false
},
{
name: "John",
amount: 250000,
sex: 'M',
is_married: false
},
{
name: "Josef",
amount: 450500,
sex: 'M',
is_married: true
}
];
and to export this dataSet, 并导出此数据集,
import React from "react"
import * from "react-data-export"
class App extends React.Component {
const dataSet1 = [
{
name: "Johson",
amount: 30000,
sex: 'M',
is_married: true
},
{
name: "Monika",
amount: 355000,
sex: 'F',
is_married: false
},
{
name: "John",
amount: 250000,
sex: 'M',
is_married: false
},
{
name: "Josef",
amount: 450500,
sex: 'M',
is_married: true
}
];
render() {
return (
<ExcelFile>
<ExcelSheet data={dataSet1} name="Employees">
<ExcelColumn label="Name" value="name" />
<ExcelColumn label="Wallet Money" value="amount" />
<ExcelColumn label="Gender" value="sex" />
<ExcelColumn label="Marital Status"
value={(col) => col.is_married ? "Married" : "Single"} />
</ExcelSheet>
</ExcelFile>
);
}
}
let me know if it works for you. 请让我知道这对你有没有用。
import Workbook from 'react-excel-workbook'
const data1 = [
{
foo: '123',
bar: '456',
baz: '789'
},
{
foo: 'abc',
bar: 'dfg',
baz: 'hij'
},
{
foo: 'aaa',
bar: 'bbb',
baz: 'ccc'
}
]
const data2 = [
{
aaa: 1,
bbb: 2,
ccc: 3
},
{
aaa: 4,
bbb: 5,
ccc: 6
}
]
const example = (
<div className="row text-center" style={{marginTop: '100px'}}>
<Workbook filename="example.xlsx" element={<button className="btn btn-lg btn-primary">Try me!</button>}>
<Workbook.Sheet data={data1} name="Sheet A">
<Workbook.Column label="Foo" value="foo"/>
<Workbook.Column label="Bar" value="bar"/>
</Workbook.Sheet>
<Workbook.Sheet data={data2} name="Another sheet">
<Workbook.Column label="Double aaa" value={row => row.aaa * 2}/>
<Workbook.Column label="Cubed ccc " value={row => Math.pow(row.ccc, 3)}/>
</Workbook.Sheet>
</Workbook>
</div>
)
render(example, document.getElementById('app'))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.