javascript - 如何使JSPDF单元格中的文本居中

Question

您好，我正在使用 JSPDF 通过创建单元格手动生成 PDF。

我必须指定单元格的高度，但是当文本的大小大于它时，它就会覆盖单元格。我怎样才能避免这种情况。

这是我的代码:

           var l = {
                    orientation: 'l',
                    unit: 'mm',
                    format: 'a4',
                    compress: true,
                    fontSize: 8,
                    lineHeight: 1,
                    autoSize: false,
                    printHeaders: true
                }, pdf = new jsPDF(l, '', '', ''), i, j, margins = {
                    top: 30,
                    bottom: 10,
                    left: 10,
                    width: 25
                };

                //initializing the cells
                pdf.cellInitialize();

                var lines = pdf.splitTextToSize(' This is large icon to f', 12);
                pdf.cell(margins.left, margins.top, 14, 8, lines, 0);

                pdf.save('Te.pdf');

现在我可以增加单元格的高度，但文本仍然覆盖单元格。

这是它的样子。

谁能帮帮我。我正在使用 JSPDF https://github.com/MrRio/jsPDF

Answer 1

为此您必须使用 JSPDF 吗？

您可以轻松地在 pdfmake 中实现您所需要的内容 ( http://pdfmake.org )。

虽然理念有点不同 - pdfmake 是一个声明性库，它自动计算布局。

基本表定义如下:

var docDefinition = {
  content: [
    {
      table: {
        // header rows are automatically repeated if the table spans over multiple pages
        // you can declare how many rows should be treated as headers
        headerRows: 1,
        widths: [ '*', 'auto', 100, '*' ],

        body: [
          [ 'First', 'Second', 'Third', 'The last one' ],
          [ 'Value 1', 'Value 2', 'Value 3', 'Value 4' ],
          [ { text: 'Bold value', bold: true }, 'Val 2', 'Val 3', 'Val 4' ]
        ]
      }
    }
  ]
};

还支持列/行跨度、不可破坏的行(如果当前页面上没有足够的空间)、自动调整大小、固定大小和星号大小的列。

您可以查看 pdfmake playground 中的表格示例