JSPDF自动行距修复

时间:2018-09-25 05:20:31

标签: javascript reactjs jspdf jspdf-autotable

我一直在使用Jspdf和Jspdf-autotable插件生成PDF。检查我用来制作自定义pdf的代码-

import React, { Component } from 'react';
import jsPDF from "jspdf";
import autotable from "jspdf-autotable";
var getColumns = function () {
  return [
    { title: "Student", dataKey: "studentName" },
    { title: "Gender", dataKey: "studentGender" },
    { title: "Mother Name", dataKey: "motherName" },
    { title: "Father Name", dataKey: "fatherName" }
  ]
};
var getData = function () {
  return rows
};
var rows;
class FeaturePage extends Component {
  constructor() {
    super();
    this.exportpdf = this.exportpdf.bind(this);
    this.state = {
      sales: [
        {
          "studentId": "100122000116",
          "name": "hasan",
          "customStudentId": "1510020",
          "studentName": "Tasnim Tabassum",
          "studentGender": "Female",
          "studentDOB": "2012-07-27",
          "studentReligion": "Islam",
          "motherName": "Sb",
          "fatherName": "Md. Mamunar Rashid"
        },
        {
          "studentId": "100122000116",
          "name": "hasan",
          "customStudentId": "1510020",
          "studentName": "Star",
          "studentGender": "Female",
          "studentDOB": "2012-07-27",
          "studentReligion": "Islam",
          "motherName": "Sd",
          "fatherName": "Md. Mamunar Rashid"
        },
        {
          "studentId": "100122000116",
          "name": "arif",
          "customStudentId": "1510020",
          "studentName": "Tasnim Tabassum",
          "studentGender": "Female",
          "studentDOB": "2012-07-27",
          "studentReligion": "Islam",
          "motherName": "safd",
          "fatherName": "Md. Mamunar Rashid"

        },
        {
          "studentId": "100122000216",
          "name": "arif",
          "customStudentId": "1510000",
          "studentName": "Star2",
          "studentGender": "Female",
          "studentDOB": "2012-06-30",
          "studentReligion": "Islam",
          "motherName": "Mst. Fawalia Akter",
          "fatherName": "Md. Azaharul Islam"

        }
      ]
    };
  }
  exportpdf() {
    var doc = new jsPDF('p', 'pt');
    doc.autoTable(getColumns(), getData(), {
      theme: 'grid',
      startY: 60,
      drawRow: function (row, data) {
        if (data.row.raw.name) {
          doc.autoTableText(data.row.raw.name, data.settings.margin.left + data.table.width / 2, row.y + row.height / 2, {
            halign: 'center',
            valign: 'middle'
          }
          );
          data.cursor.y += 20;
        }
      },
    });
    doc.save('Student List.pdf');
  }
  render() {
    rows = this.state.sales;
    return (
      <div>
        <button onClick={this.exportpdf} className="exportPDF">Export to PDF</button>
      </div>
    );
  }
}
export default FeaturePage; 

它正在生成此pdf Generated Pdf

但是我想产生这样的东西 Expected Pdf

我该怎么做。我已经尝试了我在文档中阅读的所有内容,但是仍然无法按照我想要的方式工作。

0 个答案:

没有答案