Vue 显示pdf

在项目中有个功能是显示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,效果
这里写图片描述

猜你喜欢

转载自blog.csdn.net/hani_wen/article/details/82623648