franckfreiburger / vue-pdf Goto Github PK

I follow the instructions but I got error in console:

Unknown custom element:

I registered this component in main.js with Vue.component('vue-pdf', pdf)
but error still appers...

The current version of the component does not expose the loaded PDF docs table of contents.
I am building a PDF book library with VUE and that would really help me out.

Hi,

is it possible to render multiple pages at once?

I am getting an error when using the component.

Failed to mount component: template or render function not defined.

打包完成后，在正式环境下，浏览器报错：
The provided value 'moz-chunked-arraybuffer' is not a valid enum value of type XMLHttpRequestResponseType.
----chrome 60.0.3112.113

Sorry for disturbing you, but it appears and annoys me. After update the lastest version, the console report this,
' Error in mounted hook: "TypeError: Cannot read property 'setProp' of undefined"

found in',
'Error in event handler for "resize": "TypeError: Cannot read property 'getResolutionScale' of undefined',
What should I do? I use npm

报错信息如下：
selector.js?type=script&index=0!./node_modules/_vue-pdf@3.1.2@vue-pdf/src/pdf.vue:155 Uncaught SyntaxError: Invalid regular expression flags
at Object../node_modules/_babel-loader@7.1.2@babel-loader/lib/index.js!./node_modules/_vue-loader@13.7.0@vue-loader/lib/selector.js?type=script&index=0!./node_modules/_vue-pdf@3.1.2@vue-pdf/src/pdf.vue (app.js:1245)
at webpack_require (app.js:708)
at fn (app.js:113)
at eval (pdf.vue:1)
at Object../node_modules/_vue-pdf@3.1.2@vue-pdf/src/pdf.vue (app.js:3437)
at webpack_require (app.js:708)
at fn (app.js:113)
at eval (selector.js?type=script&index=0!./src/pages/list/pdfShow.vue:2)
at Object../node_modules/_babel-loader@7.1.2@babel-loader/lib/index.js!./node_modules/_vue-loader@13.7.0@vue-loader/lib/selector.js?type=script&index=0!./src/pages/list/pdfShow.vue (app.js:1435)
at webpack_require (app.js:708)

I was prompted to a mistake when loading PDF, seems to be caused by the font, I use Chinese fonts here, how should I set it?

Warning: Error during font loading: CMap baseUrl must be specified, see "PDFJS.cMapUrl" (and also "PDFJS.cMapPacked").

How to achieve PDF zoom in and out

In just, my project suddenly report error with Error in mounted hook: "TypeError: Cannot read property 'setProp' of undefined" found in vue-pdf.vue... I don't know what to do now, Wait for your reply。 >﹏< ...

Do you have some advice?

what should i do

Hi!

