@component-hook/pdf-canvas

Rendering PDF documents onto a canvas with vue3 and react component (DEMO)
Implementation depository: PDF-signature

Features

• Rendering PDF documents onto a canvas
• Open encrypted PDF files
• Drag and drop the images and text onto the canvas
• Manually add the images and text onto the canvas
• Supports typescript

Installation

$ npm install @component-hook/pdf-canvas

# or use yarn
$ yarn add @component-hook/pdf-canvas

# or use pnpm
$ pnpm install @component-hook/pdf-canvas

Usage with Vue

<script setup lang="ts">
import { ref } from 'vue';
import PdfCanvas, { useFabric, type PDF } from '@component-hook/pdf-canvas/vue';

const { loadFile } = useFabric();
const currentPdf = ref<PDF>();

async function uploadFile(event: Event) {
  const target = event.target as HTMLInputElement;
  const { files } = target;

  if (!files) return;
  const file = files[0];
  const content = await loadFile(file);

  currentPdf.value = content;
  target.value = '';
}
</script>

<template>
  <div class="w-fit flex flex-col items-center gap-3">
    <pdf-canvas
      v-if="currentPdf"
      :file="currentPdf"
    />

    <p
      v-else
      class="font-mono text-sm"
    >
      Please select a PDF file or image.
    </p>

    <button class="relative">
      <input
        type="file"
        accept="application/pdf, .jpg, .png"
        class="opacity-0 top-0 left-0 absolute w-[94px] h-[36px] cursor-pointer"
        @change="uploadFile"
      />
      select file
    </button>
  </div>
</template>

Usage with React

import { useState, type ChangeEvent } from 'react';
import PdfCanvas, { useFabric, type PDF } from '@component-hook/pdf-canvas/react';

export function DrawPdf() {
  const { loadFile } = useFabric();
  const [currentPdf, setCurrentPdf] = useState<PDF>();

  const uploadFile = async (event: ChangeEvent<HTMLInputElement>) => {
    const target = event.target;
    const { files } = target;

    if (!files || files.length === 0) return;

    const file = files[0];
    const content = await loadFile(file);

    setCurrentPdf(content);
    target.value = '';
  };

  return (
    <div>
      {currentPdf ? <PdfCanvas file={currentPdf} /> : <p>Please select a PDF file or image.</p>}

      <button>
        <input
          type="file"
          accept="application/pdf, .jpg, .png"
          onChange={uploadFile}
        />
        select file
      </button>
    </div>
  );
}

Attributes

| Name | Required | Type | Description | Default | | ---------------- | -------- | --------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | | file | true | PDF | The data is generated by loadFile of useFabric hook | — | | page | false | number | The page number you want to display | 1 | | canvasId | false | string | Canvas dom prefix id selector - ${canvasId}-${page - 1} | PDF-canvas | | fileZoom | false | number | Zoom in and out of the displayed canvas | 1 | | fileScale | false | number | The actual size of the canvas will affect the display clarity | 1 | | canvasClass | false | string | Canvas dom class selector | — | | isDrop | false | boolean | Control whether to drag and drop images and text onto the canvas | false | | password | false | string | Open password for encrypted PDF files | — | | dropTextOptions | false | object | fabric.js FabricText options | text options | | dropImageOptions | false | object | fabric.js FabricImage options | image options | | closeSvgOptions | false | object | Setup close svg options | close options |

Exposes

| Event | Description | Type | | :----------- | :-------------------------------------- | :--------------------------------------------------------------- | | addImage | Manually add the images onto the canvas | Function (src: string, options?: TOptions<ImageProps>) => void | | addText | Manually add the text onto the canvas | Function (text: string, options?: TOptions<TextProps>) => void | | clearActive | Manually deactivate status | Function () => void | | deleteCanvas | Delete the current canvas | Function () => void | | canvasRef | The current canvas dom ref | object Ref<HTMLCanvasElement> |

UseFabric

| Event | Description | Type | | :------- | :--------------------- | :------------------------------------------------------- | | loadFile | Load PDF file or image | Function (file: File, password?: string): Promise<PDF> |