PDF viewer component for Vue 2 and Vue 3

Related tags

PDF vue-pdf-viewer
Overview

📄 pdf-viewer-vue

PDF viewer component for Vue 2 and Vue 3

npm npm Github Repo stars npm

Compatibility

This package is compatible with both Vue 2 and Vue 3. The default exported build is for Vue 3, but dist directory also contains a build for Vue 2 (dist/vue2-pdf-viewer.js). See the example in Usage section.

Installation

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

npm install pdf-viewer-vue
yarn add pdf-viewer-vue
">
<script src="https://unpkg.com/pdf-viewer-vue">script>

Usage

Base64

">
<template>
  <div>
    <h1>Fileh1>

    <PDFViewer
      :source="url"
      style="height: 100vh; width: 100vw"
      @download="handleDownload"
    />

    <h1>Base64h1>

    <PDFViewer
      :source="base64"
      style="height: 100vh; width: 100vw"
      @download="handleDownload"
    />
  div>
template>

<script>
import PDFViewer from 'pdf-viewer-vue'

// OR THE FOLLOWING IMPORT FOR VUE 2
// import PDFViewer from 'pdf-viewer-vue/dist/vue2-pdf-viewer'

export default {
  components: {
    PDFViewer,
  },

  data() {
    return {
      url: '',
      base64: '',
    }
  },
}
script>

Props

Name Type Accepted values Description
source string document URL or Base64 source of document
controls string[] [
'download',
'print',
'rotate',
'zoom',
'catalog',
'switchPage',
]
visible controls
loading-text string - loading text
rendering-text string - rendering text
settings { defaultZoom: number } - default settings
filename string null display filename

Events

Name Value Description
download {source: string; filename: string;} pdf file base info
loaded {total: number} document load completed
loading-failed Error failed to load document
rendered - finished rendering the document
rendering-failed Error failed to render document

Examples

TODO: CodeSandbox or JSFiddle

License

MIT License. Please see LICENSE file for more information.

You might also like...
📅 Proplanner is easy way to prepare a weekly schedule. You can export your schedule as a PDF file!

📅 Proplanner Proplanner is easy way to prepare a weekly schedule. You can export your schedule as a PDF file! Visit live Technologies Frontend: Tailw

A PDFMake Plugin for Vue 3.x

Vue PDFMake A PDFMake plugin for 3.x Install yarn add vue3-pdfmake OR npm install vue3-pdfmake in main.(js|ts) import { createApp } from 'vue'; import

A simple pdf viewer based on mozilla's PDF.js

A simple pdf viewer based on mozilla's PDF.js

A small electron based pdf reader to test out the capabilities of Vue.js, Electron and PDF.js.
A small electron based pdf reader to test out the capabilities of Vue.js, Electron and PDF.js.

A small electron based pdf reader to test out the capabilities of Vue.js, Electron and PDF.js.

💫 Awesome module to generate PDF files and manage PDF inyour Nuxt application.

Generate PDF files directly from your content on your website, can be used for offline downloadable documentation pages.

PDF Reader for Vue 3 using Mozilla's PDF.js

PDF Reader for Vue 3 using Mozilla's PDF.js

PDF viewer component for Vue 2 and Vue 3

📄 pdf-viewer-vue PDF viewer component for Vue 2 and Vue 3 Compatibility This package is compatible with both Vue 2 and Vue 3. The default exported bu

vue.js pdf viewer

vue-pdf vue.js pdf viewer Install npm install --save vue-pdf Example - basic template pdf src="./static/relativity.pdf"/pdf /template scri

Vue.js pdf viewer

Vue.js pdf viewer

it`s a pdf viewer base on pdfjs

it`s a pdf viewer base on pdfjs

Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js

v-viewer Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js Live demo Examples directive component thumbnail

Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js

Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js

Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js

v-viewer Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js Live demo Examples directive component thumbnail

Image viewer component for vue 3.x, supports rotation, scale, zoom and so on, based on viewer.js

v-viewer Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js v-viewer for vue2 Live demo Quick Example direct

PDF embed component for Vue 2 and Vue 3

This package is compatible with both Vue 2 and Vue 3, but is delievered in separate builds. Use dist/vue2-pdf-embed.js for Vue 2 and dist/vue3-pdf-embed.js for Vue 3. The default export of the package is for Vue 3.

A simple and free tool to create timelines. Using JSON files and export it to PDF.
A simple and free tool to create timelines. Using JSON files and export it to PDF.

