はじめに
「PDFKit」とはノードとブラウザ用のJavaScript PDF生成ライブラリです。
当ページは上記ライブラリのコード、メモ、スニペット共有ページです。
PDFKit公式ページ
用紙サイズ
width, heightとしていくつまで利用可能なのか?
用紙 | 横サイズ | 縦サイズ |
---|---|---|
A4 | 595.28 | 841.89 |
A5 | 419.53 | 595.28 |
A6 | 297.64 | 419.53 |
B3 | 1000.63 | 1417.32 |
B4 | 708.66 | 1000.63 |
B5 | 498.90 | 708.66 |
B6 | 354.33 | 498.90 |
LEGAL | 612.00 | 1008.00 |
LETTER | 612.00 | 792.00 |
#PDFファイルのメタデータ
メタデータの名称と、対応するPDFファイルのプロパティを図示
サンプルコード
// the title of the document
pdf.info.Title = '★タイトル★'
// the name of the author
pdf.info.Author = '★作成者★'
// the subject of the document
pdf.info.Subject = '★タイトル★'
// keywords associated with the document
pdf.info.Keywords = '★キーワード1★\n◆キーワード2◆\n□キーワード3□'
// the date the document was created (added automatically by PDFKit)
// pdf.info.CreationDate = null
// the date the document was last modified
pdf.info.ModDate = new Date(2000, 10, 12)
![metadata.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F133854%2F327cf01c-87a9-f2ed-1eae-b62bda5e6a78.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=65b5539551d8e5bc23f8cca098756285)
図形の描画
破線と実線で円を描画する意図で記述したコードですが
想定外の結果だったのでその際のコードと結果を図示
X座標:100,Y座標:50,半径:50の円
X座標:200,Y座標:200,半径:50の円
pdf.text('X座標:100,Y座標:50,半径:50の円', 100, 50)
pdf.circle(100, 50, 50)
.dash(5, { space: 10 })
.stroke()
pdf.text('X座標:200,Y座標:200,半径:50の円', 200, 200)
pdf.circle(200, 200, 50)
.stroke()
![circle.falult.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F133854%2F2450c63d-391d-7162-1444-4a43237fccb8.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8c9b3c08d545dd3e0496986931812fc5)
破線解除するにはundash()をコールする
pdf.text('X座標:100,Y座標:50,半径:50の円', 100, 50)
pdf.circle(100, 50, 50)
.dash(5, { space: 10 })
.stroke()
.undash() // 破線解除!
pdf.text('X座標:200,Y座標:200,半径:50の円', 200, 200)
pdf.circle(200, 200, 50)
.stroke()
![circle.success.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F133854%2F8dc71cbc-bfa2-1ae7-ff1b-3cc706b1d51b.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=dfaca4248f79c7c98bf57fde8fd72ba1)
切り取り線の描画
ハサミアイコン付きの切り取り線を描画するサンプルコード
function drawCutLine (x, y) {
pdf.save()
// ハサミの左側の破線を描画
pdf.moveTo(x, y)
.strokeColor('black')
.strokeOpacity(0.5)
.lineWidth(2)
.lineTo(x + 30, y)
.dash(6, { space: 3 })
.stroke()
.undash()
// SVG形式のハサミのデータを丁度いい位置、角度、縮尺で描画
pdf.translate(x + 30, y + 10).rotate(270).scale(0.05).path('M333.381,288.65c-10.341-18.002-26.8-31.189-45.187-36.209c-12.502-3.417-25.202-2.774-36.251,1.724l-32.414-56.704\
c28.806-52.881,71.47-131.12,76.855-140.53c13.169-23.019-8.448-48.576-9.373-49.645L280.731,0l-87.042,152.248L106.64,0.012\
l-6.278,7.287c-0.934,1.068-22.548,26.625-9.382,49.647c5.38,9.4,48.053,87.64,76.861,140.527l-32.417,56.703\
c-11.058-4.497-23.749-5.14-36.26-1.724c-18.381,5.014-34.846,18.207-45.177,36.215c-19.413,33.934-11.586,75.061,17.438,91.664\
c8.104,4.665,17.087,7.031,26.697,7.031c5.278,0,10.761-0.414,15.976-2.191c31.114-10.587,47.05-36.023,54.683-62.132\
c0.327-1.123,15.678-63.327,24.25-76.88c0,0,0.265-0.486,0.658-1.213c0.39,0.727,0.661,1.213,0.661,1.213\
c8.571,13.553,23.92,75.757,24.25,76.88c7.62,26.108,23.569,51.551,54.68,62.132c5.212,1.777,10.694,2.191,15.973,2.191\
c9.614,0,18.591-2.366,26.704-7.031C344.964,363.71,352.783,322.59,333.381,288.65z M134.157,334.575\
c-6.446,11.247-16.792,19.737-27.634,22.686c-2.853,0.769-5.663,1.159-8.355,1.159c-4.501,0-8.653-1.093-12.328-3.2\
c-15.183-8.671-18.209-32.102-6.722-52.194c6.542-11.396,16.621-19.653,27.616-22.649c7.506-2.03,14.775-1.382,20.726,2.018\
C142.63,291.094,145.635,314.507,134.157,334.575z M301.52,355.22c-3.682,2.113-7.824,3.206-12.328,3.206\
c-2.69,0-5.507-0.396-8.353-1.165c-10.845-2.942-21.191-11.433-27.634-22.68c-11.481-20.074-8.474-43.48,6.688-52.164\
c5.957-3.404,13.223-4.059,20.729-2.018c11.001,2.984,21.077,11.241,27.616,22.645C319.726,323.13,316.706,346.549,301.52,355.22z')
.fill('black')
.stroke()
pdf.restore()
}
for (let i = 0; i < 8; i++) {
drawCutLine(i * 50, 300)
}
![cut_line.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F133854%2F1450b528-49b5-54d3-bb12-9cfc6742d840.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=3a52bb68180f568f1424b1f8aeae4037)