使用vue實(shí)現(xiàn)pdf文檔在線預(yù)覽功能的案例

這篇文章主要介紹了使用vue實(shí)現(xiàn)pdf文檔在線預(yù)覽功能的案例，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

針對(duì)android系統(tǒng)不支持pdf文檔在線預(yù)覽，可通過引入pdf.js插件實(shí)現(xiàn)，其具體實(shí)現(xiàn)步驟如下

一、引入插件

方式一：npm install --save pdfjs-dist，安裝完成后在vue項(xiàng)目的node_modules出現(xiàn)如下依賴

方式二：只引入pdf.js的核心文件pdf.js和pdf.work.js,其他無關(guān)的文件全部刪除，如圖

方式三：將插件直接放在static文件夾下，如圖

二、前端頁面代碼

方式一和方式二：特點(diǎn)精簡

<template>
 <div>
 <canvas v-for="page in pages" :id="'the-canvas'+page" :key="page"></canvas>
 </div>
</template>
 
<script>
// 方式一
import PDFJS from 'pdfjs-dist'
// 方式二
import * as PDFJS from '../../../static/pdf/build/pdf'
 
export default {
 // 返回?cái)?shù)據(jù)
 data () {
 return {
 pdfDoc: null,
 pages: 0
 }
 },
 created () {
 },
 mounted () {
 this.showPdf()
 },
 methods: {
 showPdf: function () {
 // 請(qǐng)求本地文件
 let url = '/static/pdf/web/compressed.tracemonkey-pldi-09.pdf'
 // 跨域請(qǐng)求文件，需要走后臺(tái)代理，后臺(tái)需要將文件流返回前端才可在頁面顯示
 // let url = '/pdf/showPdf?pdfUrl=http://test.hccb.cc/corporBankWXTest/static/123.pdf'
 this.loadFile(url)
 },
 renderPage: function (num) {
 let _this = this
 this.pdfDoc.getPage(num).then(function (page) {
 let canvas = document.getElementById('the-canvas' + num)
 let ctx = canvas.getContext('2d')
 let dpr = window.devicePixelRatio || 1.0
 let bsr = ctx.webkitBackingStorePixelRatio ||
  ctx.mozBackingStorePixelRatio ||
  ctx.msBackingStorePixelRatio ||
  ctx.oBackingStorePixelRatio ||
  ctx.backingStorePixelRatio || 1.0
 let ratio = dpr / bsr
 let viewport = page.getViewport(window.screen.availWidth / page.getViewport(1).width)
 canvas.width = viewport.width * ratio
 canvas.height = viewport.height * ratio
 canvas.style.width = viewport.width + 'px'
 canvas.style.height = viewport.height + 'px'
 ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
 var renderContext = {
  canvasContext: ctx,
  viewport: viewport
 }
 page.render(renderContext)
 if (_this.pages > num) {
  _this.renderPage(num + 1)
 }
 })
 },
 loadFile: function (url) {
 let _this = this
 PDFJS.getDocument(url).then(function (pdf) {
 _this.pdfDoc = pdf
 _this.pages = _this.pdfDoc.numPages
 _this.$nextTick(() => {
  _this.renderPage(1)
 })
 })
 }
 }
}
</script>
 
<style scoped>
canvas {
 display: block;
 border-bottom: 1px solid black;
}
</style>

方式三：功能強(qiáng)大，但是引入過多無用文件，此種方式的filePath如為本地文件不進(jìn)行編碼也可發(fā)送請(qǐng)求，如為跨域文件不進(jìn)行編碼無法發(fā)送請(qǐng)求，因此建議統(tǒng)一進(jìn)行編碼。

<template>
 <div >
 <iframe :src="url" id="iframe"  @load="sureHeight"></iframe>
 </div>
</template>
 
<script>
export default {
 // 返回?cái)?shù)據(jù)
 data () {
 return {
 url: ''
 }
 },
 // 模塊創(chuàng)建時(shí)執(zhí)行
 created () {
 },
 // 模塊渲染時(shí)執(zhí)行
 mounted () {
 // 本地請(qǐng)求文件
 let filePath = encodeURIComponent('/static/pdf/web/compressed.tracemonkey-pldi-09.pdf')
 // 跨域請(qǐng)求文件，需走后臺(tái)代理
 // let filePath3 = encodeURIComponent('/pdf/showPdf?pdfUrl=http://test.hccb.cc/corporBankWXTest/static/123.pdf')
 // pdf文檔展示的頁面
 this.url = '/static/pdf/web/viewer.html?file=' + filePath
 },
 // 定義模塊測試方法
 methods: {
 // 此方法用于動(dòng)態(tài)確定元素iframe的高度，使展示的pdf文檔占滿整個(gè)屏幕
 sureHeight: function () {
 let element = document.getElementById('iframe')
 element.style.height = window.screen.height + 'px'
 }
 }
}
</script>
 
<style scoped>
 
</style>

三、后臺(tái)代碼實(shí)現(xiàn)

后臺(tái)通過http請(qǐng)求將獲取的文檔流返回給前端

@Controller
public class ShowPdfController {
 @RequestMapping(name = "/showPdf")
 public String showPdf(HttpServletRequest request, HttpServletResponse response, String pdfUrl) {
 try {
  pdfUrl = pdfUrl.trim();
  URL url = new URL(pdfUrl);
  HttpURLConnection conn = (HttpURLConnection) url.openConnection();
  conn.setConnectTimeout(5*1000);
  InputStream inputStream = conn.getInputStream();
  response.setHeader("Content-Disposition", "attachment;fileName=show.pdf");
  response.setContentType("multipart/form-data");
  OutputStream outputStream = response.getOutputStream();
  IOUtils.write(IOUtils.toByteArray(inputStream), outputStream);
 } catch (Exception e) {
  e.printStackTrace();
 }
 return null;
 }
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“使用vue實(shí)現(xiàn)pdf文檔在線預(yù)覽功能的案例”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!