Timeline Maker A simple tool to make timelines and export them as JSON or PDF. Click here to try it! Project setup npm install Compiles and hot-reloa

Vue Pdf Renderer is a component that allows you to render PDFs from file uploads in most modern browsers

Vue Pdf Renderer is a component that allows you to render PDFs from file uploads in most modern browsers

A Vue.js wrapper component for PDF.js

vue-pdfjs-wrapper A simple Vue.js wrapper component for PDF.js. Note This component installs and uses pdfjs-dist, and loads its worker using the worke

☀️ Free [Tencent cloud OSS] for map bed, PDF files and other attachment management

Tauri is not finished yet, you can use the Web side map bed, I will release the Tauri version later Live Demo English | 简体中文 Features ☀️ Free [Tencent

Comments
  • 在form表单中预览点击头部按钮会刷新页面

    在form表单中预览点击头部按钮会刷新页面

    如题,我有个需求是在form表单中进行预览,所以我毫不犹豫地将 PDFViewer 组件嵌套在 el-form 组件内,大概代码如下:

    <el-form>
        <el-form-item>
            <PDFViewer />
        </el-form-item>
    </el-form>
    

    当我点击头部的缩放、下载、打印等按钮时,我的页面会刷新,因为 IconButton.vue 组件中的 button 未指定 type 属性,默认的 type 属性值是 submit,所以点击这些按钮会触发我表单的提交,从而导致刷新页面。

    目前我的做法是阻止我表单提交,但是希望作者能够指定下 type="button" 以消除潜在的问题。

    再次感谢作者写出这么好用的组件!!!

    附上关于 type 的说明 :https://www.runoob.com/tags/att-button-type.html

    opened by xiaopin 0
  • 0.2.8版本build报错了

    0.2.8版本build报错了

    错误描述如下: error in ./node_modules/pdf-viewer-vue/dist/vue2-pdf-viewer.js

    Module parse failed: Unexpected token (1:1812561) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file)

    opened by neil-he 1
Releases(v0.2.8)
Owner
null
A small electron based pdf reader to test out the capabilities of Vue.js, Electron and PDF.js.

A small electron based pdf reader to test out the capabilities of Vue.js, Electron and PDF.js.

null 1 Mar 20, 2022
PDF viewer component for Vue 2 and Vue 3

?? pdf-viewer-vue PDF viewer component for Vue 2 and Vue 3 Compatibility This package is compatible with both Vue 2 and Vue 3. The default exported bu

null 7 Oct 19, 2022
vue.js pdf viewer

vue-pdf vue.js pdf viewer Install npm install --save vue-pdf Example - basic <template> <pdf src="./static/relativity.pdf"></pdf> </template> <scri

Franck Freiburger 1.9k Nov 22, 2022
it`s a pdf viewer base on pdfjs

it`s a pdf viewer base on pdfjs

Yang Wangwang 2 Nov 1, 2019
PDF embed component for Vue 2 and Vue 3

This package is compatible with both Vue 2 and Vue 3, but is delievered in separate builds. Use dist/vue2-pdf-embed.js for Vue 2 and dist/vue3-pdf-embed.js for Vue 3. The default export of the package is for Vue 3.

Aliaksei Hrynko 158 Nov 29, 2022
Vue Pdf Renderer is a component that allows you to render PDFs from file uploads in most modern browsers

Vue Pdf Renderer is a component that allows you to render PDFs from file uploads in most modern browsers

Eddie A. Rodriguez 0 Jan 28, 2020
A Vue.js wrapper component for PDF.js

vue-pdfjs-wrapper A simple Vue.js wrapper component for PDF.js. Note This component installs and uses pdfjs-dist, and loads its worker using the worke

Niv Guler 1 Mar 6, 2022
Vue -> HTML -> Puppeteer PDF rendering service

Vue -> HTML -> Puppeteer PDF rendering service

MOLGENIS - open source solutions for scientific data 1 Jul 23, 2021
Annotation layer for pdf.js in vue

Annotation layer for pdf.js in vue

null 1 Jan 26, 2021
Export/Download Vue3 using html2pdf.js. Easy to custom any pdf style because it is exported from real HTML.

Export/Download Vue3 using html2pdf.js. Easy to custom any pdf style because it is exported from real HTML.

Sango Technologies Inc 7 Nov 14, 2022