pdf‐frame‐vue

PDF-Frame component for Vuejs Framework. It implements vuejs custom renderer, thereby leveraging template engine and reactivity capabilities.

Installation

npm install @i2d/pdf-frame-vue

Integration

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

import pdfFrame from "@i2d/pdf-frame-vue";
createApp(App).component("pdfFrame", pdfFrame)

Usage

sample pdf-frame template.

<pdfFrame type="pdf" :width=595 :height=841 :config="configObject" :encryption="encryptionObj" :info="metaDataObject">
    <!-- 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-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-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>

Why pdf-frame-vue?

pdf-frame-vue adopts vuejs custom renderer technique, thereby leveraging template engine, reactivity, and component capabilities.

Harnessing Vue's 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.
• Utilizing Vue Features: All the features of Vue's templating, like loops, conditionals, and bindings, can be used with pdf-frame-vue to define the structure and content of the PDF.

Leveraging Vue's Reactivity Capabilities:

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 Integration with Vue Applications:

• Seamless Integration: pdf-frame 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, developers can leverage their existing knowledge of Vue and its ecosystem, making it a highly accessible tool for anyone familiar with Vue development.