一、在本地瀏覽pdf（直接將element-dialog 和 iframe相結合）需要將要瀏覽的pdf放入static資料夾下面

  <el-button type="text" @click="dialogVisible = true">點選開啟 Dialog</el-button>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible">
      <iframe src="../../static/檔名.pdf" width="90%" height="600px"></iframe
 
>
  </el-dialog>

在data中直接定義 dialogVisible

  data() {
    return {
      dialogVisible: false
    }
  }

以上方法便可直接在本地檢視pdf，無需新增pdf.js

二、通過後臺傳來的資料，展示pdf

在展示之前，要先接收到後臺的axios的資料

1.  api.js中定義

export const decision = data => ajaxHttp('/home/dynamic/decision/page', data, 'POST')

2.要接受的頁面引入

import { decision } from '../api/api'

3.開始接收後臺

    async getList () {
      this.loading = true
      let params = {
        type: 1
      }
      const res = await decision(params)
      if (res.data.code === 1) {
        this.list = res.data.data
        console.log(this.list)
      } 
 
else {
        this.$message({type: 'success', message: res.data.msg})
      }
      this.listNumber = this.list.length
      this.loading = false
    },

接收後不要忘記在mounted裡面定義如何開始

mounted () {
    this.getList()
  }

4.定義一下顯示出來的和點選事件的位置

  <div v-for="item in list" :key="item.id" @click="clickPDFfn(item.filePath1)">{{item.title}}</div>

5.定義el-dialog （定義之前要先引入，檢視element.api）

<el-dialog
    :visible.sync="otherDialogVisible"
    width="80%"
    center>
      <span>
        <canvas id="canvas1"></canvas>
        <div class="foot" v-if='pdfDoc'>
          <el-button class='left' v-if="pageNum>1" @click="onPrevPage">上一頁</el-button>
          <el-button class='right' v-if="pageNum<pdfDoc.numPages" @click="onNextPage">下一頁</el-button>
        </div>
      </span>
  </el-dialog>

6.寫下如下方法

handleCurrentChange (val) {
      this.currentPage = val
    },
    clickPDFfn (item) {
      this.loading = true
      this.otherDialogVisible = true
      this.showPDF('http://compre-tj-api.gov.bbdtek.com/repository/readPDF?path=' + item)
    },
    showPDF (url) {
      let _this = this
      this.$pdf.getDocument(url).then(function (pdf) {
        _this.pdfDoc = pdf
        _this.$nextTick(() => {
          _this.renderPage(1)
        })
      })
    },
    renderPage (num) {
      this.pageRendering = true
      let _this = this
      this.pdfDoc.getPage(num).then(function (page) {
        let canvas = document.getElementById('canvas1')
        let ctx = canvas.getContext('2d')
        let dpr = window.devicePixelRatio || 1
        let bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio ||
          ctx.msBackingStorePixelRatio ||
          ctx.oBackingStorePixelRatio ||
          ctx.backingStorePixelRatio || 1
        let ratio = dpr / bsr
        let viewport = page.getViewport(screen.availWidth / page.getViewport(1).width)
        canvas.height = viewport.height * ratio
        canvas.width = viewport.width * ratio
        canvas.style.width = '100%'
        canvas.style.height = '100%'
        ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
        // Render PDF page into canvas context
        var renderContext = {
          canvasContext: canvas.getContext('2d'),
          viewport: viewport
        }
        var renderTask = page.render(renderContext)

        // Wait for rendering to finish
        renderTask.promise.then(function () {
          _this.pageRendering = false
          if (_this.pageNumPending !== null) {
            // New page rendering is pending
            this.renderPage(_this.pageNumPending)
            _this.pageNumPending = null
          }
        })
      })
    },
    queueRenderPage (num) {
      console.log(num)
      if (this.pageRendering) {
        this.pageNumPending = num
      } else {
        this.renderPage(num)
      }
    },
    onPrevPage () {
      if (this.pageNum <= 1) {
        return
      }
      this.pageNum--
      this.queueRenderPage(this.pageNum)
    },
    onNextPage () {
      if (this.pageNum >= this.pdfDoc.numPages) {
        return
      }
      this.pageNum++
      this.queueRenderPage(this.pageNum)
    }

7.新增以下屬性

data () {
    return {
      listNumber: 0,
      loading: false,
      otherDialogVisible: false,
      pdfDoc: null,
      pageNum: 1,
      pageNumPending: null,
      currentPage: 1,
      list: []
    }
  }

通過以上方法即可連線後臺直接瀏覽pdf

注： 後臺pdf地址定義為 filePath1