quasarframework / app-extension-qpdfviewer Goto Github PK

When a page with the PDF viewer is opened (e.g. the demo) on Firefox for Android (both the current version as the preview version), the PDF is immediately downloaded.
I don't think any of the Android browsers have built in PDF viewing support, so it makes sense that it is not displayed. However, having to click a download link before actually downloading the PDF would make more sense (this is also what the documentation says).

I'm currently using a template like so, inside of a QDialog component:

<q-dialog ref="dialog" @hide="onDialogHide" maximized>
  <div class="dialog-pdf">
    <q-btn
      icon="close"
      color="primary"
      class="_close-btn"
      round
      size="25px"
      @click.stop="Ok"
    />
    <q-pdfviewer
      :value="true"
      :src="src"
      :error="onError"
      :load="onLoad"
      content-class="fit _container"
      inner-content-class="fit _container"
    />
  </div>
</q-dialog>

However, the onError and onLoad functions don't get triggered.
I wanted to use these to add a QSpinner before the pdf is loaded properly. ;)

I get an AV warning that blocks orimi.com (PDF URL) from my antivirus product.

The project lacks the type information for html tags.
@quasar/quasar-ui-qcalendar delivers them for the calendar element.

q/app v2 introduces new /public folder which replaces /src/statics
So pdfjs location for this version should be /public rather than /src/statics ...

Not compatible with app-vite V2 beta

Describe the bug
Extension(@quasar/qpdfviewer): is not compatible with @quasar/app-vite v2.0.0-beta.2. Required version: ^1.0.0-alpha.0

To Reproduce
Steps to reproduce the behavior:

1. Create quasar project, with Quasar App CLI with Vite 5
2. Add qpdfviewer V2.0.0-alpha.6 extension

Change api.compatibleWith
https://quasar.dev/quasar-cli-vite/upgrade-guide#a-note-to-app-extensions-owners

Pkg quasar............. v2.10.2 » Pkg @quasar/app-vite... v1.1.3

run:
quasar ext add @quasar/qpdfviewer

returns:
App • Quasar App Extension "@quasar/qpdfviewer" successfully installed.

run:
quasar dev

returns:
App • ⚠️ Extension(@quasar/qpdfviewer): Dependency not found - @quasar/app. Please install it.

Running

quasar ext add @quasar/qpdfviewer@next

from a freshly created Quasar project using app-vite cause this error during quasar dev:

TypeError: api.extendWebpack is not a function

It seems that an incorrect branch is being used, as the proper check for app-vite is not present in the fetched code.

Quasar info:

Operating System - Darwin(21.4.0) - darwin/arm64
NodeJs - 16.14.2

Global packages
  NPM - 8.5.0
  yarn - 1.22.17
  @quasar/cli - 1.3.2
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.6.5 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.0.0-beta.13 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.13.5 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.31 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.0.14
  pinia - Not installed
  vuex - 4.0.2 -- state management for Vue.js
  vite - 2.9.1 -- Native-ESM powered web dev build tool
  eslint - 8.12.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  @quasar/quasar-app-extension-qmarkdown - 2.0.0-beta.4 -- Display inline markdown in your Quasar App
  @quasar/quasar-app-extension-testing-e2e-cypress - 4.1.0 -- A Quasar App Extension for Cypress e2e
  @quasar/quasar-app-extension-qpdfviewer - 2.0.0-alpha.5 -- QPdfviewer is an app extension for viewing PDF files

Error in v-on handler: "TypeError: handler.apply is not a function"

found in

--->

at src/examples/Html5Example4.vue

at src/components/ExampleCard.vue
at src/components/Hero.vue
at src/pages/Examples.vue


at src/layouts/MainLayout.vue
at src/App.vue

Hello, thank you Jeff for this fantastic extension.

I have a small problem, when I set type=html5 the pdf load ok but when I change to pdfjs the src used to load change and It miss get parameters:

