Mastering PDF-Frame-Vue: A Guide to Advanced PDF Creation in Vue.js

Ever wondered how to generate PDF and graphics content in HTML without writing any code? Forget graphics coding, say hello to PDF-Frame-vue.

Showcase:WWW.pdf-frame.org (www.pdf-frame-showcase.vercel.app)

Github Repo:https://github.com/I2Djs/pdf-frame

NPM: pdf-frame-vue

Nuxt: https://nuxt.com/modules/nuxt-pdf-frame

PDF-Frame-Vue

PDF-Frame-Vue is a cutting-edge vue.js component designed for rendering PDF and Canvas graphics effortlessly on the web. This component boasts an intuitive HTML-based syntax and semantics that simplifies the creation and management of graphical content. Leveraging the i2djs framework, PDF-Frame-Vue currently supports rendering outputs in both PDF and Canvas formats.

Features

Declarative Syntax: Easily define PDF/Canvas graphical content using a clear and declarative syntax.
SVG-like Syntax and Semantics: Adopts the familiar SVG tag and attribute syntax for defining geometrical shapes.
Consistent Rendering: Provides the same syntax and semantics for rendering both PDF and Canvas outputs.
Auto Pagination: This functionality ensures that when content exceeds the current page's capacity, it automatically continues onto a new page, maintaining the document's layout and readability.
Multi-page Support: Create multi-page PDF documents seamlessly.
Animations & Events: Easy way to define the animations and events on elements in canvas context.

Sample PDF-Frame template

<pdfFrame 
    type="pdf" 
    :width="595" 
    :height="841" 
    :config="object" 
    :info="infoObj" 
    :encryption="encryptionObj">
    <!-- Page Templates -->
    <i-page-template id="temp-1">
        <i-rect :x="0" :y="0" :width="595" :height="841" :style="{ fill:'#ff0000' }"></i-rect>
    </i-page-template>
    <!-- Page 1 -->
    <i-page p-template="temp-1">
        <i-rect :x="30" :y="100" :width="535" :height="700" :style="{ fill:'#f0f0f0' }"></i-rect>
        <i-text :x="30" :y="60" :text="'Page 1 Title'" :width="530" :style="{font: '25px Arial', align: 'center'}"></i-text>
    </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>

Harnessing Vue’s capabilities:

PDF-Frame-Vue utilizes Vue.js’ custom renderer approach, tapping into the framework’s templating engine, reactivity system, and component architecture.

Template Engine:

Declarative Syntax: pdf-frame-vue templates use HTML-like syntax, allowing developers to express complex rendering logic in a simple and readable way.
Dynamic Content: Through directives, expressions, and bindings, pdf-frame-vue templates can render content based on dynamic data. With pdf-frame, this means the ability to create dynamic PDF content.
Component architecture: self-contained, reusable pieces of code that can be used to create complex UIs.

Reactivity:

With Vue’s reactivity system, any changes in data are automatically reflected in the pdf/Canvas.

Automatic Updates: If the data used to generate the PDF changes, the PDF will be automatically updated to reflect those changes. Reactivity in PDF Rendering: This reactivity extends to the PDF content itself, enabling real-time updates of the PDF as the underlying Vue data changes.

Easy Integrations:

Seamless Integration: pdf-frame-vue can be integrated directly within a Vue application, meaning developers can define and manipulate PDF content just as they would any other Vue component.
Broad Accessibility: By integrating pdf-frame-vue, developers can leverage their existing knowledge of Vue and its ecosystem, making it a highly accessible tool for anyone familiar with Vue development.

Experience the synergy of Vue.js and PDF-Frame-Vue for a seamless and powerful approach to PDF and Canvas rendering in web applications.

Installation

npm install @i2d/pdf-frame-vue

Github: https://github.com/I2Djs/pdf-frame

npm: https://www.npmjs.com/package/@i2d/pdf-frame-vue

Integration

Register the pdf-frame-vue component into your application as shown below. Add the following code in the vue entry file: main.js

import pdfFrame from "@i2d/pdf-frame-vue";

createApp(App).component("pdfFrame", pdfFrame)

PDF Capability

PDF-frame provides a wide range of geometrical primitives, similar to SVG, and a set of abstract tags like i-page, i-page-template.. etc for easily defining PDF's graphical content. Below is a sample PDF-frame template for PDF rendering.

Tags such as <i-page> and <i-template> are specifically designed and applicable only within the context of PDFs.

