@component-hook/pdf-canvas v0.1.6

@component-hook/pdf-canvas

Rendering PDF documents onto a canvas with vue3 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

Basic Usage

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

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>

Attributes

Exposes

UseFabric