src: http://pc02.internal.xxxx.com:6123/appbackend/index.php/publico/reports/movimientos?fechaAltaInicio=2020-11-18T23:00:00.000Z

And the request using pdfjs has changed to:

This works well with html5.

am I missing something?

PDFjs 4.x is out with some breaking changes, optimizations and bugfixes. 🚀

After upgrading quasar from 1.9.16 to ^1.11.3 pdfjs breaks on Chrome (based browser).
When using source:
statics/pdfjs/web/viewer.html?file=blob:https://reference-to-downloaded-blob

After roaming the internet, found it probably has to do with:
_"Chrome's XHR cannot handle file resources. Use local web server when you develop a web application for Chrome that uses XMLHttpRequest. PDF.js and files must be on the same web server due to CORS.

Also the extension's access to the 'file://' scheme is determined by the user-controlled 'Allow access to File URLs' checkbox."_

But then again, it's strange that it used to function properly in quasar 1.9.16.

I noticed your intentions to move away from pdfjs, so not expecting a fix. Just wanted to let you/ the community know this is an issue.

Hi,
Documentations: https://quasarframework.github.io/app-extension-qpdfviewer/docs
Error:
"App • ⚠️ Extension(@quasar/qpdfviewer): is not compatible with @quasar/app-webpack v3.5.3. Required version: ^1.0.0 || ^2.0.0

error Command failed with exit code 1."

Are you planning to make changes?

Thanks.

When opening a dialog with qpdfviewer I get following error (pdf is loaded):

<q-pdfviewer 
                 :error="errorWithPdf"
                 :src="src"
                 content-class="absolute  shorten-pdf"
                 v-model="show"
    ></q-pdfviewer>

  errorWithPdf() {
        return "test";
        // console.log("---evt", evt);
      }

If I remove the :error the error is doubled in cosole:

   <q-pdfviewer
                 :src="src"
                 content-class="absolute shorten-pdf"
                 v-model="show"
    ></q-pdfviewer>

Src for pdf is defined locally "../data/eContainerDemo/test.pdf".

I noticed that in QPdfviewer.js this string starts with a "/":
Line 82 : src: '/pdfjs/web/viewer.html?file=' + encodeURIComponent(prop.src)
This results in the content of pdfjs-directory not being found when using quasar build (error 404).
I was about to submit a issue or a pull request for that, when i noticed that the latest code in the repository is correct and at least 3 months old.

The funny thing is: When you do "yarn add @quasar/quasar-app-extension-qpdfviewer@next" you get the correct package (exactly one time!).
However, when you do "yarn add @quasar/[email protected]" you get the faulty package.
"quasar ext add @quasar/qpdfviewer@next" does also deliver the faulty package. unfortunately.

All commands result in a identical package.json and yarn.lock, every other project member will download the wrong package when they execute yarn install, as the url in yarn.lock seems to be the same.
The url in yarn.lock is: https://registry.yarnpkg.com/@quasar/quasar-app-extension-qpdfviewer/-/quasar-app-extension-qpdfviewer-2.0.0-alpha.3.tgz#a6f8d199190ab8681e5d337ca430a1adbcac74d5

Can you maybe reupload the package or do something?

Greetings!
Keep up the good work

If pdf is not found there is a button with Reload. It reloads the whole application. It'd be better to have a button only for reloading a file.

And the higher level could be a slot for custom component when the file is not found.

In the compiled application with the freshest packages of the quasar, the qpdfviewer error occurs on the ios device (and xcode emulator) and only in the assembled application, in dev mode it works fine.

Version:
"quasar": "1.12.13"
"@quasar/app": "2.0.0"
"@quasar/quasar-app-extension-qpdfviewer": "1.0.0-beta.8"

Hello,

I'd like to hide/remove the right panel button in the top right corner... any idea how to do it?

Thanks

UPDATE: currently I managed to hide the sidebar by commenting some code inside src/statics/pdfjs/web/viewer.html... but I'd prefere a more elegant way to do it... :P

So after I've printed a pdf the other time it will do nothing

