VUE2实现pdf批注

最近有一个开发需需求, 需要用在pdf做标注功能,用了很多插件,都和目标不太相符,最后用canvas绘制完成了此功能。

文章目录

VUE2实现pdf批注
前言
一、canvas是什么？
二、使用步骤
- 1.引入库
- 2.实现
总结

前言

如果有不懂canvas的具体操作和api调用，推荐先去b站深入学习，具体实现操作代码如下。

提示：以下是本篇文章正文内容，下面案例可供参考

一、canvas是什么？

Canvas是一个基于Web的HTML5应用程序，它提供了一个用于创建和展示图形和动画的HTML元素。Canvas可以用来绘制图形、动画、视频、音频、游戏等等。它是HTML5标准的一部分，使用JavaScript编程语言来操作和控制

二、使用步骤

1.引入库

代码如下（示例）：

     <el-button size="mini">{{ pageNum }}/{{ numPages }}</el-button><el-button size="mini" type @click="resetAll">清空</el-button><el-button size="mini" type @click="handleRepealCancvs">撤销</el-button><el-button size="mini" type @click="downLoad">下载</el-button><el-button size="mini" type @click="radioClick('R')">矩形绘制</el-button><el-button size="mini" type="primary" @click="btnPre">上一页</el-button><el-button size="mini" type="success" @click="btnNext">下一页</el-button><el-button size="mini" type="danger">提交</el-button>

2.实现

代码如下（示例）：

 //上一页btnPre() {let page = this.pageNumpage = page > 1 ? page - 1 : this.numPagesthis.pageNum = page},//下一页btnNext() {let page = this.pageNumpage = page < this.numPages ? page + 1 : 1this.pageNum = page// this.resetAll()},// 下载画布 这里用的是html2canvas 插件downLoad() {html2canvas(document.getElementsByClassName('pdf-canvas-warp')).then(cavans => {this.imgData = cavans.toDataURL('image/png')const fileName = 'canvas.png'if ('download' in document.createElement('a')) {// 非IE下载const elink = document.createElement('a')elink.download = fileNameelink.style.display = 'none'elink.href = this.imgDatadocument.body.appendChild(elink)elink.click()document.body.removeChild(elink)} else {// IE10+下载navigator.msSaveBlob(this.url, fileName)}})},// 关键代码实现 onPointerDown(e) {if (this.type !== 'R') {return}var location = this.unifyCoordinates(e.clientX, e.clientY)this.pointerDownLocation.x = location.xthis.pointerDownLocation.y = location.ythis.dragging = truethis.saveData()console.log(this.rubberBandRect)console.log(this.pointerDownLocation)},onPointerMove(e) {if (this.type !== 'R') {return}if (this.dragging) {let location = this.unifyCoordinates(e.clientX, e.clientY)this.restoreData()this.makeRect(location)this.drawShape(location)}},onPointerUp(e) {if (this.type !== 'R') {return}if (this.dragging) {var location = this.unifyCoordinates(e.clientX, e.clientY)this.dragging = falsethis.restoreData()this.makeRect(location)this.drawShape(location)this.recordHisy()}}//调用处 deactivated() {this.canvas.removeEventListener('pointerdown', this.onPointerDown)this.canvas.removeEventListener('pointermove', this.onPointerMove)this.canvas.removeEventListener('pointerup', this.onPointerUp)},methods: {initImage() {this.canvas = this.$refs.mycanvssthis.ctx = this.canvas.getContext('2d')const image = new Image()image.setAttribute('crossOrigin', 'anonymous')image.src = this.imgimage.onload = () => {// 图片加载完，再draw 和 toDataURLif (image.complete) {this.canvas.width = image.widththis.canvas.height = image.heightthis.imageObj = imagethis.ctx.drawImage(image, 0, 0)this.ctx.globalCompositeOperation = 'R'this.canvas.addEventListener('pointerdown', this.onPointerDown)this.canvas.addEventListener('pointermove', this.onPointerMove)this.canvas.addEventListener('pointerup', this.onPointerUp)let imgData = this.canvas.toDataURL()this.historyList.push(imgData)}}},

总结

提示：这里对文章进行总结：

以上内容是关键实现代码逻辑可对pdf内容进行圈注，撤销，清空等操作。

VUE2实现pdf批注相关推荐

如何用PDF编辑器更改和隐藏PDF批注
PDF批注是审阅PDF文档的主要功能之一,其作用是注释PDF.评论PDF文档内容.它不会影响或修改PDF文档原本的内容,在审阅PDF文档时非常实用.因此,在PDF编辑器的使用技巧中,掌握PDF批注的更 ...
【源码】PDF.js批注注释插件库(纯JS). 创建和保存PDF批注(PDF 高亮/签名/插图/截屏/文本框/画笔/多边形)-pdf.js
基于 PDF.js 开发了 PDF 批注注释插件库,支持多种批注类型,支持写入批注到pdf中并保存,为目前纯前端 JavaScript 最佳实现方案,完美支持老版浏览器.手机.平板等移动端设备,仅 ...
金山pdf批注更改批注作者_Linux上的PDF批注工具
金山pdf批注更改批注作者 What are good PDF annotation tools on Linux? Preferring saving the annotation in the P ...
该页面仅以HTML格式保存_学用系列PDF批注保存不容易！Ashampoo PDF PK 悦书PDF
整本书阅读中,最令人头痛的是文档协作共读的数据保存.有朋友推荐说可以使Ashampoo PDF与悦书PDF阅读器进行本地阅读批注,再分享给朋友.胖胖老师赶紧下载软件尝试PDF批注保存功能,看看究竟这样 ...
ofdrw ofd转pdf批注痕迹丢失或显示错误
正常的ofd文件: 使用ofwrw转pdf后,发现签批痕迹丢失.如下: 经过排查发现是ofdrw版本比较低(1.17.6),升级到最新版本1.7.16. <dependency><g ...
中批注转成pdf看不到_超实用的PDF在线转换器，你绝对用的到~
PDF 是我们工作中常用的文档形式,有时候需要对它进行转换或者编辑等工作. 给大家分享一款界面简洁,操作简单的一站式 PDF 工具:LightPDF.LightPDF 是一款线上 PDF 转换器与编辑 ...
go语言实现将word文件转成pdf_超实用的PDF在线转换器，你绝对用的到~
PDF 是我们工作中常用的文档形式,有时候需要对它进行转换或者编辑等工作. 给大家分享一款界面简洁,操作简单的一站式 PDF 工具:LightPDF.LightPDF 是一款线上 PDF 转换器与编辑 ...
pdf导入ps颜色太浅_PDF 文件编辑转换难？或许你需要一个扫描全能王！
手机上存了各种资料,想把所有 PDF 文件统一存储.管理? 手机打开 PDF 文件时,阅读难?批注难?分享难? 想编辑/调整 PDF 页面,装了一堆杂七杂八的 APP 效果仍然不理想? PDF,素来以 ...
PDF Reader Pro for mac(全能pdf阅读器)
PDF Reader Pro 版该软件支持PDF阅读,编辑,注释,创建/填写表格,转换,创建,OCR和签署PDF文件等,满足您的所有PDF文档需求. PDF Reader Pro for mac版软件 ...

VUE2实现pdf批注

VUE2实现pdf批注

文章目录

前言

一、canvas是什么？

二、使用步骤

1.引入库

2.实现

总结

VUE2实现pdf批注相关推荐

最新文章

热门文章