franckfreiburger / vue-pdf Goto Github PK
View Code? Open in Web Editor NEWvue.js pdf viewer
License: MIT License
vue.js pdf viewer
License: MIT License
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
How to achieve PDF zoom in and out
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
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
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>
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.
I am getting an error when using the component.
Failed to mount component: template or render function not defined.
报错信息如下:
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 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.
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 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.
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
Hi,
is it possible to render multiple pages at once?
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'.
Hi ,
I am new to javascript.
Is there a step by step on how to use this component.
Thanks in advance.
打包完成后,在正式环境下,浏览器报错:
The provided value 'moz-chunked-arraybuffer' is not a valid enum value of type XMLHttpRequestResponseType.
----chrome 60.0.3112.113
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
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.
你好 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/目录下的,这是什么原因?
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.
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.
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.
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 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...
what should i do
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?
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 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").
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.
hi, thank you provide this awesome vue plug!
I want to show the total number of pages, how to get it
I tried the jsfiddle demo but it isn't working: https://jsfiddle.net/9zm9c1sf/24/
Is there another jsfiddle that shows this in action?
I want to view pdf by http post method because the request has some parameters,is it supported?Thank you!
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.)
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.
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 ?
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.
Do you have some advice?
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?
otherwise there will be an vue warn.
Hello,I hava a question, In Android's WECHAT,the vue-pdf may flash back when rendered,but in ios is normal
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)
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.
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?
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%
vertically
I needs you help, please tell me how meet customer questions?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.