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 相关文章推荐
判断浏览器的javascript版本的代码
Sep 03 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
javascript打印输出json实例
Nov 11 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
vue.js学习之vue-cli定制脚手架详解
Jul 02 Javascript
JS实现搜索关键词的智能提示功能
Jul 07 Javascript
Vue中自定义全局组件的实现方法
Dec 08 Javascript
vuex 的简单使用
Mar 22 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 Javascript
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中多维数组按指定value排序的实现代码
2014/08/19 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
JavaScript 基本概念
2015/01/20 Javascript
怎么引入(调用)一个JS文件
2016/05/26 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
详解在Python程序中自定义异常的方法
2015/10/16 Python
python实现网站的模拟登录
2016/01/04 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
python 生成器协程运算实例
2017/09/04 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
python让函数不返回结果的方法
2020/06/22 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
毕业自荐信
2013/12/16 职场文书
社区食品安全实施方案
2014/03/28 职场文书
罚款通知怎么写
2015/04/22 职场文书
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python
带你了解Java中的ForkJoin
2022/04/28 Java/Android