クイックスタート

ライブデモ

ライブデモ では、現実の帳票を想定したサンプルが多数用意されています。インストールやユーザー登録等は一切不要で使用いただけます。

とりあえず動かしてみる

CDNのyagisan-reportsを使用すると、インストールやビルドが不要ですぐに始められます。帳票出力処理はWebブラウザ単体で動作するため、帳票サーバーを構築する必要もありません。

yagisan-reportsを使った帳票開発は、大きく分けて2ステップとなります。

  • 帳票テンプレートの作成

  • yagisan-reportsの組み込み

本手順ではサンプルの帳票テンプレートを使用して、テンプレート作成を省略します。

参考までに、サンプルの帳票テンプレートは、次のようなXMLとなっています（実際にはこのXMLを 帳票テンプレートの作成 の手順に従って変換する必要があります）。

<LayoutXml>
  <LinearLayout size="A4" orientation="vertical">
    <LayoutBody>
      <Text size="30">${message}</Text>
      <Spacer height="30" />
      <Text size="12">このPDFはyagisan-reportsによって作成されました</Text>
    </LayoutBody>
  </LinearLayout>
</LayoutXml>

次のコードをコピーし、HTMLファイル（例えば index.html）として保存します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/yagisan-reports@latest/umd.js" defer></script>
<script type="module">
const buttonEl = document.getElementById('generateButton');

// CDN版を使う場合は依存モジュールのURL設定が必要です
YagisanReports.globalOptions.workerUrl = 'https://cdn.jsdelivr.net/npm/yagisan-reports@latest/reportworker.js';
YagisanReports.globalOptions.fontUrl = 'https://cdn.jsdelivr.net/npm/yagisan-reports@latest/';

buttonEl.addEventListener('click', async ev => {
    buttonEl.disabled = true;

    // 帳票テンプレートファイルのダウンロード
    const yrtUrl = 'https://preview.yagisan-reports-docs.pages.dev/developer-guide/v1.0/_attachments/quickstart/sample.yrt';
    const yrt = await fetch(yrtUrl).then(res => res.arrayBuffer());

    // 帳票エンジンのセットアップ
    const engine = YagisanReports.createEngine();
    const tempalte = await engine.loadTemplate(yrt);
    const generator = await tempalte.createPdfReportGenerator();

    // 帳票の生成
    const report = await generator.generate({
        message: 'hello!\nyagisan-reports!!'
    });
    const pdf = await report.getContent();

    // 生成したPDFのダウンロード
    download('hello.pdf', pdf);

    // 帳票エンジンの破棄
    generator.dispose();
    tempalte.dispose();
    engine.dispose();

    buttonEl.disabled = false;
});

function download(filename, buff) {
    const blob = new Blob([buff], {type: 'application/pdf'});
    const blobUrl = URL.createObjectURL(blob);

    const anchor = document.createElement('a');
    anchor.download = filename;
    anchor.href = blobUrl;

    document.body.appendChild(anchor);
    anchor.click();

    anchor.remove();
    URL.revokeObjectURL(blobUrl);
}
</script>
</head>
<body>
<button id="generateButton">帳票を生成して保存</button>
</body>
</html>

以上で完成です。このHTMLファイルをWebブラウザで開いて、ボタンをクリックすると帳票出力が行われます。

本格的に開発を行いたい場合は、次のページの解説を参照してください。