目前大多數PC瀏覽器支援線上預覽pdf檔案，但大多數手機瀏覽器還未支援，嘗試用手機瀏覽器開啟一個pdf檔案會彈出是否下載的提示框。網上查了一些資料，在實現的過程中，還是走了比較多的彎路，最後採用了倍受推薦的pdf.js外掛來實現（文末附Demo）。

        pdf.js可以從github上clone下來，然後本地gulp生成可用的pdf.js和pdf.worker.js（參考readme即可）。github地址是：https://github.com/mozilla/pdf.js。

      不過更簡單的方法是使用cnpm來安裝： cnpm isntall --save pdfjs-dist，然後可以在專案中使用了，我寫成了外掛的形式。具體使用示例：

pdf.vue

<template>
  <div id="container">
    <!-- <div class='pdf-page'> -->
      <canvas id="the-canvas"></canvas>
      <div class="foot" v-if='pdfDoc'>
        <button class='left' v-if="pageNum>1" @click="onPrevPage">上一頁</button>
        <button class='right' v-if="pageNum<pdfDoc.numPages" @click="onNextPage">下一頁</button>
      </div>
    <!-- </div> -->
  </div>
</template>
<script>
import PDFJS from 'pdfjs-dist'

export default {
  data () {
    return {
      pdfDoc: null,
      pageNum: 1,
      pageRendering: false,
      pageNumPending: null,
      scale: 0.9
    }
  },
  methods: {
    showPDF (url) {
      let _this = this
      PDFJS.getDocument(url).then(function (pdf) {
        _this.pdfDoc = pdf
        _this.renderPage(1)
      })
    },
    renderPage (num) {
      this.pageRendering = true
      let _this = this
      this.pdfDoc.getPage(num).then(function (page) {
        var viewport = page.getViewport(_this.scale)
        let canvas = document.getElementById('the-canvas')
        canvas.height = viewport.height
        canvas.width = viewport.width

        // 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) {
      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)
    }
  }
}
</script>

<style scoped>
#container {
  background-color: rgba(0,0,0,0.75);
  position:fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  padding: 5px;
}

.pdf-page {

}

.foot {
  position: fixed;
  transform: translate(-50%,0);
  left: 50%;
}
</style>
 

index.js:

import PDF from './PDF'

var $vm
export default {
  install (Vue, options) {
    if (!$vm) {
      const PDFPlugin = Vue.extend(PDF)
      $vm = new PDFPlugin().$mount()
      document.body.appendChild($vm.$el)
    }
    Vue.prototype.$showPDF = function (url) {
      $vm.showPDF(url)
    }
  }
}
 

把兩個檔案放到同一資料夾pdf中形成一個外掛，在main.js引入並use：

import pdf from '@/components/pdf'
Vue.use(pdf)

這樣，在需要顯示pdf的地方呼叫vue的$showPDF方法即可。

效果顯示（手機瀏覽器驗證顯示正常）：

不過需要注意一點問題是：

        pdf.js不能處理跨域檔案和本地檔案，所以本地除錯的時候應該請求伺服器的檔案，如果請求的是遠端伺服器，存在跨域，那就需要在config/index.js中配置一下代理：

    // ...
    proxyTable: {
      '/media': {
        target: 'https://xxxx.cn', // 換成正確的伺服器域名
        changeOrigin: true,
        pathRewrite: {
          '^/media': '/media'
        }
      }
    }
    // ...

然後在使用的地方填相對路徑即可：

  // ...
  mounted () {
    this.$showPDF('/media/up/2018/3/9/494079c7ec333bd371798dd0a73c0a0b.pdf')
  }
  // ...

------------------------------

2018.05.28更新

對於有小夥伴提出的模糊性問題，在網上查找了一些資料後發現canvas顯示模糊與