Rendering PDFs in web applications can be complex, but PDF-Frame-Vue simplifies this process for Vue.js applications, offering a suite of functionalities tailored for generating multi-page PDF documents effortlessly. Here's an overview of how PDF-Frame-Vue transforms PDF rendering:

<pdfFrame 
       type="pdf" 
       width="595" 
       height="841" 
       :config="{}"
       :info="{}"
       :encryption= "{}"  >

Example:

PDF Configurations:

Page Size:

Defining the dimensions of your PDF is straightforward with PDF-Frame-Vue:

• height: The PDF's height in pixels.

• width: The PDF's width in pixels.

height: <number>
width: <number>

Margins:

PDF-Frame-Vue provides two ways to set page margins. Use the config.margin property to apply a uniform margin to all sides, or the config.margins object for individual control:

config: {
    margin: <number>. // Page margin in pixel
    margins: {
        top: <number>. // Page top margin in pixel
        bottom: <number>. // Page bottom margin in pixel
        left: <number>. // Page left margin in pixel
        right: <number>. // Page right margin in pixel
    }
}

Custom Fonts:

PDF-Frame-Vue supports all 14 standard PDF fonts supported by PDFKit and also allows embedding of TrueType, OpenType, WOFF, WOFF2, TrueType Collection, and Datafork TrueType fonts:

config: {
    defaultFont: <string>. //default font
    fontRegister: {
        fontName: <font Path> // Path to font file
    }
}

Metadata:

Configure PDF metadata such as title, author, subject, and more, using the info object during document creation:

info: {
    title: <string>.  // Title of the PDF document
    author: <string>.  // Author of the PDF document
    subject: <string>. // Subject of the PDF
    keywords: <string>. // PDF keywords
    creationDate: <string>. // Creation Date Time
}

Encryption:

The PDF standard supports encryption, enabling files to be secured with a password necessary for access. To activate this feature, specify a user password within the encryption object during the creation of the PDF Document.

encryption: {
    userPassword: <string>
}

Example:

Page Templates:

The i-page-template element allows you to create a template with predefined styles, layouts, and components that can be applied to individual pages using the p-template attribute. Pages within the PDF can reference the template by its unique ID using the p-template attribute. This creates a connection between the page and the template, ensuring that the layout and styles are applied.

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

<i-page p-template="temp-1"></i-page>

Auto Pagination:

One of the standout features of PDF-Frame-Vue is its auto-pagination capability. When content overflows the current page, the framework seamlessly continues onto a new page, ensuring the document's integrity and readability.

Auto Pagination Example

PDF-Frame-Vue simplifies PDF rendering in Vue applications, making it an indispensable tool for developers. Its robust features and flexibility empower you to create professional, dynamic PDF documents with minimal effort. Embrace PDF-Frame-Vue and elevate your web applications with high-quality PDF rendering capabilities.