I'm using electron v7.1.8
and the latest version of the pdf viewer

anyone knows how to fix this?

I tested the application in the browser it works perfectly, but on mobile (iphone 7: Chrome and Safari) it only displays the first page of the PDF, I can't scroll the content and access the other pages.

Is this behavior correct? How do I display the entire content on mobile?

configs:

quasar: ^2.6.2,
vuex: ^4.0.2

node: >= 12.22.1,
npm: >= 6.13.4,

@quasar/app-webpack: ^3.4.6,
@quasar/quasar-app-extension-qpdfviewer: ^2.0.0-alpha.5

Add prop title: not the filename
toggle buttons to show:print,download

Hello,
I want to display /download pdf html presentation.

First I download app

return axios({
   method: "get",
   url: URL,
   responseType: "blob",
 })
   .then((response) => {
     return {
       ...val,
       blob: response.data,
     };
   })
   .catch((_) => {
     onError(val);
   });

After that i save it and some other data related to indexDB.

  const { id } = dataToSave;
  return db.files.put(dataToSave, id);

I try open using few libs no results.
Also i have some standard code to run

const { title, blob, mimeType } = material;
 const url = window.URL.createObjectURL(blob);
 const a = document.createElement("a");
 a.style.display = "none";
 a.href = url;

 // the filename you want
 a.download = title;
 document.body.appendChild(a);
 a.click();

 setTimeout(() => {
   window.URL.revokeObjectURL(url);
   document.body.removeChild(a);
 }, 1000);

