Socket
Socket
Sign inDemoInstall

@quasar/quasar-app-extension-qpdfviewer

Package Overview
Dependencies
0
Maintainers
6
Versions
18
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@quasar/quasar-app-extension-qpdfviewer

QPdfviewer is an app extension for viewing PDF files


Version published
Maintainers
6
Weekly downloads
1,833
decreased by-7.05%

Weekly downloads

Readme

Source

For Qpdfviewer that works with Quasar v2/Vue v3, head to the next branch or check out the documentation.

QPdfViewer (@quasar/qpdfviewer)

official icon npm (scoped) GitHub code size in bytes GitHub repo size in bytes npm

QPdfViewer is an UI App Extension for Quasar Framework v1. It will not work with legacy versions of Quasar Framework.

This work is currently in beta and there are expected changes while things get worked out. Your help with testing is greatly appreciated. Suggestions and PRs welcomed.

Info

QPdfViewer allows you to have PDF in your web pages.

Install

To add this App Extension to your Quasar application, run the following (in your Quasar app folder):

quasar ext add @quasar/qpdfviewer

Uninstall

To remove this App Extension from your Quasar application, run the following (in your Quasar app folder):

quasar ext remove @quasar/qpdfviewer

Describe

You can use quasar describe QPdfViewer

Test Project

In demo folder of app-extension-qpdfviewer.

Demo

Can be found here

Example Code

Be sure to check out the Test Project for more examples.

<q-pdfviewer
  v-model="show"
  src="'https://www.ets.org/Media/Tests/GRE/pdf/gre_research_validity_data.pdf'"
  type="pdfjs"
  content-class="absolute"
/>

or

<template>
  <div class="container q-pa-lg">
    <q-pdfviewer
      v-model="show"
      :src="src"
      type="html5"
      content-class="fit container"
      inner-content-class="fit container"
    />
  </div>
</template>

<script>
export default {
  name: 'Container',
  props: {
    src: String
  },

  data () {
    return {
      show: true
    }
  }
}
</script>

<style>
.container {
  max-width: 50%;
  max-height: 70%;
  min-width: 400px;
  min-height: 600px;
  width: 100%;
  height: 100%;
}
</style>

Using blob data (for type="html5" only):

fetchPDF (payload) {
  this.$axios.post('/my/url/to/pdf', payload, { responseType: 'blob' }).then(res => {
    // create the blob
    const blob = new Blob([res.data], { type: res.data.type })
    // set reactive variable
    pdfSrc = window.URL.createObjectURL(blob)
  }).catch(err => {
    this.$q.notify({
      message: 'Error downloading PDF',
      type: 'negative',
      textColor: 'white',
      color: 'negative',
      icon: 'error',
      closeBtn: 'close',
      position: 'top'
    })
  })
}

NOTE: QPdfviewer now has support for native HTML5 PDF viewer and for PDFJS. Use type="html5" or type="pdfjs". If you previously has this app extension, and want to use the pdfjs, you will need to re-install it. An update will not get the PDFJS for you. If you update, you can run quasar ext invoke @quasar/qpdfviewer instead of re-installing.


NOTE: QPdfviewer uses the <object> tag for displaying the PDF (type="html5" only). Should the browser not support this, the fallback is to use an <iframe>. And, should this also not be supported by the browser, then some text will be displayed with a link to the PDF so the user can download it for off-line viewing.

When using PDFJS, the PDF is always displayed in an <iframe>.


NOTE: QPdfviewer now works with Electron, but you have to use type="pdfjs" to get this functionality.


QPdfviewer Vue Properties

Vue PropertyTypeDescription
valueBooleanUse v-model to toggle visiblity
srcStringPath to the PDF source
typeStringPDF engine to use (values: html5 or pdfjs)
error-stringStringSet this if you wish to change from the default error string
loadFunctionThe function to be called when the pdf document has been loaded
errorFunctionThe function to be called when the pdf document has an error
content-class[String, Object, Array]Style definitions to be attributed to the PDF container
content-style[String, Object, Array]Style definitions to be attributed to the PDF container
inner-content-class[String, Object, Array]Style definitions to be attributed to the PDF object
inner-content-style[String, Object, Array]Style definitions to be attributed to the PDF object

QPdfViewer has no events or slots.

Donate

If you appreciate the work that went into this App Extension, please consider donating to Quasar.

Keywords

FAQs

Last updated on 06 Mar 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc