vue实现pdf文档在线预览功能


Posted in Javascript onNovember 26, 2019

针对android系统不支持pdf文档在线预览,可通过引入pdf.js插件实现,其具体实现步骤如下

一、引入插件

方式一:npm install --save pdfjs-dist,安装完成后在vue项目的node_modules出现如下依赖

vue实现pdf文档在线预览功能

方式二:只引入pdf.js的核心文件pdf.js和pdf.work.js,其他无关的文件全部删除,如图

vue实现pdf文档在线预览功能

方式三:将插件直接放在static文件夹下,如图

vue实现pdf文档在线预览功能

二、前端页面代码

方式一和方式二:特点精简

<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" 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=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;
 }
}

具体采用哪种方式实现pdf文档的在线预览,可根据项目实际情况选择,如业务简单建议使用方式一和方式二(精简),如业务复杂建议使用方式三(功能强大)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
Sep 12 Javascript
javascript版2048小游戏
Mar 18 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
javascript中的replace函数(带注释demo)
Jan 07 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
Vue实现商品飞入购物车效果(电商项目)
Nov 26 #Javascript
使用Vue生成动态表单
Nov 26 #Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 #Javascript
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 #Javascript
详解小程序如何动态绑定点击的执行方法
Nov 26 #Javascript
vue element-ui读取pdf文件的方法
Nov 26 #Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 #Javascript
You might like
PHP错误和异长常处理总结
2014/03/06 PHP
传智播客学习之java 反射
2009/11/22 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
2016/12/08 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
js中let能否完全替代IIFE
2019/06/15 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
python实现简单五子棋游戏
2019/06/18 Python
python实现邮件发送功能
2019/08/10 Python
详解Python中pyautogui库的最全使用方法
2020/04/01 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
高一家长会邀请函
2014/01/12 职场文书
寄语十八大感言
2014/02/07 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书
java代码实现空间切割
2022/01/18 Java/Android