vue使用pdfjs显示PDF可复制的实现方法
时间:2018-12-15
这篇文章主要介绍了vue使用pdfjs显示PDF可复制的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
pdf显示的方法
方法一
使用embed标记来使用浏览器自带的pdf工具。
这种实现方式优缺点都很明显:
优点:自带“打印”,“搜索”,“翻页”等功能,强大且实现方便。
缺点:不同浏览器的pdf工具样式不一,且无法满足个性化需求,比如:禁止打印,下载等。
方法二
使用Mozilla的PDF.js,自定义展示PDF。
- 基础功能集成
- 使用Text-Layers渲染(可实现pdf内容复制)
什么是PDF.JS
PDF.js是基于HTML5技术构建的,用于展示可移植文档格式的文件(PDF),它可以在现代浏览器中使用且无需安装任何第三方插件。
安装:
npm install pdfjs-dist
基础功能有两个必须引用的文件:
- pdf.js
- pdf.worker.js
如果使用CDN的方式,直接引用如下对应文件即可:
如果使用npm的方式,则在需要使用PDF.js的文件中如下引用:
import PDFJS from 'pdfjs-dist'; PDFJS.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.js';
这两个文件包含了获取、解析和展示PDF文档的方法,但是解析和渲染PDF需要较长的时间,可能会阻塞其它JS代码的运行。
为解决该问题,pdf.js依赖了HTML5引入的Web Workers——通过从主线程中移除大量CPU操作(如解析和渲染)来提升性能。
PDF.js的API都会返回一个Promise,使得我们可以优雅的处理异步操作。
使用
本文章只介绍在vue中的使用, 下面是自己写的展示pdf的组件可以直接拿去用
注:具体解释请看下面代码中的注释
<template> <!--<button @click="scalBig">放大</button>--> <!--<button @click="scalSmall">缩小</button>--> <!--<p>页码:{{`${pageNo}/${totals.length}`}}</p>--> <div class="drag-box" id="dragBox" @scroll="scrollfun($event)"> <el-scrollbar style="height: 100%;overflow-y: hidden;"> <div class="wrapper" id="pdf-container"> <div v-for="item in totals" :id="`page-${item}`" :key="item" class="pdf-box"> <canvas :id="'canvas-pdf-' + item" class="canvas-pdf"></canvas> </div> </div> </el-scrollbar> </div> </template> <script> import PDFJS from 'pdfjs-dist' import { TextLayerBuilder } from 'pdfjs-dist/web/pdf_viewer' import 'pdfjs-dist/web/pdf_viewer.css' export default { name: 'showPdf', props: ['pdfUrl'], data () { return { scale: 1.4, totals: [], pageNo: 1, viewHeight: 0 } }, mounted () { this.renderPdf(this.scale) }, watch: { scale (val) { this.totals = [] this.renderPdf(val) } }, methods: { renderPdf (scale) { PDFJS.workerSrc = require('pdfjs-dist/build/pdf.worker.min') // 当 PDF 地址为跨域时,pdf 应该已流的形式传输,否则会出现pdf损坏无法展示 PDFJS.getDocument(this.pdfUrl).then(pdf => { // 得到PDF的总的页数 let totalPage = pdf.numPages let idName = 'canvas-pdf-' // 根据总的页数创建相同数量的canvas this.createCanvas(totalPage, idName) for (let i = 1; i <= totalPage; i++) { pdf.getPage(i).then((page) => { let pageDiv = document.getElementById(`page-${i}`) let viewport = page.getViewport(scale) let canvas = document.getElementById(idName + i) let context = canvas.getContext('2d') canvas.height = viewport.height canvas.width = viewport.width this.viewHeight = viewport.height let renderContext = { canvasContext: context, viewport } // 如果你只是展示pdf而不需要复制pdf内容功能,则可以这样写render // page.render(renderContext) 如果你需要复制则像下面那样写利用text-layer page.render(renderContext).then(() => { return page.getTextContent() }).then((textContent) => { // 创建文本图层div const textLayerDiv = document.createElement('div') textLayerDiv.setAttribute('class', 'textLayer') // 将文本图层div添加至每页pdf的div中 pageDiv.appendChild(textLayerDiv) // 创建新的TextLayerBuilder实例 let textLayer = new TextLayerBuilder({ textLayerDiv: textLayerDiv, pageIndex: page.pageIndex, viewport: viewport }) textLayer.setTextContent(textContent) textLayer.render() }) }) } }) }, createCanvas (totalPages) { for (let i = 1; i <= totalPages; i++) { this.totals.push(i) } }, // 分页 scrollfun (e) { let scrollTop = e.target.scrollTop if (scrollTop === 0) { this.pageNo = 1 } else { this.pageNo = Math.ceil(scrollTop / this.viewHeight) } }, // 放大 scalBig () { this.scale = this.scale + 0.1 }, // 缩小 scalSmall () { if (this.scale > 1.2) { this.scale = this.scale - 0.1 } } } } </script> <style scoped lang="scss"> .drag-box { height: 800px; } .pdf-box { position: relative; } .el-scrollbar__wrap { overflow-x: hidden; } </style>
pdf.js实现展示和复制PDF内容介绍到这里,后续会继续更新实现下载、打印等功能
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- “AS3.0高级动画编程”学习:第一章高级碰撞检测
- AI分析师PK人类分析师,结果竟然是……
- 纯代码修改WordPress 默认 Gravatar 头像的方法
- 这些行业的饭碗要被机器人抢了 再不努力就被它们PK掉了!
- DeveWork.com 上线“前端工具箱”(附源码下载)
- Debug和Release之本质区别
- ArgoUML -- 开源UML 建模工具
- 性能分析工具-PerfView
- c#测试字符串是否为GUID的几种方法
- 编译错误CS1595
- 分享一款带尖角浮出 公告栏 样式
- 在asp.net页面上得到Castle容器的实例
- WordPress自带TinyMCE编辑器相关功能增强
- 联众互动收购3家棋牌游戏公司,其域名买自蔡文胜手中
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android中Fragment相互切换间不被回收的实现方法
- Android手机管理工具类详解
- 通过代码学Sutton强化学习第四章动态规划
- android通过okhttpClient下载网页内容的实例代码
- Android自定义键盘的实现(数字键盘和字母键盘)
- Android iconify 使用详解
- XRecyclerView实现下拉刷新、滚动到底部加载更多等功能
- 浅析Android 快速实现图片压缩与上传功能
- Android处理时间各种方法汇总
- Android TextView Marquee的应用实例详解
- Android毛玻璃背景效果简单实现代码
- ClickHouse和他的朋友们(3)MySQL Protocol和Write调用栈
- ubuntu安装多个版本的CUDA并随时切换
- 如何在Ubuntu 18.04(实体机)上配置OpenWRT的开发环境
- Android 组合控件实现布局的复用的方法