nuxt‐pdf‐frame
Narayana Swamy edited this page May 4, 2024
·
2 revisions
nuxt-pdf-frame is a Nuxt 3 module , enabling the rendering of PDF and Canvas graphics within Nuxt applications. This module offers a straightforward Template-based syntax and semantics, streamlining the process of generating and managing graphical content. Utilizing the capabilities of the i2djs framework, nuxt-pdf-frame facilitates the production of graphical outputs in both PDF and Canvas formats.
# Using pnpm
pnpm add @i2d/nuxt-pdf-frame
# Using yarn
yarn add @i2d/nuxt-pdf-frame
# Using npm
npm install @i2d/nuxt-pdf-frame
Add @i2d/nuxt-pdf-frame
module to the nuxt.config.js.
export default defineNuxtConfig({
modules: [
'@i2d/nuxt-pdf-frame'
]
})
<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>
<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>
<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>
For more details on Tags and configurations :