vue pdf下载及预览（移动端）

本文使用的是 vue-pdf，其实还有其他的很多比如pdf.js，只不过觉得这个和vue结合了应该不用下载一堆东西，直接npm install就可以，所以采用vue-pdf来撰写pdf下载及预览。

无论是预览还是下载，都需要安装vue-pdf

先看下效果：

1、安装vue-pdf

npm install --save vue-pdf

2、在需要的组件里面引用

import pdf from 'vue-pdf'

components: {pdf},

3、在需要的vue文件中引入vue-pdf，pdf引入以及使用的位置，如下图：

一、pdf下载

1、先在template中定义一个下载按钮，添加事件

下载

 2、methods中定义方法：

gotoOption (val, item, index) {
      if (val === 'collect') {
        this.collectReport(item, index)
      } else if (val === 'downLoad') {
        this.downloadWeekly(item['local_access_full-text-link'], item['article_article-title'], item['uuid'])
      }
    },

    // 下载
    downloadWeekly (url, pdfName, uuid) {
      // 调用子组件的下载方法
      this.downloadPDF(url, pdfName, uuid)
    },

    downloadPDF (url, fileName, uuid) {
      const _this = this
      fetch(url).then(function (response) {
        if (response.ok) {
          return response.arrayBuffer()
        }
        throw new Error('Network response was not ok.')
      }).then(function (arraybuffer) {
        let blob = new Blob([arraybuffer], {
          type: `application/pdf;charset-UTF-8` // word文档为msword,pdf文档为pdf
        })

        let objectURL = URL.createObjectURL(blob)

        let downEle = document.createElement('a')
        let fname = fileName // 下载文件的名字
        // let fname = `download` // 下载文件的名字
        downEle.href = objectURL
        downEle.setAttribute('download', fname)
        document.body.appendChild(downEle)
        downEle.click()
        DownloadArticleList({ // 此处是调用接口，将下载的文件信息传给后台
          uuid: uuid,
          openid: _this.openid
        }).then(res => {
          if (res.data.errno === 0) {
            alert('下载完成')
          }
          console.log('xiazai:', res.data)
        })
      }).catch(function (error) {
        console.log('There has been a problem with your fetch operation: ', error.message)
      })
    },

以上就是pdf下载

二、pdf预览

一共有两种方法，一种是分页，还可以放大缩小，另一种是不分页，还未实现放大缩小

1、第一种是分页的pdf预览，也可以实现放大，代码如下：

pdf链接打开是这样的：

2、 第二种是不分页的不可以实现放大缩小，但是可以上下滚动

以上就是关于pdf下载和预览的一些分享，哪里有不对的，欢迎指正~