www.pdf-frame.org

nuxt-pdf-frame

Nuxt-PDF-Frame 是一個 Nuxt 模組，旨在啟用 Nuxt 應用程式中 PDF 和 Canvas 圖形的渲染。它提供了一個簡單的、基於範本的語法和語意，以簡化圖形內容的建立和管理。透過利用 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 客戶端模組。