www.pdf-frame.org

nuxt-pdf-frame

Nuxt-PDF-Frame は、Nuxt アプリケーション内で PDF および Canvas グラフィックのレンダリングを可能にするように設計された Nuxt モジュールです。シンプルでテンプレートベースの構文とセマンティクスを提供し、グラフィックコンテンツの作成と管理を簡素化します。i2djs フレームワークを活用することで、PDF-Frame-Nuxt は PDF と Canvas の両方の形式でグラフィック出力を生成できます。

機能

宣言型構文：明確で宣言的な構文を使用して、PDF/Canvas グラフィックコンテンツを簡単に定義します。
SVG に似た構文とセマンティクス：幾何学的形状の定義に、使い慣れた SVG タグと属性構文を採用しています。
一貫性のあるレンダリング：PDF と Canvas の両方の出力のレンダリングに、同じ構文とセマンティクスを提供します。
自動ページネーション：コンテンツのオーバーフローは、新しいページを生成することでエンジンが処理し、ドキュメントの整合性と可読性を確保します。
複数ページのサポート：複数ページの PDF ドキュメントをシームレスに作成できます。
アニメーションとイベント：Canvas コンテキストで要素のアニメーションとイベントを簡単に定義できます。
Nuxt 3 と互換性のあるモジュールです。

ドキュメント

Nuxt-PDF-frame

プレイグラウンド

例を Stackblitz で試してみてください。

クイックセットアップ

インストール

# Using pnpm
pnpm add @i2d/nuxt-pdf-frame

# Using yarn
yarn add @i2d/nuxt-pdf-frame

# Using npm
npm install @i2d/nuxt-pdf-frame

統合

@i2d/nuxt-pdf-frame モジュールを `nuxt.config.js` に追加します。

export default defineNuxtConfig({
  modules: [
    '@i2d/nuxt-pdf-frame'
  ]
})

使用方法

Canvas テンプレート

<pdfFrame type="canvas" width="595" height="841">
  <i-g :transform="{ translate: [100, 200], scale: [2, 3], rotate: [ 45, 0, 0] }">
    <i-text :x="30" :y="60" :text="'Page 1 Title'" :width="530" :style="{font: '25px Arial', align: 'center'}"></i-text>
    <i-rect :x="30" :y="100" :width="535" :height="700" :style="{ fillStyle:'#f0f0f0' }"></i-rect>
    <i-image src="src/assets/i2d-frame.svg" :width="200" :x="175" :y="100"></i-image>
  </i-g>
</pdfFrame>

PDF 基本テンプレート

<pdfFrame type="pdf" width="595" height="841">
  <i-g :transform="{ translate: [100, 200], scale: [2, 3], rotate: [ 45, 0, 0] }">
    <i-text :x="30" :y="60" :text="'Page 1 Title'" :width="530" :style="{font: '25px Arial', align: 'center'}"></i-text>
    <i-rect :x="30" :y="100" :width="535" :height="700" :style="{ fillStyle:'#f0f0f0' }"></i-rect>
    <i-image src="src/assets/i2d-frame.svg" :width="200" :x="175" :y="100"></i-image>
  </i-g>
</pdfFrame>

PDF 複数ページテンプレート

<pdfFrame type="pdf" width="595" height="841">
    <!-- Page Templates -->
    <i-page-template id="temp-1">
        <i-rect :x="0" :y="0" :width="595" :height="841" :style="{ fillStyle:'#ffffff' }"></i-rect>
        <i-text :x="30" :y="30" :text="'Header Text'" :width="530" :style="{font: '15px Arial'}"></i-text>
        <i-text :x="30" :y="810" :text="'Footer Text'" :width="530" :style="{font: '15px Arial'}"></i-text>
    </i-page-template>
    <!-- Page 1 -->
    <i-page p-template="temp-1">
      <i-g :transform="{ translate: [100, 200], scale: [2, 3], rotate: [ 45, 0, 0] }">
          <i-text :x="30" :y="60" :text="'Page 1 Title'" :width="530" :style="{font: '25px Arial', align: 'center'}"></i-text>
          <i-rect :x="30" :y="100" :width="535" :height="700" :style="{ fillStyle:'#f0f0f0' }"></i-rect>
      </i-g>
    </i-page>
    
    <!-- Page 2 -->
    <i-page p-template="temp-1">
        <i-text :x="30" :y="60" :text="'Page 2 Title'" :width="530" :style="{font: '25px Arial', align: 'center'}"></i-text>
        <i-image src="src/assets/i2d-frame.svg" :width="200" :x="175" :y="100"></i-image>
    </i-page> 
</pdfFrame>

ライセンス

このプロジェクトは MIT ライセンスの下でライセンスされています。詳細は LICENSE ファイルをご覧ください。

互換性

Nuxt-Pdf-Frame は Nuxt 3 クライアント専用のモジュールです。