Comments (6)
Heres a reproduction repo.
https://github.com/disitec/vue-pdf-issue-repro
from vue-pdf.
I've currently got the same issue with just the JSfiddle in the readme (here: https://jsfiddle.net/fossfiddler/5k4ptmqg/145/)
The page will render the page numbers and corresponding input, but the Canvas is blank. If you resize the window it'll load the PDF correctly. I've had similar issues when trying to integrate it into my current project.
After some Googling, it seems there could be an issue with Vue 2 and the <canvas>
element, but the solutions I've found to that are not appropriate for my configuration (more info here: https://laracasts.com/discuss/channels/vue/vue-interfering-with-html5-canvas-somehow)
Tested in Chrome 64.0.3282.119 & Firefox 57.0.4 on OSX High Sierra (10.13.3).
from vue-pdf.
Is there any error in the browser's console ?
from vue-pdf.
Nope, no console errors on first load or the window resize.
It seems that once it's all loaded you can change the display or opacity property on the Canvas element using DevTools and it'll render it correctly too - though I've not been able to get that working programmatically. It seems to be anything that forces the canvas to redraw.
from vue-pdf.
Managed to get a hacky fix sorted:
<template>
<div id="app">
<div :style="{ maxWidth: pdfWidth }">
<pdf
src="https://cdn.mozilla.net/pdfjs/tracemonkey.pdf"
@loaded="updateWidth"
/>
</div>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
name: 'App',
components: { pdf },
data() {
return {
pdfWidth: '99%'
}
},
methods: {
updateWidth: function() {
var that = this;
setTimeout(function() {
that.pdfWidth = '100%';
}, 1000);
}
}
}
</script>
Just need to create a wrapper (the PDF component's width is 100%) with a slightly smaller width on it by default, then use a setTimeout called after the document has loaded to change the wrapper size and force a re-render.
It's not ideal (and my Vue knowledge isn't great) but it works :)
from vue-pdf.
@fincardy, please try v3.1.4+ without your wrapper
from vue-pdf.
Related Issues (20)
- 微前端子应用加载 vue-pdf 时报跨域问题 HOT 2
- PDF切换页面的时候会一闪一闪的,体验很差
- pdf 渲染高度超出屏幕范围,怎么查看屏幕之外的部分
- 项目引入vue-pdf
- pdfRender.cancel().catch(function(err) , undefined (reading 'catch')" HOT 4
- TrueType Collection does not contain "DCWGQU+CambriaMath" font.
- when the window.devicePixelRatio less than 1,the pdf is vague.
- 、
- vue2 + vite require is not defined
- vue2项目编译报错 HOT 2
- 已解决print后字体乱码问题 HOT 1
- 改变视图大小,拖拉窗口会报错
- 使用插件时而出现跨域问题 HOT 1
- 预览带印章的那页,印章展示是不透明的,源文件是透明的,How to fix it!!!!
- pdf花屏:大部分文件正常展示,只有个别文件有问题,如图,有遇到的大佬看到,给个思路。 HOT 1
- 抱歉,未找到浏览器 Sorry, browser not found
- 与@vue/cli-service 5.x 不兼容 HOT 3
- pdf不能预览PDF的电子发票,比如打车发票
- vue-pdf突然不能用了,是跨域了?
- 请问支持VUE3吗 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-pdf.