pdf‐frame Configurations

PDF-Frame supports a wide range of configurations for both PDF and Canvas rendering. Below is the sample configuration of pdfFrame component:

<pdfFrame 
       type="pdf || canvas || pdf-blob" 
       width="<number>"               // Optional; if not set, parent container width and height will be inherited.
       height="<number>"              // Optional; if not set, parent container width and height will be inherited.
       :config="<object>".            // Config varies between PDF and canvas context   
       :info="<object>"               // Applicable for PDF context
       :encryption= "<object>"        // Applicable for PDF context
       :autoPagination="<boolean>"    // Applicable for PDF context
       
       :setCtxClear="<function>"       // Applicable for Canvas context. 
       :needOnUpdated="<boolean>"      // Flag to enable the onUdpated event hook; only on setting this prop to true, onUpdated event will be emitted.

       //Hooks - applicable for both Canvas and PDF contexts
       @on-updated="<function>"
       @on-ready="<function>"
       @on-resize="<function>"

       //Events - applicable for Canvas context
        @mouseover="<function>"
        @mouseup="<function>"
        @mousein="<function>"
        @mouseout="<function>"
       // Check events page for all supported events
  >

PDF Configuration

PDF Size

These parameters are optional. When specified, pages will be rendered according to the specified size; otherwise, they will adopt the dimension of the parent container. This setting applies to the Canvas context too.

• height: <number> The height of the PDF in pixels.
• width: <number> The width of the PDF in pixels.

Config Object:

The config object allows for global PDF settings across all pages:

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
	}
	defaultFont: <string>  //default font
	fontRegister: {
		fontName: <font Path> 
	}
    }

Metadata:

You can set the metadata for the PDF document as follows:

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

To enable PDF encryption:

encryption: {
	userPassword: <string>
    }

autoPagination

Boolean flag to Enable / Disable auto pagination. Default: true

Canvas Configuration

<pdfFrame 
       type="canvas" 
       width="595"  // Optional. if not set, parent height, and width will be considered.
       height="841" // Optional. if not set, parent height, and width will be considered.
       :config="{}" 
>

Canvas Size

These parameters are optional. When specified, pages will render according to the given size; otherwise, they will adopt the dimensions of the parent container.

• height: <number> The height of the Canvas in pixels.
• width: <number> The width of the Canvas in pixels.

Config Object:

This config will be passed as it is while getting the canvas 2d context. All the canvas context attributes can be specified as part of this config.

config: {
	alpha: true      // example
    }

setCtxClear:

This property is of type Function and is invoked just before the rendering process begins. It enables custom preparatory actions, such as setting up initial canvas states, executing custom drawing operations, or clearing previous renderings, among other tasks. Example:

   setCtxClearMethod(ctx) {
      // Clear the canvas
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    }