[]
        
(Showing Draft Content)

PDF:テーブル

PdfDocumentクラスを使用してテーブルを描画することもできます。

それには、PdfPathsオブジェクトのrectメソッドとstrokeメソッドを使用する必要があります。PdfPathsオブジェクトには、PdfDocument.pathsプロパティからアクセスできます。


rectメソッドはいくつかの引数を受け取り、四角形の開始位置のx座標とy座標、描画する四角形の幅と高さなどを指定します。strokeはパラメータなしで呼び出され、四角形のパスの描画を実行します。この2つのメソッドは、次のように連結できます。

doc.paths
    .rect(x, y, colWidth, rowHeight)
    .stroke();

drawTextメソッドを使用して、セル内にテキストを描画したり、テキストの寸法を定義することもできます。行がページ境界を超えた場合は、addPageメソッドを使用して新しいページが追加されます。

このコード例では、50行3列のテーブルを作成します。また、セルの作成時にデータコレクション内のテキストをテーブルのセルに描画します。ページのオーバーフローも考慮します。

let colWidth = 100, 
    rowHeight = 18, 
    data = getData(50), 
    dataKeyMap = ['id', 'product', 'country'], 
    y = 0;

for (let i = 0; i < 50; i++) {
    for (let j = 0; j < dataKeyMap.length; j++) {
        let x = j * colWidth;
        
        doc.paths
            .rect(x, y, colWidth, rowHeight)
            .stroke();
        
        doc.drawText(data[i][dataKeyMap[j]] + '', x + 2, y + 2, {
            height: rowHeight,
            width: colWidth
        });
    }
    
    y += rowHeight;
    
    if (y >= doc.height) {
        y = 0;
        doc.addPage();
    }
}
結果

PDFテーブルページ