Skip to content

Files

Latest commit

bcdb92f · Dec 2, 2024

History

History

pdf-frame-vue

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Jun 30, 2023
Apr 5, 2024
Jan 31, 2024
Dec 2, 2024
Mar 24, 2024
Jul 15, 2023
Mar 24, 2024
Apr 5, 2024
Jul 15, 2023
Dec 2, 2024
Mar 16, 2024

pdf-frame-vue npm License Vue

PDF-Frame-Vue is a vue 3 component designed for rendering PDF and Canvas graphics effortlessly on the web. This component provides an intuitive HTML Template-based syntax and semantics that simplifies the creation and management of graphical content. Powered by i2djs framework, PDF-Frame-Vue currently supports rendering outputs in PDF and Canvas formats.

PDF-Frame-Vue implements Vue.js' custom renderer, taking advantage of framework capabilities like templating, the reactivity system, component architecture and many more.

Features

  • Declarative Syntax: Easily define PDF/Canvas graphical content using a clear and declarative syntax. Adopts the familiar SVG tag and attribute syntax for defining geometrical shapes.
  • Multi media output: Canvas and PDF.
  • Consistent Rendering: Provides the same syntax and semantics for rendering both PDF and Canvas outputs.
  • Auto Pagination: Content overflow is taken care by the engine by spawning new pages, ensuring the document's integrity and readability.
  • Multi-page PDF Support: Create multi-page PDF documents seamlessly.
  • Animations & Events: Easy way to define the animations and events on elements in canvas context.

Documentation:

Playground

Blogs:

Usage

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>

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>

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

Contributing

Contributions are welcome! If you would like to contribute to pdf-frame, please follow the guidelines in CONTRIBUTING.md.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Contact

For any inquiries or support, please contact narayanaswamy14@gmail.com.