Vue 显示pdf

雨点打透心脏的1/2处 2022-05-13 07:04 741阅读 0赞

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

[70]: /images/20220513/541dd93a59e9490d947a2be1278a6914.png

发表评论取消回复

表情：

评论列表（有 1 条评论，741人围观）

蒲公英云5276A0V铁粉 2022-08-19 08:01

用iframe去显示pdf就不能禁止用户去复制pdf的内容

相关阅读

相关 vue下载pdf

pdf功能下载，相信只要是开发，都遇到过这个功能，直接上代码：使用此方式时，vue需要安装模块： npm install html2can

傷城~/ 2023年08月17日 15:18/ 0 赞/ 156 阅读

相关 pdf文件显示水印 vb_使用VB.NET显示PDF

pdf文件显示水印 vb PDF files have an internal document format that requires a software object

以你之姓@/ 2022年12月06日 15:35/ 0 赞/ 302 阅读

相关网页如何使用pdf.js显示PDF文档

1.下载pdf.js [前往官网下载pdf.js][pdf.js] 2.使用psf.js 将下载的文件解压，会得到2个文件夹，build和web文件夹，将文件放到项

我不是女神ヾ/ 2022年12月05日 15:27/ 0 赞/ 370 阅读

相关 vue 预览pdf

<embed :src="previewSrc" type="application/pdf" width="1200px"

偏执的太偏执、/ 2022年10月05日 09:45/ 0 赞/ 431 阅读

相关 Vue PDF文件预览vue-pdf

引用: npm install --save vue-pdf template代码: ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.pn

刺骨的言语ヽ痛彻心扉/ 2022年09月01日 08:39/ 0 赞/ 454 阅读

相关实现分页显示pdf

<Modal title="" v-model="previewContract" :width="1200"> <div slot="footer">

比眉伴天荒/ 2022年08月30日 05:23/ 0 赞/ 311 阅读

相关 Vue 显示pdf

在项目中有个功能是显示pdf文档，这个文档是静态的。不是后台传过来的，最简单的方法就是放在iframe实现是最简单的写一个公共Vue用来展示pdf，根据传入的参数不同来展

雨点打透心脏的1/2处/ 2022年05月13日 07:04/ 0 赞/ 742 阅读

相关 winform 显示PDF文件

C\显示PDF文件,winform打开PDF文件并在窗体中显示 1.在工具箱中添加Adobe提供的ActiveX控件，如图所示： ![Image 1][] 选择com组件

迷南。/ 2022年04月01日 08:49/ 0 赞/ 329 阅读

相关 winForm pdf显示转换图片

最近弄了一个项目，需要读取本机的pdf文件并转换成图片放置到另外一个文件夹下，现在把代码分享下：一、看看如何读取本机的pdf文件到窗体中

雨点打透心脏的1/2处/ 2022年04月01日 08:42/ 0 赞/ 324 阅读

相关 Vue导出PDF

一、下载 cnpm i -S html2canvas jspdf html2canvas:将页面转化为图片 jspdf:将图片生成PDF 二、创建html

叁歲伎倆/ 2021年07月25日 12:36/ 0 赞/ 578 阅读