如何使文本在 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中的表格示例

Answer 2

我也遇到了同样的问题。

但是如果你看一下 jspdf.plugin.cell.js，它实际上是在绘制一个包含文本的矩形。换句话说，单元格本身就是一个矩形。

内部 jsPDFAPI.cell()函数， this.text(txt, x + 3, y + h - 3);, 此行实际上控制文本将出现在每个单元格侧面的位置。

你可以这样做： this.text(txt, x + 3, y + h/2 - 3);，则文本将在单元格中居中。

希望这会有所帮助。