1.安装
npm install pdfh5
2.使用
<template>
<div id="pdf">
<div id="demo"></div>
</div>
</template>
<script>
import Pdfh5 from 'pdfh5'
import 'pdfh5/css/pdfh5.css'
export default {
data(){
return {
pdfh5: null,
newPdfUrl: ''
}
},
mounted() {
this.newPdfUrl = 'demo.pdf';
this.pdfh5 = new Pdfh5('#demo',{
pdfurl: this.newPdfUrl,
lazy:true
})
},
}
</script>
这样看到的pdf效果默认是显示第一页,剩下的页面部分显示空白,翻页能正常显示,不喜欢这样的效果,看了下代码,是控制了一页的高度,开始修改源码,找到pdfh5/js/pdfh5.js,注释updateAspectRatio方法里的代码:
updateAspectRatio: function() {
// this.setContainerY(this.getContainerX() / this.getAspectRatio());
},
完成。