Now i use qpdfviewer
```

I open file saved as blob ans pass as prop.

  const { title, blob, mimeType, url, fileType } = material;
  const newBlob = new Blob([blob], { type: mimeType });
  console.log(blob, newBlob);
  const blobURL = window.URL.createObjectURL(newBlob);
  this.updatedSrc = blobURL;
  this.modalTmp = true;

On the first time fresh refresh page and download files. The file shows. When i refresh page/press  button that filter data fromIndexDB. file not shows up. That happens only on Ipad. 
Any workaround this will be much appreciated.

After installing:

quasar ext add @quasar/qpdfviewer@next

The following error:

Module not found: Can't resolve imported dependency "@quasar/quasar-app-extension-qpdfviewer/src/component/async.js"
Did you forget to install it? You can run: npm install --save @quasar/quasar-app-extension-qpdfviewer/src/component/async.js

in which the boot/qpdfviewer.js references:

import QPdfviewer from '@quasar/quasar-app-extension-qpdfviewer/src/component/async.js'

but in the Next branch it references:

import QPdfviewer from '@quasar/quasar-app-extension-qpdfviewer/src/component/QPdfviewer.js'

The need for a PDF renderer library

Currently, this extension only makes use of native capabilities and fallbacks of the browsers. Sometimes this is not enough, and we want to display the PDF somehow even if the browser can't render inline PDF, or maybe have control on the pdf viewer, provide custom UI for the viewer, etc. This is where PDF.js comes into play.

PDF.js

A general-purpose, web standards-based platform for parsing and rendering PDFs.

With this feature, full-blown document viewers could be built with Quasar.

Implementing it

This will be a huge improvement and will require a lot of work (compared to the work done with the current feature set). I found some resources that can give many ideas about implementing it in Vue, also provide a base point.

There is a repository that contains a Vue app with PDF.js demo. Also, there is a detailed series of posts named Building a PDF Viewer with Vue.js, which tells about the adventure of that demo repository.

Some ideas

One or more of these ideas can be implemented together.

• We can offer this feature set optionally with Prompts API to reduce the dependencies for those who don't want this.
• We can provide (a) separate component(s) that uses PDF.js while also keeping the current behavior separately.
  • We can provide a UI built with Quasar's lovely components over the rendered PDF. (Like app-extension-qmediaplayer does on the native media tags)
• We can add a prop to the current component to serve this feature set as a fallback(instead of the unsupported text which is the current last fallback).

Hello,

I have this issue and cannot use extension:

Extension(@quasar/qpdfviewer): is not compatible with @quasar/app v3.0.0-beta.25. Required version: ^1.0.0 || ^2.0.0

Thanks in advance

I Installed quasar/qpdfviewer into my quasar project and see the "Extension(@quasar/qpdfviewer): is not compatible with @quasar/app v3.0.3 Required version: ^1.0.0 || ^2.0.0" , How can I use this component, please help, Thank you.

I am considering to remove the PDFjs dependency and go back to just the HTML5 PDF Viewer (as it was originally). The latter is more light-weight, because it uses the internal PDF Viewer built into the browser. However, this excludes Electron/Capacitor/Cordova, etc. In which case, these platforms should use the PDFjs on their own, or an extension could be written to incorporate it.

Ever since the PDFjs dependency was added, this project has stalled out because of the issues with PDFjs.

Please voice your concerns and/or advice here.

when using the following:

<template>
  <div class="container">
    <q-pdfviewer
      v-model="show"
      src="assets/guide.pdf"
      content-class="absolute"
    />
  </div>
</template>

<script>
export default {
  name: 'UserGuide',
  data () {
    return {
      show: true
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-width: 400px;
  min-height: 600px;
  width: 100%;
  height: 100%;
}
</style>

I get the following warnings in the console:

Vue warn]: Invalid handler for event "onerror": got undefined
[Vue warn]: Invalid handler for event "onload": got undefined

emanating from this component. the pdf shows just fine

If error-string has a value it is not passed to component.

When i test the component in a SPA, all works OK. ("quasar dev")

When i try to test it in a PWA, same code and same file, it redirects to 404 page ("quasar dev --mode pwa")

if I inspect the code and take the URL https://localhost:8443/pdfjs/web/viewer.html?file=https%3A%2F%2Fstorage.googleapis.com... redirects to 404 page.

Any ideas?

"dependencies": {
"@quasar/cli": "^1.3.2",
"@quasar/extras": "^1.14.2",
"@vueuse/core": "^9.0.0",
"apexcharts": "^3.31.0",
"axios": "^0.27.2",
"core-js": "^3.6.5",
"firebase": "^9.6.10",
"getdomain": "^1.3.1",
"leaflet": "^1.8.0",
"leaflet-control-geocoder": "^2.4.0",
"leaflet-easybutton": "^2.4.0",
"leaflet-switch-basemap": "^1.0.4",
"leaflet.awesome-markers": "^2.0.5",
"leaflet.fullscreen": "^2.4.0",
"leaflet.locatecontrol": "^0.76.1",
"quasar": "^2.8.3",
"speakingurl": "^14.0.1",
"swiper": "^8.2.3",
"v-calendar": "next",
"vanilla-cookieconsent": "^2.8.8",
"vue": "^3.0.0",
"vue-currency-input": "^3.0.0",
"vue-gauge": "^1.0.3",
"vue-google-adsense": "^2.0.0",
"vue-gtag": "^2.0.1",
"vue-i18n": "^9.0.0",
"vue-router": "^4.0.0",
"vue-scriptx": "^0.2.5",
"vue-search-input": "^1.1.4",
"vue-social-sharing": "^4.0.0-alpha4",
"vue3-apexcharts": "^1.4.1",
"vuex": "^4.0.1"
},
"devDependencies": {
"@babel/eslint-parser": "^7.13.14",
"@quasar/app-webpack": "^3.5.7",
"@quasar/quasar-app-extension-qcalendar": "^4.0.0-beta.15",
"@quasar/quasar-app-extension-qpdfviewer": "^2.0.0-alpha.6",
"dotenv": "^16.0.3",
"eslint": "^7.14.0",
"eslint-config-standard": "^16.0.2",
"eslint-plugin-import": "^2.19.1",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-vue": "^7.0.0",
"eslint-webpack-plugin": "^2.4.0",
"workbox-webpack-plugin": "^6.0.0"
},

Somehow I can only view the first page of a PDF on Capacitor.

⚠️ Extension(@quasar/qpdfviewer): is not compatible with @quasar/app-webpack v3.6.2. Required version: ^1.0.0 || ^2.0.0

Can I get a certain page from a pdf file by useing javascript or typescript?

Hi,

I cloned this archive and switched to v2.0.0-alpha.6 branch, as I'd like to use QPDFViewer in my Quasar 2 SPA.

After cd docs, yarn and quasar dev, the test and documentation website runs on my Mac (Ventura 13.2.1, Quasar v2.11.8). However, I experience some issues on the examples page (/developing/using-qpdfviewer):

• Safari 16.3: The HTML5 Example 5 only shows four grey pages, the HTML5 with QDialog example also displays a grey page. I can see the usual floating panel at the bottom of the dialog. When I click on download, an empty PDF (pdf-test-9.pdf) with 0 Bytes gets downloaded. I do not see any warnings or errors in the JavaScript console when I open the dialog.
• Firefox 111.0.1: The page renders fine with all examples working, but at the same time eight separate windows with PDFs open in Preview application. Also, when I open the dialog with HTML5, the PDF is also opened separately in Preview.

In Chrome Version 111.0.5563.110 the page shows no problems. I am ready to give all information you could need to track this down.

Best regards
Dirk

Discussed in #122

Hi

I'm new to quasar and using the extension. Webpack shows me no love omitting my pdf and I get a 404 error. I'm assuming the path is not correct.

I'm running:
Running @quasar/cli v1.1.2
Running @quasar/app v2.0.8

In the build section of quasar.conf.js, I placed line publicPath: 'app-extension-qpdfviewer',

I have tried placing the pdf in directories:
/public/pdf
/src/assets

I've also tried using the '~' webpack prefix, still no joy.
My code is lifted from the qpdfviewer doc.

What an I doing wrong ? :

<template>
  <q-page class="flex flex-center">
    <q-pdfviewer
      v-model="show"
      type="html5"
      :src="updatedSrc"
      content-class="absolute"
    />
  </q-page>
</template>

<script>
export default {
  data () {
    return {
      show: true,
      src: 'assets/license.pdf'
    }
  },
  computed: {
    updatedSrc () {
      if (process.env.MODE === 'electron') {
        return '/' + this.src
      }
      return this.src
    }
  }
}
</script>

Hi @hawkeye64

Just letting you know the the adobe hosted pdfs are failing to load on the demo page.
They must have updated their content security policies.

Add button for printing the pdf.

It appears that when provided a blob instead of a regular URL, (see: https://forum.quasar-framework.org/topic/3551/quasar-qpdfviewer-v1-0-0-beta-2-release), the file name is some kind of UUID or similar. It would be nice to be able to specify the name.

fetchPDF (payload) {
      this.$axios.post('/inpatientPDFs/snr/download', payload, { responseType: 'blob' }).then(res => {
        // console.log('am i downloading?', res)
        const blob = new Blob([res.data], { type: res.data.type })
        const url = window.URL.createObjectURL(blob)
        pdfSrc = url // where pdfSrc is used in the :src parameter of the qpdfviewer
      }).catch(err => {
        console.log('or do i have an error?', err) // TODO beef up this
        this.$q.notify({ message: 'Error downloading PDF', type: 'negative', textColor: 'white', color: 'negative', icon: 'error', closeBtn: 'close', position: 'top' })
      })
    }

Is there a simple way to highlight text in the displayed PDF ?
I'm using the HTML5 viewer

Does anyone know what causes this error, it has something to do with the url(src) i am passing in

PDF.js v2.1.266 (build: 81f5835c)
Message: Setting up fake worker failed: "Cannot read property 'WorkerMessageHandler' of undefined".

When I enter http://localhost:8080/statics/pdf/pdf-test.pdf in browser the pdf displays

but when I enter this url as src I get this error

console errors:

Uncaught SyntaxError: Invalid left-hand side in assignment
viewer.js:1035 Uncaught (in promise) Error: An error occurred while loading the PDF.
at viewer.js:1035
(anonymous) @ viewer.js:1035
load (async)
(anonymous) @ pdf.js:12907
loadScript @ pdf.js:12904
loader @ pdf.js:10602
setupFakeWorkerGlobal @ pdf.js:10607
_setupFakeWorker @ pdf.js:10776
terminateEarly @ pdf.js:10690
onWorkerError @ pdf.js:10696
error (async)
_initialize @ pdf.js:10700
PDFWorker @ pdf.js:10653
getDocument @ pdf.js:9660
_callee7$ @ viewer.js:993
tryCatch @ viewer.js:2720
invoke @ viewer.js:2895
prototype. @ viewer.js:2763
asyncGeneratorStep @ viewer.js:332
_next @ viewer.js:334
(anonymous) @ viewer.js:334
(anonymous) @ viewer.js:334
open @ viewer.js:1048
webViewerOpenFileViaURL @ viewer.js:1882
webViewerInitialized @ viewer.js:1856
Promise.then (async)
run @ viewer.js:770
webViewerLoad @ viewer.js:258

is it correct that PDFjs is added inside statics?
it's 10 MB large. ( ﾟ▽ ﾟ*)

I am using pdf bucket to host my pdfs (let's say 'bucket.com/myfile.pdf').
And access them from another website.(this will be 'front.com').
The problem here is my site 'bucket.com' only accepts requests which has token in the header.
So, How can pass that token while using q-pdfviewer tag?

`export function pdf (resp) {
const myPromise = new Promise((resolve, reject) => {
const blob = new Blob([resp.data], { type: resp.data.type })
let url = (window.URL || window.webkitURL || window || {}).createObjectURL(blob)
var xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.responseType = 'blob'
xhr.onreadystatechange = (() => {
if (xhr.readyState === 4 && xhr.status == 200) {
resolve((window.URL || window.webkitURL || window || {}).createObjectURL(xhr.response))
// now url is ready
}
})
xhr.send()
})

return myPromise
}`

It was tricky to find a way how to position a pdf inside a QDialog. Because the bottom arrow of the pdf was hidden due to the QBar on the top of window (pdf is shifted out of the view area).

I don't know if it is a best way but was the only solution I found.

<!-- parent component -->
<template>
  <q-dialog :maximized="$q.screen.lt.md" @hide="onDialogHide" ref="mediaContentDialog">

    <q-card class="no-scroll" style="background: yellow; min-width: 80vw; min-height: 80vh;">

      <q-bar class="bg-brand-light">
        <h5 class="text-brand-text">{{title}}</h5>
        <q-space></q-space>
        <q-btn @click="hide" color="white" flat icon="close"></q-btn>
      </q-bar>

      <pdf-content :src="src" :title="title"></pdf-content>
    </q-card>
  </q-dialog>
</template>

<!-- children with q-pdfviewer --->
 <q-pdfviewer 
                 :src="src"
                 content-class="absolute shorten-pdf"
                 v-model="show"
    ></q-pdfviewer>

<style scoped>
  .shorten-pdf{
    height: calc(100% - 30px);
  }

Result:

Hope this information is helpful for users when positioning pdf inside a QDialog.

Hi! Thanks for this!!

I was just wondering instead of

<q-pdfviewer
      :value="true"
      :src="src"
      :error="onError"
      :load="onLoad"
      content-class="fit _container"
      inner-content-class="fit _container"
    />

isn't it more natural to have error and load be events like so:

    <q-pdfviewer
      :value="true"
      :src="src"
      @error="onError"
      @load="onLoad"
      content-class="fit _container"
      inner-content-class="fit _container"
    />

Do it supports pdf document annotation?

Demo links were fixed in README but stayed the same in repository description.

Broken link: https://quasarframework.github.io/app-extension-qpdfviewer/demo/dist/spa/#/
Working link: https://quasarframework.github.io/app-extension-qpdfviewer/