rossta / vue-pdfjs-demo Goto Github PK

I cloned the repo and have been trying to understand it better. When I change the url in the .env file, the pdf displayed does not change.

Is there somewhere else I also have to make that change?

First, Thanks for the detailed blog post and creating the example to implement pdfjs in Vue. It really helped me understand lazy loading and abstract components in Vue.

It seems to break scrolling in other pages. I created a sample project adding an index page with long list and link to pdf viewer. If we navigate back to index, the scrolling doesn't work. Any pointers to issue is appreciated. Thanks.
https://github.com/santoshag/pdf-viewer

Great thanks for this powerful tool. Can I use this in my project? It's great if you can provide this on npm.

Thanks :)

Hiiiii, nice package made for pdf show. Here I want to use base64 input instead of url, but I'm unable to do that, please suggest me solution on that.

Package: vue-pdfjs-demo
1.1.9 • Public • Published 18 days ago
from: https://rossta.net/vue-pdfjs-demo

Getting this error on running the demo from branch tutorial/part-1-simple-document

Safari not working

Hi @rossta thanks for this resource, so far it has been working great for me.
I have noticed that some of the PDFs I am rendering are throwing this error, and sometimes stalling the page out completely. I don't know if this is related but the PDFs being loaded contain multiple pages of detail rich images.

[Vue warn]: You may have an infinite update loop in a component render function.
found in

---> <PDFPage> at src/components/PDFPageAdv.vue
       <ScrollingPage> at src/components/ScrollingPage.vue
         <ScrollingDocument> at src/components/ScrollingDocument.vue
           <PDFDocument> at src/components/PDFDocumentAdv.vue
             <PDFData> at src/components/PDFData.vue
               <PDFViewer> at src/components/PDFViewer.vue
                 <TextViewer> at src/components/TextViewer.vue
                   <FigurePage> at src/views/FigurePage.vue
                     <App> at src/App.vue
                       <Root>

A single page PDF doesn't appear to work in the tutorial part 1 configuration.

Solution that worked for me:
Replace:

  watch: {
    pdf(pdf) {
      this.pages = [];
      const promises = range(1, pdf.numPages).
        map(number => pdf.getPage(number));

      Promise.all(promises).
        then(pages => (this.pages = pages));
    },
  }

with

  watch: {
    pdf(pdf) {
      if (pdf.numPages == 1) {
        pdf.getPage(1).then(page => this.pages.push(page));
      } else {
        const promises = range(1, pdf.numPages).map(number =>
          pdf.getPage(number)
        );
        Promise.all(promises).then(pages => (this.pages = pages));
      }
    }
  },

I impressed with your developed demo in vuejs. I seen that you have used debug and set log some of placed but can you please help me how to access it. Any configuration for that?
I use npm run serve to run project.

The implementation draws everything in a canvas without the text layer. The official PDF.js demo does support text selection but the code is too complex. I was wondering if somebody has a minimalistic demo with the text layer.

You should destroy the page and render Task when the page unloads for better memory management .

BTW, love what you created. Taught me a lot!

How to user pdfjs render TextLayer?

hello,Do you support pdf editing?

After clone, npm install and npm run serve I get:

 ERROR  Failed to compile with 5 errors                                                                                                10:35:52

 error  in ./src/assets/icon-preview.svg

Module build failed (from ./node_modules/vue-svg-loader/index.js):
Error: 

Vue packages version mismatch:

- [email protected] (/Users/derek/Sites/vue-pdfjs-demo/node_modules/vue/dist/vue.runtime.common.js)
- [email protected] (/Users/derek/Sites/vue-pdfjs-demo/node_modules/vue-template-compiler/package.json)

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

    at Object.<anonymous> (/Users/derek/Sites/vue-pdfjs-demo/node_modules/vue-template-compiler/index.js:10:9)
    at Module._compile (node:internal/modules/cjs/loader:1108:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Module.load (node:internal/modules/cjs/loader:973:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.<anonymous> (/Users/derek/Sites/vue-pdfjs-demo/node_modules/vue-svg-loader/index.js:3:18)
    at Module._compile (node:internal/modules/cjs/loader:1108:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Module.load (node:internal/modules/cjs/loader:973:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at loadLoader (/Users/derek/Sites/vue-pdfjs-demo/node_modules/loader-runner/lib/loadLoader.js:18:17)
    at iteratePitchingLoaders (/Users/derek/Sites/vue-pdfjs-demo/node_modules/loader-runner/lib/LoaderRunner.js:169:2)

 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/PDFViewer.vue?vue&type=script&lang=js& 52:0-53 72:17-28
 @ ./src/components/PDFViewer.vue?vue&type=script&lang=js&
 @ ./src/components/PDFViewer.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.137:8080/sockjs-node ./node_modules/@vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.js

I solved this with npm install --save [email protected] to match the version of vue-template-compiler

Hi @rossta ! I really like what you did with the project.
PDF.js seemed pretty hard to translate into the Vue way and yet, your project is really well architectured.

I was just wandering if there was an easy way to implement the search functionality (as shown in the PDF.js demo).

Thanks a lot !

npm serve is wrong. correct: npm run serve

ERROR Failed to compile with 1 errors 11:48:11 PM

This dependency was not found:

• module in (webpack)/lib/node/NodeTargetPlugin.js

Hello @rossta, what's license of this project? Are you planning to release this as npm package?

Hi, Great Library by the way. Please could you provide guidance on how to enable printing PDFs using your library? That is the only missing feature for me to use it in personal project.

Do you know how get this working with a browser version of component. I tried doing an npm command:

"build:browser": "vue-cli-service build --target wc-async --name vue-pdfjs ./src/components/PDFViewer.vue"

this is shown how to do in the comments of this
I made a folder to demo it and my pdf was not displayed and the style is gone.

demo.html:

<div id="app">
      <vue-pdfjs :bytes="bytes"></vue-pdfjs>
  </div>
  <script src="https://unpkg.com/vue"></script>
  <script src="../dist/vue-pdfjs.js"></script>
  <script src="demo.js"></script>

demo.js:

var app = new Vue({
    el: '#app',
    data: {
        bytes:
        "JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog" +
        "IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv" +
        "TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K" +
        "Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg" +
        "L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+" +
        "PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u" +
        "dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq" +
        "Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU" +
        "CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu" +
        "ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g" +
        "CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw" +
        "MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v" +
        "dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G"
    }
  })

Hi,

git clone https://github.com/rossta/vue-pdfjs-demo
cd vue-pdfjs-demo
npm install
npm run serve

I had to update my vue to get the demo to run:

diff --git a/package.json b/package.json
index b5ffd0b..9ffc256 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "intersection-observer": "^0.5.1",
     "lodash": "^4.17.11",
     "pdfjs-dist": "^2.0.943",
-    "vue": "^2.6.3"
+    "vue": "^2.6.14"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.4.0",

I can see the number of pages:

... but the page content is not displayed.

In console we see this error:

Warning: getOperatorList - ignoring errors during "RenderPageRequest: page 0" 
task: "DataCloneError: Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope': 
function at() { [native code] } could not be cloned.".

Any idea on how to make the text selectable?

Thanks in advance