VUE2实现pdf批注
最近有一个开发需需求, 需要用在pdf做标注功能,用了很多插件,都和目标不太相符,最后用canvas绘制完成了此功能。
文章目录
前言
如果有不懂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.pageNum
page = page > 1 ? page - 1 : this.numPages
this.pageNum = page
},
//下一页
btnNext() {
let page = this.pageNum
page = page < this.numPages ? page + 1 : 1
this.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 = fileName
elink.style.display = 'none'
elink.href = this.imgData
document.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.x
this.pointerDownLocation.y = location.y
this.dragging = true
this.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 = false
this.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.mycanvss
this.ctx = this.canvas.getContext('2d')
const image = new Image()
image.setAttribute('crossOrigin', 'anonymous')
image.src = this.img
image.onload = () => {
// 图片加载完，再draw 和 toDataURL
if (image.complete) {
this.canvas.width = image.width
this.canvas.height = image.height
this.imageObj = image
this.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内容进行圈注，撤销，清空等操作。