在 React-Table 中导出为 PDF

Posted 2023-02-19

【中文标题】在 React-Table 中导出为 PDF

【英文标题】：Export to PDF in React-Table

【发布时间】：2019-11-07 04:16:24

【问题描述】：

我在 react-table 中有 10 行值。我需要转换为 PDF 格式吗？.ss 可以转换吗？

【参考方案1】：

使用jsPDF 和jspdf-autotable 来完成此操作。查看下面的代码：

import React from 'react';
import jsPDF from "jspdf";
import "jspdf-autotable";
import './App.css';

class App extends React.Component 

  constructor() 
    super();
    this.state = 
      people: [
         name: "Keanu Reeves", profession: "Actor" ,
         name: "Lionel Messi", profession: "Football Player" ,
         name: "Cristiano Ronaldo", profession: "Football Player" ,
         name: "Jack Nicklaus", profession: "Golf Player" ,
      ]
    
  

  exportPDF = () => 
    const unit = "pt";
    const size = "A4"; // Use A1, A2, A3 or A4
    const orientation = "portrait"; // portrait or landscape

    const marginLeft = 40;
    const doc = new jsPDF(orientation, unit, size);

    doc.setFontSize(15);

    const title = "My Awesome Report";
    const headers = [["NAME", "PROFESSION"]];

    const data = this.state.people.map(elt=> [elt.name, elt.profession]);

    let content = 
      startY: 50,
      head: headers,
      body: data
    ;

    doc.text(title, marginLeft, 40);
    doc.autoTable(content);
    doc.save("report.pdf")
  

  render() 
    return (
      <div>
        <button onClick=() => this.exportPDF()>Generate Report</button>
      </div>
    );
  


export default App;

这应该会生成一个像这样的 PDF：

希望这会有所帮助。

【讨论】：

非常感谢

很高兴听到 ;)

收到此错误“错误：需要模块“node_modules\jspdf\dist\jspdf.es.min.js”，引发异常：TypeError: undefined is not an object (evalating 'r.atob .bind')" 请帮助@lomse

你安装了jspdf模块吗？如果不是简单地使用命令 npm install jspdf 安装它