Narayana Swamy

Posted on Jan 21

Creating visually rich PDFs with PDF-Frame-Vue

#webdev #beginners #vue #javascript

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

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 Layouting: Automatic layout adjustments when content overflows.
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

Add the following code in 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 also a set of abstract tags like i-page, i-page-template.. etc for easily defining the graphical content of PDFs. Below is a sample PDF-frame template for PDF rendering.
Tags such as and are specifically designed and applicable only within the context of PDFs.

PDF Template: https://pr3kh5.csb.app/



<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>

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 are not applicable for canvas context.

Canvas Template: https://cmynlk.csb.app/



<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>

Animation:

The PDF-Frame provides an intuitive way to specify animations on PDF-Frame elements. Using the 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 , 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>

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' }"

        :event="{

                click: clickHndlr,

                mouseover: mouseHndlr

             }"

    >

    </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

Thank you!

DEV Community