Skip to content

pdf‐frame‐vue

Jump to bottom
Narayana Swamy edited this page May 4, 2024 · 14 revisions

A vue.js pdf-frame component for rendering PDF/Canvas graphics on web. It supports an intuitive HTML-based syntax and semantics to define graphics, making it simple and easy for users to create and manage graphical content. 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)

Config

Include the below config in vite.config.js

defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.includes('i-')
        }
      }
    })]
})

Usage

PDF Basic Template

<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 Multi-Page Template

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

Canvas Template

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

Why pdf-frame-vue?

pdf-frame-vue utilizes the custom renderer approach of Vue.js, thus harnessing the framework's templating engine, reactivity system, and component-based architecture.

Harnessing Vue's Templates 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.
Clone this wiki locally