Question

我正在使用pdfkit生成pdf文件，我想将此pdf文件发送到浏览器。
我的下面的代码工作正常，我得到一个带文本的pdf。
实际上下面的代码是在nodejs中使用pdfkit生成pdf的示例，但现在我想创建html表。

最新代码

var PDFDocument = require('pdfkit');
var fs=require('fs');
doc = new PDFDocument();
doc.pipe( fs.createWriteStream('out.pdf') );
doc.moveTo(300, 75)
   .lineTo(373, 301)
   .lineTo(181, 161)
   .lineTo(419, 161)
   .lineTo(227, 301)
   .fill('red', 'even-odd');  

var loremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in...';  

doc.y = 320;
doc.fillColor('black')
doc.text(loremIpsum, {
   paragraphGap: 10,
   indent: 20,
   align: 'justify',
   columns: 2
});
doc.pipe( res );
doc.end();

但我不知道如何使用pdfkit生成pdf格式的HTML表格？
任何人都可以帮我创建HTML表格pdf吗？

Answer 1

function example(){    
var doc = new PDFDocument();

var writeStream = fs.createWriteStream('filename.pdf');
doc.pipe(writeStream);
//line to the middle
doc.lineCap('butt')
  .moveTo(270, 90)
  .lineTo(270, 230)
  .stroke()

row(doc, 90);
row(doc, 110);
row(doc, 130);
row(doc, 150);
row(doc, 170);
row(doc, 190);
row(doc, 210);

textInRowFirst(doc, 'Nombre o razón social', 100);
textInRowFirst(doc, 'RUT', 120);
textInRowFirst(doc, 'Dirección', 140);
textInRowFirst(doc, 'Comuna', 160);
textInRowFirst(doc, 'Ciudad', 180);
textInRowFirst(doc, 'Telefono', 200);
textInRowFirst(doc, 'e-mail', 220);
doc.end();

writeStream.on('finish', function () {
  // do stuff with the PDF file
  return res.status(200).json({
    ok: "ok"
  });

});
}

function textInRowFirst(doc, text, heigth) {
  doc.y = heigth;
  doc.x = 30;
  doc.fillColor('black')
  doc.text(text, {
    paragraphGap: 5,
    indent: 5,
    align: 'justify',
    columns: 1,
  });
  return doc
}


function row(doc, heigth) {
  doc.lineJoin('miter')
    .rect(30, heigth, 500, 20)
    .stroke()
  return doc
}

Click show image result

Answer 2

那么用PDFKit直接做到这一点并不容易。您必须自己实现表呈现逻辑。如果你想简单地做，你只需要意识到表只是一堆带有文本的矩形。这将适用于一次性代码。但它不会灵活。

如果您不介意偏离PDFKit，可以选择以下几种方法：

有一个fork的PDFKit，它有表格支持。这里应该使用example。
有pdfmake基于PDFKit构建并支持表格。与PDFKit不同，Pdfmake支持声明性语法。

当你提到HTML时，我真的建议你在使用HTML并使用phantomjs或wkhtmltopdf时将PDFkit抛出门外，他们的工作是呈现HTML并可选择输出PDF和那些＆＃39; s你想要什么。上次我正在寻找能够很好地处理这个问题的模块时，我找到了phantom-html-to-pdf。

Answer 3

这对我有用：

artikelList.map(artikel => {
  let yPos = doc.y;
  doc
    .fontSize(8)
    .text(artikel.titel, (x = 50), (y = yPos))
    .text(artikel.menge, (x = 200), (y = yPos))
    .text(`${artikel.spOhne.toFixed(2)}€`, (x = 250), (y = yPos))
    .text(`${(artikel.USt / 100).toFixed(2)}%`, (x = 350), (y = yPos))
    .text(
      `${(artikel.spOhne * (1 + artikel.USt / 100)).toFixed(2)}€`,
      (x = 400),
      (y = yPos)
    )
    .text(
      `${(artikel.menge * artikel.spOhne * (1 + artikel.USt / 100)).toFixed(
        2
      )}€`,
      (x = 475),
      (y = yPos),
      { align: 'right' }
    );
});

从字面上看，只是固定y位置，然后移动x位置。我想添加rec和stroke可以很容易地在其周围画线。

产生看起来像这样的东西

pdfkit中的HTML表（Expressjs-Nodejs）

最新代码

3 个答案: