js导出文件打印

导出 excel

1.安装 js-export-excel

安装node更新yarn

npm install js-export-excel   
or
yarn add js-export-excel

2.上代码

import React, { Component } from 'react';
import ExportJsonExcel from 'js-export-excel';
import { Button } from 'antd';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [
        { title: 'ID' },
        { title: '名字' },
        { title: '年龄' },
      ],
      data: [
        {
          id: 123,
          name: 'Tom',
          age: 18
        },
        {
          id: 456,
          name: 'alex',
          age: 20
        },
      ]
    }
  }
  componentDidMount() {
    document.title = '导出文件'  //页面title
  }
  downloadExcel = () => {
    const { data, columns } = this.state;//表格数据
    let option = {};
    option.fileName = '文件名称'
    option.datas = [
      {
        sheetData: data, // 数据
        sheetName: 'sheet', // sheet名字
        sheetFilter: [], //列过滤  只有在 data 为 object 下起作用(可有可无)
        sheetHeader: columns.map(i => i.title), // 第一行
        columnWidths: columns.map(i => 10) //列宽
      }
    ];
    var toExcel = new ExportJsonExcel(option);
    toExcel.saveExcel();
  }
  render() {
    return (
      <div>
        <Button type="primary" onClick={this.downloadExcel}>导出Excel表格</Button>
      </div>
    );
  }
}

export default App;

3.组件版本

待更新

Print打印

npm包 原文

npm install -s react-to-print
or
yarn add react-to-print -s

import ReactToPrint from 'react-to-print';

//触发按钮
<ReactToPrint
    trigger={() => <a href="#">点此打印</a>}
    content={() => this.ref}
/>
//打印内容
<div ref={el => (this.ref = el)}>
     ....内容
<div/>

注意：trigger 返回的组件上添加onClick属性是不会触发事件的。所以需要打印的内容先添加到ref中，再点击“打印”才能在浏览器的打印预览中看到内容。想要点击之后再将指定内容塞到div中，是得不到预期结果

参数

带？是可选参数