@whykhamist/vpdf v1.0.2-alpha

Vue PDF (VPDF)

Custom PDF viewer for Vue. Built on top of PDF.js

• Features
• Installation
• Setup
• Usage
  • Styles
• Components
  • VPdf
  • VPdfViewer
  • VPdfPageRenderer
• Composables
  • usePdf
  • usePdfViewer
• Types

Features

• Utilizes virtual scrolling to render PDFs with huge page count
• Supports password protected PDFs
• Textlayer support
• PDF Thumbnails
• PDF Bookmarks
• Show/download Attachments

Installation

$ npm i @whykhamist/vpdf

Setup

import { createApp } from "vue";
import App from "./app.vue";
import VPdf from "@whykhamist/vpdf";

import "@whykhamist/vpdf/style.css";

async function init() {
  const app = createApp(App);
  app.use(VPdf);
  app.mount("#app");
}

init();

Usage

import { ref } from "vue";

// acrobat_reference.pdf (651 pages): https://helpx.adobe.com/pdf/acrobat_reference.pdf

// pdfreference1.7old.pdf (1310 pages)
const src = ref(
  "https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/pdfreference1.7old.pdf"
);
const smoothJump = ref(false);
const textLayer = ref(false);
const theme = ref(""); // blank for light, vpdf-dark for dark

<template>
  <VPdf
    :src="src"
    :smoothJump="smoothJump"
    :textLayer="textLayer"
    :class="theme"
  />
</template>

Styles

Colors can be customized using css variables: Default colors for light & dark modes

:root {
  --vpdf-foreground: 213deg 13% 14%;
  --vpdf-background: 0deg 0% 100%;
  --vpdf-primary: 211deg 32% 26%;
  --vpdf-secondary: 211deg 46% 69%;
  --vpdf-accent: 211deg 62% 44%;

  --vpdf-positive: 125deg 42% 50%;
  --vpdf-negative: 3deg 75% 60%;
}

.vpdf-dark {
  --vpdf-foreground: 213deg 26% 82%;
  --vpdf-background: 215deg 18% 13%;
  --vpdf-primary: 211deg 32% 74%;
  --vpdf-secondary: 211deg 46% 31%;
  --vpdf-accent: 211deg 62% 56%;
}

We can also add our custom colors

<style lang="scss">
  .vpdf-sepia {
    --vpdf-foreground: 34 33% 20%;
    --vpdf-background: 42 54% 88%;
    --vpdf-primary: 34 20% 51%;
    --vpdf-secondary: 60 19% 73%;
    --vpdf-accent: 75 19% 63%;
  }
</style>
<template>
  <VPdf
    :src="src"
    :smoothJump="smoothJump"
    :textLayer="textLayer"
    class="vpdf-sepia"
  />
</template>

Components

VPdf

A complete PDF viewer component with the most common features and configurations

Features

• Password prompt dialog
• Collapsible Side bar for navigation and attachments
  • Thumbnails
  • Bookmarks
  • Attachments (Download file only)
• View toggle (Vertical/Horizontal page scrolling)
• Rotate page
• Zoom in/out buttons
• ctrl + scroll to zoom in/out
• Scale selector
  • with fit to page, width and height options
• Page number indicator (Can enter page number and jump to that page)
• Next/Previous page buttons

Properties

sample onPassword

const onPassword = (cb: Function, reason: Number) => {
  const password = prompt("Please enter the password");
  cb(password);
};

VPdfViewer

A PDF viewer component without the side & top menu bars, Use this to build/style your custom PDF viewer.

VPdf uses this component internally

!NOTE You will need to use the usePdf composables to use this component

!NOTE This component uses the usePdfViewer composable internally

Properties

VPdfPageRenderer

Renders a single PDF page

Properties

Exposed

Composables

usePdf

This composable is responsible for loading PDF from a source. It returns a pdf object that can be used to render the PDF. It also returns the number of pages, outline (bookmars), attachments, metadata, progress , and javascript of the PDF.

import { usePdf } from "@whykhamist/vpdf";

const pdf = usePdf(pdfSource, options);

const src = ref(
  "https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/pdfreference1.7old.pdf"
);

const options = ref({
  workerSrc: "YOUR_WORKER_SRC",
  password: "PDF_PASSWORD_IF_NEEDED",
  onError: (error: any) => {},
  onProgress: (data: OnProgressParameters) => {},
  onPassword: (callback: Function, reason: any) => {},
});

const {
  pdf,
  pages,
  outline,
  attachments,
  metadata,
  progress,
  javascript,
  loading,
} = usePdf(src, options);

Parameters

Returns

usePdfViewer

This computes the page information that is needed to render and position pages in the viewport based on the scale, rotation, gaps and view mode. It alsoe determines when to render a page (virtual scrolling).

import { usePdfViewer } from "@whykhamist/vpdf";
const container = ref<HTMLDivElement>();
const pdfViewer = usePdfViewer(container, options);

<div ref="container"></div>

Parameters

Parameter: options

Returns

Types

Types from pdfjs

• pdfjs-dist
  • PageViewport
• pdfjs-dist/types/src/display/api
  • OnProgressParameters
  • PDFDocumentLoadingTask
  • PDFDocumentProxy
  • DocumentInitParameters
  • TypedArray
  • RenderParameters

type Size = {
  width: number;
  height: number;
};

type Point = {
  x: number;
  y: number;
};

type Bounds = {
  top: number;
  bottom: number;
  left: number;
  right: number;
};

type ScrollState = {
  right: boolean;
  down: boolean;
  lastX: number;
  lastY: number;
};

type pdfSource =
  | string
  | URL
  | TypedArray
  | ArrayBuffer
  | DocumentInitParameters;

interface pdfOptions {
  workerSrc?: string;
  password?: string;
  onError?: (error: any) => void;
  onProgress?: (data: OnProgressParameters) => void;
  onPassword?: (callback: Function, reason: any) => void;
}

type pdfOutlineDest = string | Array<any> | null;

type pdfOutline = Awaited<ReturnType<PDFDocumentProxy["getOutline"]>>;

type pdfOutlinePairs = {
  page: number | null;
  offsetY: number;
  offsetX: number;
  title: string;
  sub: Array<pdfOutlinePairs>;
};

type pdfViewerOptions = {
  pdf: PDFDocumentLoadingTask | undefined;
  page: number;
  scale: number;
  gap: number;
  rotation: number;
  view: "vertical" | "horizontal";
  textLayer: boolean;
  smoothJump: boolean;
  renderDelay: number;
  renderOffset: number;
  downScale?: number;
};

type pdfPageInfo = {
  id: string;
  scale: number;
  rotation: number;
  page: number;
  viewport: PageViewport;
  pos: Point;
  bounds: pdfPageBounds;
};

type pdfPageBounds = {
  inner: Bounds;
  outer: Bounds;
};

type pdfScrollState = {
  rAF: number | null;
  state: ScrollState;
  covered: Point;
  timer: ReturnType<typeof setTimeout> | null;
};

type pdfattachmentFile = {
  filename: string;
  content: TypedArray;
  rawFilename: string;
};

type pdfattachment = Record<string, pdfattachmentFile>;