PDF Template:

PDF Basic Template:

<pdfFrame 
    type="pdf" 
    :config="object" 
    :info="infoObj"
    :encryption="encryptionObj">
    <i-page>
        <i-text :x="30" :y="60" :text="'Page Title'" :width="530" :style="{font: '25px Arial', align: 'center'}"></i-text>
        <i-rect :x="30" :y="100" :width="535" :height="700" :style="{ fill:'#f0f0f0' }"></i-rect>
    </i-page>
</pdfFrame>

Multi-Page Template:

<pdfFrame 
    type="pdf" 
    :width="595" 
    :height="841" 
    :config="object" 
    :info="infoObj" 
    :encryption="encryptionObj">
    <!-- Page Templates -->
    <i-page-template id="temp-1">
        <i-rect :x="0" :y="0" :width="595" :height="841" :style="{ fill:'#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-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="{ fill:'#f0f0f0' }"></i-rect>
    </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>

PDF Example

Canvas Capability

Similar to the PDF template, the canvas template also supports all geometrical permeative tags for defining 2D graphics. Below is the sample pdf-frame template for Canvas rendering. It also provides a way to define events and animations on elements.

Some of the tags like <i-page><i-template> are not applicable for canvas context.

Canvas Template:

<pdfFrame type="canvas" width="595" height="841">
    <!-- Background Rectangle -->
    <i-rect :x="30" :y="100" :width="535" :height="700" :style="{ fill:'#f0f0f0' }"></i-rect>

    <!-- Dynamic Rectangles -->
    <i-rect
        v-for="n in 30"
        v-bind:key="n"
        :x="0"
        :y="n * 11"
        :width="(Math.sin(n * 0.4 - 4.5) + 1) * 3 + 4"
        :height="(Math.sin(n * 0.4 - 4.5) + 1) * 3 + 4"
        :transform="() => ({
            translate: [130, 360]
        })"
        :style="{
          fill: 'hsl(230 ,100%,50%)',
          opacity: 0.6,
          lineWidth: 1,
        }"
        :event="{
            click: clickEventHndlr,
            dbClick: dbClickEventHndlr
        }"
    />
</pdfFrame>

Canvas Example

https://stackblitz.com/edit/pdf-frame-vuejs-canvas?embed=1&file=README.md

Animation:

The PDF-Frame provides an intuitive way to specify animations on PDF-Frame elements. Using the <i-animate> element allows you to define the transitions of attributes and style properties for its parent element. In the provided example, transitions of x, y, and style properties have been applied to the rect element. Pdf-frame also provides <i-animatePath>, which enables the animation of the “d” attribute in the path element.

<pdfFrame type="canvas" width="595" height="841">
    <i-rect 
        :x="30" 
        :y="100" 
        :width="535" 
        :height="700" 
        :style="{ fill:'#f0f0f0' }">
          <i-animate
            :duration="1000"
            :ease="linear"
            :to="{
              x: 200,
              y: 300,
              style: { fill: '#ff0000' }
            }" />
    </i-rect>
</pdfFrame>

Canvas Animation Example

https://stackblitz.com/edit/pdf-frame-vuejs-canvas-qp1rhy

Events:

PDF-Frame facilitates easy integration of various events into its elements. For instance, in the example given, click and mouseover event handlers are attached to the rect element within the PDF-Frame canvas. The PDF-Frame canvas is versatile, supporting a wide array of events including click, double-click, mouseover, mousemove, mousedown, mouseup, mouseleave, contextmenu, and various touch events like touchstart, touchend, touchmove, and touchcancel.

<pdfFrame type="canvas" width="595" height="841">
    <i-rect 
        :x="30" 
        :y="100" 
        :width="535" 
        :height="700" 
        :style="{ fill:'#f0f0f0' }"
        :click="clickHndlr"
        :mouseover="mouseOverHndlr"
        :mouseleave="mouseleaveHndlr"
    >
    </i-rect>
</pdfFrame>

Resources

Github: https://github.com/I2Djs/pdf-frame

npm: https://www.npmjs.com/package/@i2d/pdf-frame-vue

wiki: https://github.com/I2Djs/pdf-frame/wiki/pdf%E2%80%90frame%E2%80%90vue

element API: https://nswamy14.gitbook.io/i2djs-v4/api-reference/elements-api

Creating visually rich PDFs with PDF-Frame-Vue

Vue 3 component for PDF and Canvas graphics