react / javascript如何将表json的表数据导出为可下载的excel

时间:2017-08-18 12:41:41

标签: javascript json reactjs

我使用react-csv插件将json数据转换为csv,但此插件在IE上不起作用。

任何人都可以使用react插件或javascript方式发布任何经过测试和测试的方式,其中我可以在所有浏览器中将我的数据导出为ex​​cel - IE,Firefox,Safari和Chrome。

2 个答案:

答案 0 :(得分:0)

您甚至可以使用此库在Internet Explorer中导出数据。

compodoc

这个包的用法很简单,

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
    }
];

并导出此数据集,

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>
    );
  }
}

让我知道它是否适合你。

答案 1 :(得分:0)

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'))