Vue 显示pdf
在项目中有个功能是显示pdf文档,这个文档是静态的。不是后台传过来的,最简单的方法就是放在iframe实现是最简单的写一个公共Vue用来展示pdf,根据传入的参数不同来展示不同的pdf文档需要注意的是,一定要将pdf文档放在static 静态文件夹下,才会生效。<iframe :src="src" id='iframebox' ref='pdfiframe' fr
·
在项目中有个功能是显示pdf文档,这个文档是静态的。不是后台传过来的,最简单的方法就是放在iframe实现是最简单的
写一个公共Vue用来展示pdf,根据传入的参数不同来展示不同的pdf文档
需要注意的是,一定要将pdf文档放在static 静态文件夹下,才会生效。
<iframe :src="src" id='iframebox' ref='pdfiframe' frameborder="0" scrolling="no"></iframe>
mounted () {
this.getPdfInfo()
this.changeIframeBox()
},
methods: {
getParams () {
try {
let pdf = JSON.parse(this.$route.query.pdf)
this.pdf = pdf
} catch (err) {
}
},
changeIframeBox () {
const iframebox = document.getElementById('iframebox')
const deviceWidth = document.documentElement.clientWidth
const deviceHeight = document.documentElement.clientHeight
iframebox.style.width = (Number(deviceWidth)) + 'px'
iframebox.style.height = (Number(deviceHeight)) + 'px'
},
getPdfInfo () {
let name = this.pdf
let src = 'static/pdf/' + name
this.src = src
}
}
changeIframeBox ()
函数是控制iframe全屏显示
getPdfInfo ()
配置iframe指向的地址
OK,pdf显示成功。
如果想要pdf在新页面打开,怎么搞?
当点击查看pdf文档的时候,设置一下在新窗口打开。
handleHelp () {
const {href} = this.$router.resolve({
path: '/pdf',
query: {
pdf: JSON.stringify(this.pdf)
}
})
window.open(href, '_blank')
},
OK,效果
更多推荐
已为社区贡献21条内容
所有评论(0)