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 文档。
动画和事件：在画布上下文中轻松定义元素的动画和事件。
兼容 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'
  ]
})

用法

画布模板

<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 客户端模块。