I'm using vue-pdf to render large pdf files of architectural plans. Those plans always contain embeded fonts that PDF.js can't (more like won't) render properly.
There are also some other - smaller - issues with PDF.js that I won't go into.

However, Foxit's WebPDF library seems to offer superior accuracy and compatibility with pdf features compared to PDF.js.

It also is available free (though you have to sign up to remove a watermark, which is free also) and the code is available through github. Someone as also published an npm package, but I'm having trouble installing it.

EDIT: Forgot the link to the Github repo.
Link to WebPDFjs repo

Link to Foxits article about WebPDF.

In the bottom of that article, they mention that WebPDF offers itself as a drop-in replacement for PDF.js.
I already dabbled changing it to other PDF.js based components of mine and it seemed to work really well.

I'm going to see if dropping it to PDF.js's place in vue-pdf is doable. If it is, I could make a pull request,
but since this would be a big change in the back-end, forking vue-pdf could be a better option.

I would appreciate your thoughts on this.

EDIT:

I'm now running into a problem, there doesn't seem to be much public documentation on WebPDFjs. My Googlefu is also failing because most results are for PDF.js.

The "drop-in-ness" of WebPDFjs is also starting to morph into replacing PDF.js'es files and not doing any modifications to vue-pdf.

When loaded as the following:

<template>
  <pdf v-bind:src="_document" />
</template>

<script>
  import pdf from 'vue-pdf';
  export default {
    components: {
      pdf
    },
    _document: {
      data: "..."
    }
  }
</script>

I get the following error:

[vue-router] Failed to resolve async component default: SyntaxError: Unexpected token <
[vue-router] uncaught error during route navigation:
/Users/betacar/Code/JavaScript/project/node_modules/vue-pdf/src/pdf.vue:1
(function (exports, require, module, __filename, __dirname) { <template>
                                                              ^
SyntaxError: Unexpected token <
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at r (/Users/betacar/Code/JavaScript/project/node_modules/vue-server-renderer/build.js:5812:16)
    at Object.<anonymous> (server-bundle.js:1980:18)
    at __webpack_require__ (server-bundle.js:27:30)
    at Object.47 (0.server-bundle.js:35:66)
    at __webpack_require__ (server-bundle.js:27:30)
    at Object.44 (0.server-bundle.js:9:3)
    at __webpack_require__ (server-bundle.js:27:30)

Am I missing something?

I can view the pdf on chrome and firefox but not safari. I also tried safari on my iphone 6s (with latest IOS installed) and still no luck. The pdf just doesn't appear.

In my project, the pdf component's progress event just return 'NaN' or '1' that I can't use the value for monitoring the pdf document loading progress.
See the phenomenon below:
In the pdf.vue source file, the parameter status in loadingTask.onProgress method has a total property whose value is 'undefined', so the ratio variable is undefined too and the 'onProgress' event method passes on an NaN with 'Math.min(ratio, 1)'. Here's the printscreen:

And next time, the 'onProgress' method returns value '1', see the printscreen:

It seems that something was wrong when calculating the loading progress of the pdf document.

Getting this error when I go to another component and come back to the component that includes the pdf. It works fine on first visit to the component.

Error: Worker was destroyed at _fetchDocument (eval at <anonymous> (app.js:6530), <anonymous>:2541:27) at eval (eval at <anonymous> (app.js:6530), <anonymous>:2527:12) at <anonymous>

I tried to reproduce it with this jsfiddle, but couldn't get the same error...

Any ideas?

We have an API endpoint that returns us the binary file ('content-type': 'binary/octet-stream') of a PDF. However, when I pass the blob response to the component, several different errors are displayed on the developer's console:

Error: Invalid XRef stream header
pdf.worker.js:355     at error (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:1256:17)
    at XRef_readXRef [as readXRef] (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:22222:29)
    at XRef_parse [as parse] (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:21892:28)
    at PDFDocument_setup [as setup] (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:30797:17)
    at PDFDocument_parse [as parse] (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:30686:12)
    at http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:40459:28
    at Promise (<anonymous>)
    at LocalPdfManager_ensure [as ensure] (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:40454:14)
    at LocalPdfManager.BasePdfManager_ensureDoc [as ensureDoc] (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:40406:19)

pdf.worker.js:346 Warning: Indexing all PDF objects

pdf.worker.js:354 Error: Bad FCHECK in flate stream: 120, 253
pdf.worker.js:355     at error (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:1256:17)
    at FlateStream (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:2870:23)
    at Parser_makeFilter [as makeFilter] (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:5734:18)
    at Parser_filter [as filter] (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:5701:21)
    at Parser_makeStream [as makeStream] (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:5690:21)
    at Parser_getObj [as getObj] (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:5358:47)
    at XRef_fetchUncompressed [as fetchUncompressed] (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:22309:28)
    at XRef_fetch [as fetch] (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:22272:26)
    at XRef_fetchIfRef [as fetchIfRef] (http://localhost:3030/_nuxt/7f662a37670c93fa585a.worker.js:22255:19)

pdf.worker.js:346 Warning: Invalid stream: "Error: Bad FCHECK in flate stream: 120, 253"

The template is very simple:

<template>
  <pdf v-bind:src="report" />
</template>

<script>
  import axios from 'axios';
  import pdf from 'vue-pdf';

  const api = axios.create({
    baseURL: `https://api.ourdomain.com/v1`,
    responseType: 'blob'
  });

  export default {
    components: {
      pdf
    },
    async asyncData(ctx) {
      const {params: {id}, query: {uid, rid}} = ctx;

      let url = `/report/${id}`;
      const params = {
        media: 'pdf',
        uid, rid
      };

      const blob = await api.get(url, {params}).then(response => {
        return {data: response.data};
      });

      return {
        report: blob
      }
    }
  }
</script>

Pretty sure I'm missing something.

When I try loading vue-pdf in my App.Vue file, I get an odd looking error:

 import pdf from 'vue-pdf'
 export default {
     components: {
	 pdf	 
     },
...
}

TypeError: "exports" is read-only

I don't have jslint enabled. Any ideas as to what might be causing this? It's preventing me from being able to use vue-pdf, which looks really cool.

it seems that the resizeSensor hooks give density independent pixels... when ideally we'd rather have a canvas that displays at 840px instead of 420px on a 2x pixel ration phone.

This would help with clarity on 2x displays and pinch to zoom.

The current work around is to set the width: 200% and then transform: scale(0.5), with the container having margin-bottom: -100%

My PDF is a contract, and the last page has a handwritting signature that was not draw and then reported incorrectly

pdf.worker.js?5381:1077 Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope': function nonSerializableClosure() {
return nonSerializable;
} could not be cloned.
at Promise.resolve.then.then.comObj.postMessage.sourceName (webpack-internal:///2:1077:18)
at
Promise.resolve.then.then.comObj.postMessage.sourceName @ pdf.worker.js?5381:1077
Promise resolved (async)
MessageHandler._onComObjOnMessage @ pdf.worker.js?5381:1076

I get an empty canvas when I try to reproduce the readme example.

<template>
  <div id="app">
    <pdf
      src="https://cdn.mozilla.net/pdfjs/tracemonkey.pdf"
    ></pdf>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  name: 'App',

  components: { pdf }
}
</script>

I also tried to pass a local pdf and a base64 pdf with no luck.

Thank you for your time.

vertically

I use "vue-pdf": "^2.0.3" in the vue spa project。After packing,on the phone, from did not use vue-pdf page(B page) to use vue-pdf page(A page),A page did not execute any code(alert , document.titile='123123'......),and no any DOM.]

when i open the index.html in PC Google Chrome， Failed to construct 'Worker': Script at 'file:///C:/Users/huhai/Desktop/1.0/2a59ae14c7719d1a21eb.worker.js' cannot be accessed from origin 'null'.

While the pdf viewer works well in local, I have an issue when building my application and serving it over IIS via an Asp.Net application. For some reason it tries to retrieve worker.js as an absolute path (/) while it should be relative : it tries to retrieve http://server-name/hash.worker.js instead of http://server-name/application-name/hash.worker.js

/3bc5b590ef81019703f0.worker.js
Failed to load resource: the server responded with a status of 404 (Not Found)

Note : when building I get this structure :

wwwroot
| - [hash].worker.js
| - static
    | - js
        | - 0.[hash].js
        | - app.[hash].js
        | - manifest.[hash].js
        | - vendor.[hash].js

It seems like worker.js is almost equivalent to 0.js (almost the same size for the .js, .js.gz and .js.map, just slighly lighter for the 0.js files). But including it won't change anything, it still doesn't work.

EDIT : I guess this is a webpack issue, but I don't understand why it is served under the "publicPath" repository and not the usual directory used by everything else. The actual question is : Why is worker.js generated under the public path rather than the dist path ? And why is it not integrated in the vendor.js bundle ?

Hello,I hava a question, In Android's WECHAT,the vue-pdf may flash back when rendered,but in ios is normal

Multiple PDFs do not work with Element-UI versions later than 1.0.0-rc5.

Working with element-ui 1.0.0-rc5
Not working with element-ui 1.0.0-rc6

I needs you help, please tell me how meet customer questions？

I think this is probably an issue with newer versions of Vue.js. In order to listen to emitted events for num-pages and page-loaded I need to use @numPages and @pageLoaded.

I'm using Vue 2.5.3.

hi, thank you provide this awesome vue plug!
I want to show the total number of pages, how to get it

你好 FranckFreiburger 你的vue-pdf组件很强大，但是最近我碰到一个问题，因此我一宿没睡。

因为这句话：

 H432：  PDFJS.CustomStyle.setProp('transform-origin', annotationLayerElt, '0 0');

报错了下面这几个错误

  1.Error in mounted hook: "TypeError: Cannot read property 'setProp' of undefined"

  found in---> <Pdf> at D:\VUE\vue-admin-master_print\node_modules\vue-pdf\src\pdf.vue

  2.TypeError: Cannot read property 'setProp' of undefined
    at new PDFJSWrapper (308:394)

  3[Vue warn]: Error in event handler for "resize": "TypeError: Cannot read property 'getResolutionScale' 
  of undefined"

  found in   <ResizeSensor> at D:\VUE\vue-admin-master_print\node_modules\vue-resize-
  sensor\src\resize-sensor.vue
  4.TypeError: Cannot read property 'getResolutionScale' of undefined

我把这句话注释掉以后，问题解决了。一切都好了，所以我想问下，这行代码是什么意思啊？
会不会有什么风险？

My English is not good, if you need me to use youdao, such as this sentence

还有一个问题，为什么我用npm run build打包的时候会在dist文件夹当前目录中多出一个```

dca101de88831a9014f6.worker.js 文件
正常应该在./staic/js/目录下的，这是什么原因？

I keep getting the error "this.pdf is undefined" and the pdf is not rendered.

Stack trace:

[Vue warn]: Error in render: "TypeError: setting getter-only property "props""

found in

---> <Pdf> at node_modules/vue-pdf/src/pdf.vue
       <ShowPdf> at app/javascript/packs/ShowPdf.vue
         <Root>
vue.esm.js:578
TypeError: setting getter-only property "props"
Stack trace:
normalizeProps@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:39638:3
mergeOptions@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:39710:3
initExtend/Vue.extend@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:43026:19
createComponent@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:42428:12
_createElement@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:42656:15
createElement@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:42593:10
initRender/vm._c@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:42709:42
render@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:37832:7
renderMixin/Vue.prototype._render@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:42767:15
updateComponent@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:41030:18
get@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:41380:13
Watcher@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:41369:7
mountComponent@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:41037:3
./node_modules/vue/dist/vue.esm.js/</Vue$3.prototype.$mount@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:46722:10
./node_modules/vue/dist/vue.esm.js/</Vue$3.prototype.$mount@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:49098:10
init@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:42358:7
createComponent@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:43805:9
createElm@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:43753:9
createChildren@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:43879:9
createElm@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:43781:9
patch@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:44327:9
lifecycleMixin/Vue.prototype._update@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:40912:16
updateComponent@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:41030:7
get@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:41380:13
run@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:41457:17
flushSchedulerQueue@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:41219:5
nextTick/<@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:40078:9
flushCallbacks@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:39999:5
vue.esm.js:1717
[Vue warn]: Error in mounted hook: "TypeError: element is undefined"

found in

---> <Pdf> at node_modules/vue-pdf/src/pdf.vue
       <ShowPdf> at app/javascript/packs/ShowPdf.vue
         <Root>
vue.esm.js:578
TypeError: element is undefined
Stack trace:
set@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:15577:7
PDFJSWrapper@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:3876:2
mounted@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:3941:14
callHook@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:41160:9
insert@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:42383:7
invokeInsertHook@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:44157:9
patch@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:44376:5
lifecycleMixin/Vue.prototype._update@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:40912:16
updateComponent@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:41030:7
get@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:41380:13
run@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:41457:17
flushSchedulerQueue@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:41219:5
nextTick/<@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:40078:9
flushCallbacks@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:39999:5
vue.esm.js:1717
Object { data: ArrayBuffer, status: 200, statusText: "OK", headers: {…}, config: {…}, request: XMLHttpRequest }
ShowPdf.vue:68
[Vue warn]: Invalid prop: type check failed for prop "src". Expected String, Object, got Uint8Array.

found in

---> <Pdf> at node_modules/vue-pdf/src/pdf.vue
       <ShowPdf> at app/javascript/packs/ShowPdf.vue
         <Root>
vue.esm.js:578
[Vue warn]: Error in callback for watcher "src": "TypeError: this.pdf is undefined"

found in

---> <Pdf> at node_modules/vue-pdf/src/pdf.vue
       <ShowPdf> at app/javascript/packs/ShowPdf.vue
         <Root>
vue.esm.js:578
TypeError: this.pdf is undefined
Stack trace:
src@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:3904:4
run@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:41471:11
flushSchedulerQueue@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:41219:5
nextTick/<@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:40078:9
flushCallbacks@http://goodwill.zense.co.in/packs/application-7bd1b2a63648724049c0.js:39999:5
vue.esm.js:1717

On inspection and a bit of tweaking, I found that the follow piece of code is the root of the problem:

mounted: function() {
		var canvasElt = this.$el.childNodes[0];
		var annotationLayerElt = this.$el.childNodes[1];

logging this.$el to the console reveals an empty childNodes list which makes sense according to how Vue works since the DOM will not be loaded until the mounted function is completed.

Any ideas then why was it working earlier but not now?

import pdf from 'vue-pdf'
 
export default {
  components: {
    pdf
  }
}

"webpack": "^2.2.1",
"vue-pdf": "^1.2.0",

error url : pdf.vue?196f:410

module.exports = { ×
components: {
'resize-sensor': resizeSensor,
},

detail:
Uncaught TypeError: Cannot assign to read only property 'exports' of object '#'
at Object.eval (eval at (app.js:6229), :232:16)
at eval (eval at (app.js:6229), :311:30)
at Object. (app.js:6229)
at webpack_require (app.js:687)
at fn (app.js:106)
at eval (eval at (app.js:6112), :7:3)
at Object. (app.js:6112)
at webpack_require (app.js:687)
at fn (app.js:106)
at eval (eval at (app.js:6236), :2:66)

Hi Franck,

Re the zoom functionality seen in the main pdf.js demo (https://mozilla.github.io/pdf.js/web/viewer.html).

Can vue-pdf currently use that functionality or am I mistaken in thinking that currently it doesn't.

Assuming that it doesn't do you have any plans on when it will be integrated or ideas on how I could implement it myself?

Regards

Jon

I tried the jsfiddle demo but it isn't working: https://jsfiddle.net/9zm9c1sf/24/

Is there another jsfiddle that shows this in action?

Hi,

Great work on vue-pdf. Exactly what I need. However, I have an issue with setting the style. When I add a width, the pdf resizes. When I add a height, it doesn't. It also doesn't work in the fiddle. Probably a (very small) bug?

I see there is a to do of allowing access to the text content of the page, I was wondering if this is being worked on/how far along it is? I have been looking for the ability to tie in pdfs into my vuejs components, but I do need the ability to access the text content of PDFs. Otherwise this project looks promising and really one of the only solutions to my issue.

otherwise there will be an vue warn.

This is not page #1 (Chrome 62)
https://fiddle.jshell.net/fossfiddler/5k4ptmqg/152/show/light

Also the first page doesn't render on iphone emulator iOS 11 iPhone 6, or android emulator N5 API 26. On iphone I can still flip the page and it works well afterwards.

Btw, HiDPI support looks great!

Also, jsfiddle hot tip, adding /show/light to the url has chromeless mode... not /show/light/ that makes all the difference, yes they will redirect, but if they don't you won't get the chromless version. And it only works on the second load, after getting a cookie apparently.

before, ther webpack version is 2.6.1 in vue-cli, the vue-pdf version is 1.2.4, there is no problem. but now, report error. I deleted the relevant code width 'setProp' in vue-pdf.vue. It's not wrong. But it's too much trouble. I have some pictures, you can look at it. (I hope you can solve this problem quickly.)

Steps to reproduce

$ vue init webpack test

Complete steps. (Using standalone build and npm.)

$ cd test
$ npm install -S vue-pdf

Add
import pdf from 'vue-pdf'
to src/main.js

Build with minimization enabled
$ ./node_modules/.bin/webpack -p --config build/webpack.prod.conf.js

Observe UglifyJS error:

ERROR in static/js/app.6700a7c5602062172c87.js from UglifyJs
Unexpected token: punc (() [node_modules/vue-pdf/src/pdf.vue:487,0][static/js/app.6700a7c5602062172c87.js:1,23252]

I'm far from an expert on webpack and related tooling such as babel, and frankly I have no idea why this happens.

I want to view pdf by http post method because the request has some parameters,is it supported?Thank you!

Hi ,

I am new to javascript.

Is there a step by step on how to use this component.

Thanks in advance.

When opening the pdf view the first time, the browser console shows disturbing warnings and messages:

pdf.js?013a:2840 GET http://localhost:8080/app.worker.js PDFWorker_initialize @ pdf.js?013a:2840PDFWorker @ pdf.js?013a:2813getDocument @ pdf.js?013a:2264PDFJSWrapper.loadDocument @ pdf.vue?997e:386mounted @ pdf.vue?997e:501callHook @ vue.common.js?e881:2534insert @ vue.common.js?e881:3361invokeInsertHook @ vue.common.js?e881:5179patch @ vue.common.js?e881:5343Vue._update @ vue.common.js?e881:2301updateComponent @ vue.common.js?e881:2417get @ vue.common.js?e881:2756run @ vue.common.js?e881:2826flushSchedulerQueue @ vue.common.js?e881:2593(anonymous function) @ vue.common.js?e881:654nextTickHandler @ vue.common.js?e881:601
pdf.js?013a:344 Warning: Setting up fake worker.
pdf.worker.js?1385:24096The provided value 'moz-chunked-arraybuffer' is not a valid enum value of type XMLHttpRequestResponseType.

Hi,
Great lib many thanks.

I'm getting a base 64 stream of a PDF from my API. I tried getting the data input working but that failed so looking at the source for pdf.js it seems that using an ArrayBuffer on the src input allows this. I got it working fine however I end up with a Vue warning in the console saying about data types. The pdf displays but there is the warning.

To fix it I modified the source to change the src props, line 441, I added ArrayBuffer to the permitted types. Now no warning.

Could that be added to the code please?

Also did you intend doing any code for zooming ?

Regards

Jon

what should i do?

Changing pages quickly breaks the component permanently. If you listen to @error you'll get:

Error: Cannot use the same canvas during multiple render() operations. Use different canvas or ensure previous operations were cancelled or completed.
    at InternalRenderTask_initializeGraphics [as initializeGraphics] (api.js:2227)
    at api.js:894
    at <anonymous>

Steps to reproduce

1. Use Chrome 62, vue-pdf >=1.2, <=3.1
2. visit https://fiddle.jshell.net/fossfiddler/5k4ptmqg/149/
3. click in the input box, make sure the cursor is ready for input
4. press and hold up arrow till you reach page 14
5. If page 14 loaded, refresh the page, go to MacOS Settings -> Keyboard -> Key Repeat set it to "fast" and try again this time going backwards as well after going forward.

quod erat demonstrandum:
https://fiddle.jshell.net/fossfiddler/5k4ptmqg/149/

Expected result:
Page 14 should load

Actual result:
Page loading completely breaks after a certain page and does not come back

Workarounds:
throttling the page change with debounce or throttle

if you try to restart the component you may get this error aswell:

pdf.worker.js?1385:13862 Uncaught (in promise) Error: Request was aborted
    at ChunkedStreamManager_abort [as abort] (pdf.worker.js?1385:13862)
    at NetworkPdfManager_terminate [as terminate] (pdf.worker.js?1385:41380)
    at wphTerminate (pdf.worker.js?1385:25059)
    at eval (pdf.worker.js?1385:1081)
    at <anonymous>