Skip to main content

pdfjsの依存を消してdomtoimageでPDFのサムネイルを作成するようにした

· 5 min read

CleanShot20220316at210637

上記の様なサムネイルが必要なのですがもともとpdfjsでpdfを画像化していた。 それを @pdfme/ui のデザイナーのdomをdomtoimageで画像化してサムネイルを作成するようにした

pdfjsはサイズも大きいのでdomtoimageを使う様にした。コードはこんな感じ。カスタムフォントを使うのでstyleタグを画像化する直前に追加している。


const cssText = fonts
.map(
(font) => `@font-face {
font-family: ${font.value};
src: url('/fonts/${font.value}.ttf');
}`
)
.join("\n");

const style = { margin: 0 };
// https://github.com/pdfme/pdfme/blob/main/packages/ui/src/components/Paper.tsx#L39
const paperDom = document.getElementById("@pdfme/ui-paper0");

if (!paperDom) {
throw new Error("paperDom is not found");
}

// domtoimageにカスタムフォントを反映させるために、styleタグを追加
// https://github.com/tsayen/dom-to-image/#how-it-works
const styleNode = document.createElement("style");
paperDom.appendChild(styleNode);
styleNode.appendChild(document.createTextNode(cssText));

const photoBlob = await domtoimage.toBlob(paperDom, { style });

paperDom.removeChild(styleNode);

んで、このphotoBlobをサーバーにアップロードしてサムネイル化している

pdfme/uiとの相性がいいなと感じた。多分puppeteerとか使えば、サーバーサイドで動作するので、og imageのサービスとか作れそう。気分が乗ったらやってみたい。


作業記録ログ

本日の作業

labelmake.jp

pdfme

  • ディスカッション返信

    データが無駄に増えているという話

    おそらく getEmbeddedPagesAndEmbedPdfBoxes でboundingBoxes, transformationMatricesを追加しているからか? とりあえず再現確認ができるようにする.

    こんにちわ!

    おそらく getEmbeddedPagesAndEmbedPdfBoxes で設定しているデータが原因でサイズが増えているのだと思います。
    pdfmeはページをtop,leftを起点とした絶対座標でレイアウトします。
    そのため、バウンディングボックスをtop,leftを0で指定しないと場所がずれてしまいます。

    しかし、データが大きくなり過ぎているので指定方法が間違っている可能性があります。

    報告ありがとうございました!
    データが増えない様にする方法があるか調査を行います。

    https://www.antenna.co.jp/pdf/reference/pdf-point.html

  • pdfmeのマーケティング #159
    • バッジの追加
    • npmのキーワード設定
    • アイキャッチ設定
    • dev.toで書いた記事のリライト
    • labelmake.jpのブログで書いた記事のリライト

明日の作業

labelmake.jp

pdfme

pdfmeのマーケティング #159

  • バッジの追加
  • npmのキーワード設定
  • アイキャッチ設定
  • dev.toで書いた記事のリライト
  • labelmake.jpのブログで書いた記事のリライト

日記

今日は妻が一人の時間だったので娘と散歩。

明日は妻が娘を連れて、錦糸町に行くらしい。友達とのランチとのこと。 初めての遠出だけど、少し心配だがまあなんとかなるだろう。

明日は管理画面の作業から作業開始。 pdfmeのマーケティングにも着手したいけど、labelmakeのデータ分析基盤も作りたいので、気分が向いた方から着手していこうと思う。