针对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=/corporBankWXTest/static/123.pdf'this.loadFile(url)},renderPage: function (num) {let _this = thisthis.pdfDoc.getPage(num).then(function (page) {let canvas = document.getElementById('the-canvas' + num)let ctx = canvas.getContext('2d')let dpr = window.devicePixelRatio || 1.0let bsr = ctx.webkitBackingStorePixelRatio ||ctx.mozBackingStorePixelRatio ||ctx.msBackingStorePixelRatio ||ctx.oBackingStorePixelRatio ||ctx.backingStorePixelRatio || 1.0let ratio = dpr / bsrlet viewport = page.getViewport(window.screen.availWidth / page.getViewport(1).width)canvas.width = viewport.width * ratiocanvas.height = viewport.height * ratiocanvas.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 = thisPDFJS.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" style="width: 100%;" @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 filePath2 = encodeURIComponent('/pdf/showPdf?pdfUrl=/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请求将获取的文档流返回给前端
@Controllerpublic 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;}}
具体采用哪种方式实现pdf文档的在线预览，可根据项目实际情况选择，如业务简单建议使用方式一和方式二（精简），如业务复杂建议使用方式三（功能强大）
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持谷谷点程序。
