这篇文章主要介绍了使用vue实现pdf文档在线预览功能的案例,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
针对android系统不支持pdf文档在线预览,可通过引入pdf.js插件实现,其具体实现步骤如下
一、引入插件
方式一:npm install --save pdfjs-dist,安装完成后在vue项目的node_modules出现如下依赖
方式二:只引入pdf.js的核心文件pdf.js和pdf.work.js,其他无关的文件全部删除,如图
方式三:将插件直接放在static文件夹下,如图
二、前端页面代码
方式一和方式二:特点精简
<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 { // 返回数据 data () { return { pdfDoc: null, pages: 0 } }, created () { }, mounted () { this.showPdf() }, methods: { showPdf: function () { // 请求本地文件 let url = '/static/pdf/web/compressed.tracemonkey-pldi-09.pdf' // 跨域请求文件,需要走后台代理,后台需要将文件流返回前端才可在页面显示 // 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>
方式三:功能强大,但是引入过多无用文件,此种方式的filePath如为本地文件不进行编码也可发送请求,如为跨域文件不进行编码无法发送请求,因此建议统一进行编码。
<template> <div > <iframe :src="url" id="iframe" @load="sureHeight"></iframe> </div> </template> <script> export default { // 返回数据 data () { return { url: '' } }, // 模块创建时执行 created () { }, // 模块渲染时执行 mounted () { // 本地请求文件 let filePath = encodeURIComponent('/static/pdf/web/compressed.tracemonkey-pldi-09.pdf') // 跨域请求文件,需走后台代理 // 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: { // 此方法用于动态确定元素iframe的高度,使展示的pdf文档占满整个屏幕 sureHeight: function () { let element = document.getElementById('iframe') element.style.height = window.screen.height + 'px' } } } </script> <style scoped> </style>
三、后台代码实现
后台通过http请求将获取的文档流返回给前端
@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; } }
感谢你能够认真阅读完这篇文章,希望小编分享的“使用vue实现pdf文档在线预览功能的案例”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。