欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue插件開(kāi)發(fā)之使用pdf.js實(shí)現(xiàn)手機(jī)端在線(xiàn)預(yù)覽pdf文檔的方法

 更新時(shí)間：2018年07月12日 09:17:57   作者：muma的專(zhuān)欄  
這篇文章主要介紹了vue插件開(kāi)發(fā)之使用pdf.js實(shí)現(xiàn)手機(jī)端在線(xiàn)預(yù)覽pdf文檔的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

目前大多數(shù)PC瀏覽器支持在線(xiàn)預(yù)覽pdf文件，但大多數(shù)手機(jī)瀏覽器還未支持，嘗試用手機(jī)瀏覽器打開(kāi)一個(gè)pdf文件會(huì)彈出是否下載的提示框。網(wǎng)上查了一些資料，在實(shí)現(xiàn)的過(guò)程中，還是走了比較多的彎路，最后采用了備受推薦的pdf.js插件來(lái)實(shí)現(xiàn)。

pdf.js可以從github上clone下來(lái)，然后本地gulp生成可用的pdf.js和pdf.worker.js（參考readme即可）。

不過(guò)更簡(jiǎn)單的方法是使用cnpm來(lái)安裝： cnpm isntall --save pdfjs-dist，然后可以在項(xiàng)目中使用了，我使用插件的方式。具體使用示例：

pdf.vue

<template><p id="container">
  <!-- <p class='pdf-page'> -->
   <canvas id="the-canvas"></canvas></p><p class="foot" v-if="pdfDoc"><button class="left" click="onPrevPage" v-if="pageNum>1">上一頁(yè)</button><button class="right" click="onNextPage" v-if="pageNum<pdfDoc.numPages">下一頁(yè)</button></p>
  <!-- </p> --><p></p>
</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="" type="text/css">#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)
  }
 }
}

把兩個(gè)文件放到同一文件夾pdf中形成一個(gè)插件，在main.js引入并use：

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

這樣，在需要顯示pdf的地方調(diào)用vue的$showPDF方法即可。

效果顯示（手機(jī)瀏覽器驗(yàn)證顯示正常）：

不過(guò)需要注意一點(diǎn)問(wèn)題是：

pdf.js不能處理跨域文件和本地文件，所以本地調(diào)試的時(shí)候應(yīng)該請(qǐng)求服務(wù)器的文件，如果請(qǐng)求的是遠(yuǎn)程服務(wù)器，存在跨域，那就需要在config/index.js中配置一下代理：

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

然后在使用的地方填相對(duì)路徑即可：

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論