メインコンテンツまでスキップ

はじめに

yagisan-reportsとは​

yagisan-reportsは、WebブラウザとNode.jsで動作するJavaScript製の帳票エンジンです。

  • HTML、JSX、XAML、Androidに影響を受けた宣言的なXML形式のテンプレートで、Web開発者が読み書きしやすいように意識して設計しています。
  • JIS第四水準漢字（JIS X 0213:2004）、異体字、縦書き、禁則処理、複雑な表組みなど、日本語帳票に必要な機能をサポートしています。
  • 改ページ制御を自動で行うことができ、可変帳票も問題ありません。数百ページ規模の大量ページ出力も高速に処理可能です。
  • npmライブラリとして提供されており、標準的なWeb開発のツールチェインに組み込むことができます。
  • Webブラウザ単体で帳票出力が可能です。帳票サーバーを排除して大幅なコスト削減を図ったり、フロント側の対応だけで帳票機能を追加することができます。

料金​

yagisan-reportsは有償製品ですが、開発やテスト（CI/CD環境を含む）での使用は無償です。

本番運用での運用時のみ、有償契約が必要となります。 契約は**プロダクト単位（または組織単位：エンタープライズ版）**で行うため、サーバー台数やユーザー数に応じた追加費用は一切発生しません。

有償契約の詳細や無償使用（開発者ライセンス）については、次のページをご覧ください。

今すぐ動かしてみる​

yagisan-reportsは 5分以内 で実際に動作する状況を確認いただけます。 インストールやユーザー登録等は一切不要です。

ライブデモ​

https://demo.yagisan.app/ では、現実の帳票を想定したサンプルが多数用意されています。

Webブラウザで動かしてみる​

次のコードをコピーし、HTMLファイル（例えば index.html）として保存します。 このHTMLファイルをWebブラウザで開いてボタンをクリックすると、帳票PDFが出力されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/@yagisan-reports/sdk@1.0.1/umd.js" defer></script>
<script type="module">
YagisanReports.globalOptions.workerUrl = 'https://cdn.jsdelivr.net/npm/@yagisan-reports/sdk@1.0.1/reportworker.js';
YagisanReports.globalOptions.fontUrl = 'https://cdn.jsdelivr.net/npm/@yagisan-reports/sdk@1.0.1/';

const buttonEl = document.getElementById('generateButton');
buttonEl.addEventListener('click', async ev => {
    buttonEl.disabled = true;

    // 帳票テンプレートファイルのダウンロード
    const yrtUrl = 'https://www.yagisan.app/samples/1.0/hello.yrt';
    const yrt = await fetch(yrtUrl).then(res => res.arrayBuffer());

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

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

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

    // 帳票エンジンの破棄
    generator.dispose();
    template.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>