Zenn
🐙

yagisan-reports触ってみた

2024/05/18に公開
yagisanreports
tech

環境

  • Mac Sonoma 14.5
  • node.js v21.7.2

参考

クライアント（Webブラウザ）でPDF生成

開発ガイドのクイックスタートからHTMLをコピペしてローカルに保存(index.html)

保存したディレクトリでhttp serverを起動します。

# ポート番号はお好みで
python3 -m http.server 8000

http://localhost:8000/ にアクセス

「帳票を生成して保存」ボタンを押下します。
PDFが生成されました。

帳票テンプレートファイルをローカルから読み込む

クイックスタートのコードはサーバー上のサンプルテンプレートファイルを読み込んでいるので、これをローカルに保存したテンプレートファイルを読み込むように修正してみます。

帳票テンプレート作成

帳票テンプレートの作成の手順をもとに作成します。

帳票テンプレートXMLを作成して、先ほどindex.htmlを保存したディレクトリに保存します。

<LayoutXml>
  <LinearLayout size="A4" orientation="vertical">
    <LayoutBody>
      <Text size="30">${message}</Text>
      <Spacer height="30" />
      <Text size="12">このPDFはyagisan-reportsによって作成されました</Text>
      <Grid rows="auto auto" cols="20 20" borderThickness="0.5">
        <GridCell><Text>Cell1</Text></GridCell>
        <GridCell row="1" col="0"><Text>Cell2</Text></GridCell>
        <GridCell row="0" col="1"><Text>Cell3</Text></GridCell>
        <GridCell row="1" col="1"><Text>Cell4</Text></GridCell>
      </Grid>
    </LayoutBody>
  </LinearLayout>
</LayoutXml>

devtoolをインストールします。

npm install https://github.com/DenkiYagi/yagisan-reports-devtool

以下のコマンドを実行して、xml -> yrtファイルに変換します。

npx yagisan yrt pack sample.xml

// 帳票テンプレートファイルのダウンロード
const yrtUrl = '/sample.yrt';
const yrt = await fetch(yrtUrl).then(res => res.arrayBuffer());

ページを更新して再度「帳票を生成して保存」ボタンを押下します。
ローカルのテンプレートを使ってPDF生成ができました。

Discussion