RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://npmjs.com/package/vue-pdf-embed below:

vue-pdf-embed - npm

PDF embed component for Vue 3 (see Compatibility for Vue 2 support)

Controlled rendering of PDF documents in Vue apps
Handling password-protected documents
Includes text layer (searchable and selectable documents)
Includes annotation layer (annotations and links)
No peer dependencies or additional configuration required
Can be used directly in the browser (see Examples)

This package is only compatible with Vue 3. For Vue 2 support, install vue-pdf-embed@1 and refer to the v1 docs.

Depending on the environment, the package can be installed in one of the following ways:

npm install vue-pdf-embed

<script src="https://unpkg.com/vue-pdf-embed"></script>

<script setup>
import VuePdfEmbed from 'vue-pdf-embed'

// optional styles
import 'vue-pdf-embed/dist/styles/annotationLayer.css'
import 'vue-pdf-embed/dist/styles/textLayer.css'

// either URL, Base64, binary, or document proxy
const pdfSource = '<PDF_URL>'
</script>

<template>
  <VuePdfEmbed annotation-layer text-layer :source="pdfSource" />
</template>

Name Type Accepted values Description annotationLayer boolean whether the annotation layer should be enabled height number natural numbers desired page height in pixels (ignored if the width property is specified) imageResourcesPath string URL or path with trailing slash path for icons used in the annotation layer linkService PDFLinkService document navigation service to override the default one (emitting internal-link-clicked) page number
number[] 1 to the last page number page number(s) to display (displaying all pages if not specified) rotation number 0, 90, 180, 270 (multiples of 90) desired page rotation angle in degrees scale number rational numbers desired page viewport scale source string
object
PDFDocumentProxy document URL or Base64 or typed array or document proxy source of the document to display textLayer boolean whether the text layer should be enabled width number natural numbers desired page width in pixels Name Value Description internal-link-clicked destination page number internal link was clicked loaded PDF document proxy finished loading the document loading-failed error object failed to load document password-requested object with callback function and isWrongPassword flag password is needed to display the document progress object with number of loaded pages along with total number of pages tracking document loading progress rendered â finished rendering the document rendering-failed error object failed to render document Name Props Description after-page page (page number) content to be added after each page before-page page (page number) content to be added before each page Name Arguments Description download filename (string) download document print print resolution (number), filename (string), all pages flag (boolean) print document via browser interface

Note: Public methods can be accessed through a template ref.

Common Issues and Caveats

This is a client-side library, so it is important to keep this in mind when working with SSR (server-side rendering) frameworks such as Nuxt. Depending on the framework used, you may need to properly configure the library import or use a wrapper.

The web worker used to handle PDF documents is loaded by default. However, this may not be acceptable due to bundler restrictions or CSP (Content Security Policy). In such cases it is recommended to use the essential build (index.essential.mjs) and set up the worker manually using the exposed GlobalWorkerOptions.

import { GlobalWorkerOptions } from 'vue-pdf-embed/dist/index.essential.mjs'
import PdfWorker from 'pdfjs-dist/build/pdf.worker.mjs?url'

GlobalWorkerOptions.workerSrc = PdfWorker

Typically, document loading is internally handled within the component. However, for optimization purposes, the document can be loaded in the useVuePdfEmbed composable function and then passed as the source prop of the component (e.g. when sharing the source between multiple instances of the component).

<script setup>
import VuePdfEmbed, { useVuePdfEmbed } from 'vue-pdf-embed'

const { doc } = useVuePdfEmbed({ source: '<PDF_URL>' })
</script>

<template>
  <VuePdfEmbed :source="doc" />
</template>

The path to predefined CMaps should be specified to ensure correct rendering of documents containing non-Latin characters, as well as in case of CMap-related errors:

<VuePdfEmbed
  :source="{
    cMapUrl: 'https://unpkg.com/pdfjs-dist/cmaps/',
    url: '<PDF_URL>',
  }"
/>

The image resource path must be specified for annotations to display correctly:

<VuePdfEmbed
  image-resources-path="https://unpkg.com/pdfjs-dist/web/images/"
  source="<PDF_URL>"
/>

Note: The examples above use a CDN to load resources, however these resources can also be included in the build by installing the pdfjs-dist package as a dependency and further configuring the bundler.

Basic Usage Demo (JSFiddle)

Advanced Usage Demo (JSFiddle)

Lazy Loading Demo (JSFiddle)

MIT License. Please see LICENSE file for more information.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4