将反应表导出为 csv

Question

大家好，我正在尝试将我的 atlassian 动态反应表导出为 csv 文件，但我在文件中获取的表格并不像我预期的那样......我尝试使用 react-csv 库，但我越来越。我的动态表在我的浏览器 上看起来像这样。列在 {shareFilterHead} 中，行在 {shareFilterRows} 中。有没有其他方法可以在 React 中将此表下载为 csv 文件？

import React, {Component} from "react";
import DynamicTable from '@atlaskit/dynamic-table';
import styled from 'styled-components';
import { CSVLink, CSVDownload } from "react-csv";
export const createHead = (withWidth) => {
return {
  cells: [
    {
  
      key: 'filterID',
      content: 'Filter ID',
      isSortable: true,
      width: withWidth ? 25 : undefined,
  fontSize: 30,
    },
    {
      key: 'author',
      content: 'Author',
      shouldTruncate: true,
      isSortable: true,
      width: withWidth ? 25 : undefined,
  fontSize: 30,
    },
    {
      key: 'filtername',
      content: 'Filter Name',
      shouldTruncate: true,
      isSortable: true,
      width: withWidth ? 25 : undefined,
  fontSize: 30,
    },
    {
      key: 'jql',
      content: 'JQL',
      shouldTruncate: true,
  isSortable: true,
  width: withWidth ? 25 : undefined,
  fontSize: 30,
    },
  ],
   };
 };

export const shareFilterHead = createHead(true);

export default class ShareFilter extends Component {

constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      shareFilterRows: []
    };
  }

componentDidMount() {
    fetch(AJS.contextPath() + "/rest/securityrestresource/1.0/results?check=ShareFilter")
    .then((res)=>{
        if(res.ok) {
            return res.json();
        }
    }).then((res)=>{
  this.setState({
    isLoaded: true,
    shareFilterRows: res.map((row, index) => ({
      key: `row-${index}-${row.filterID}`,
      cells: [{
        key: `${row.filterID}`,
        content: row.filterID,
        },
        {
        key: `${row.author}`,
        content: row.author,
        },
        {
        key: `${row.filtername}`,
        content: row.filtername,
        },
        {
        key: `${row.jql}`,
        content: row.jql,
        },]}))
  })
  })
  }

render() {
const { error, isLoaded, shareFilterRows } = this.state;
if (error) {
  return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
  return <div>Loading Shared Filters...</div>;
} else {
  return ( 
  <Wrapper>
    <div>
    <DynamicTable
      head={shareFilterHead}
      rows={shareFilterRows}
      rowsPerPage={10}
      defaultPage={1}
      loadingSpinnerSize="large"
      isLoading={false}
      isFixedSize
      defaultSortKey="filterID"
      defaultSortOrder="ASC"
      onSort={() => console.log('onSort')}
      onSetPage={() => console.log('onSetPage')}
      />
      <CSVDownload data={shareFilterRows} target="_blank" />;
  </div>

  </Wrapper>

  
  );
  }
}

}

Answer 1

我也面临同样的问题。如果您解决了问题，请与我分享您的知识