<template>
|
<div class="m-pdf">
|
<div id="pdf-content"></div>
|
</div>
|
</template>
|
<script>
|
import Pdfh5 from 'pdfh5'
|
import 'pdfh5/css/pdfh5.css'
|
|
export default {
|
name: 'Pdfh5',
|
data () {
|
return {
|
pdfh5: null,
|
// 可引入网络文件或者本地文件
|
pdfUrl: this.$route.query.fileUrl
|
// 如果引入本地pdf文件，需要将pdf放在public文件夹下，引用时使用绝对路径（/：表示public文件夹）
|
}
|
},
|
mounted () {
|
console.log(this.pdfUrl)
|
this.initPdf()
|
},
|
methods: {
|
initPdf () {
|
// pdfh5实例化时传两个参数：selector选择器，options配置项参数，会返回一个pdfh5实例对象，可以用来操作pdf，监听相关事件
|
// pdfh5 = new Pdfh5(selector, options) goto初始到第几页，logo设置每一页pdf上的水印
|
this.pdfh5 = new Pdfh5('#report-content', {
|
pdfurl: this.pdfUrl,
|
goto: 1
|
// 设置每一页pdf上的水印
|
// logo: { src: require('@/assets/images/bus/icon_head@2x.png'), x: 420, y: 700, width: 120, height: 120 }
|
})
|
this.pdfh5.scrollEnable(true) // 允许pdf滚动
|
// 监听pdf准备开始渲染，此时可以拿到pdf总页数
|
this.pdfh5.on('ready', function () {
|
console.log('总页数:' + this.totalNum)
|
})
|
// 监听pdf加载完成事件，加载失败、渲染成功都会触发
|
this.pdfh5.on('complete', (status, msg, time) => {
|
console.log('状态:' + status + '，信息:' + msg + '，耗时:' + time + '毫秒')
|
})
|
}
|
}
|
}
|
</script>
|
