Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤

目录

• 实现效果
• 可用插件介绍
• 根据需求进行插件选型
• 安装和引入插件

• 安装
• 引入

• 用于渲染内容的 canvas 节点
• 用于接收 PDFJS 实例的对象
• 监听链接变化并初始化实例

• 获取当前页面比率，用于计算内容的实际宽高
• 渲染当前页面

• 准备渲染队列，防止渲染顺序混乱
• 在渲染页面时改变队列状态
• 实现翻页函数

• 绘制作为水印的 canvas
• 将水印平铺到渲染内容的 canvas 中
• 页面内容渲染完成后，再次触发水印渲染

yarn add pdfjs-dist

import * as PDFJS from 'pdfjs-dist'
PDFJS.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${PDFJS.version}/pdf.worker.js`

<canvas id="pdfCanvas"></canvas>

props: {
 // PDF 文件的实际链接
 url: {
 type: String
 }
},
data () {
 return {
 totalPage: 1,
 // PDFJS 实例
 pdfDoc: null
 }
},
methods: {
 _initPdf () {
 PDFJS.getDocument(this.url).promise.then(pdf => {
 // 文档对象
 this.pdfDoc = pdf
 // 总页数
 this.totalPage = pdf.numPages
 // 渲染页面
 this.$nextTick(() => {
 this._renderPage()
 })
 })
 }
}

watch: {
 'url' (val) {
 if (!val) {
 return
 }
 this._initPdf()
 }
},

methods: {
 _getRatio (ctx) {
 let dpr = window.devicePixelRatio || 1
 let bsr =
 ctx.webkitBackingStorePixelRatio ||
 ctx.mozBackingStorePixelRatio ||
 ctx.msBackingStorePixelRatio ||
 ctx.oBackingStorePixelRatio ||
 ctx.backingStorePixelRatio ||
 1
 return dpr / bsr
 }
}

data () {
 return {
 currentPage: 1,
 totalPage: 1,
 width: 0,
 height: 0,
 pdfDoc: null
 }
},
methods: {
 _renderPage () {
 this.pdfDoc.getPage(this.currentPage).then(page => {
 let canvas = document.querySelector('#pdfCanvas')
 let ctx = canvas.getContext('2d')
 // 获取页面比率
 let ratio = this._getRatio(ctx)
 // 根据页面宽度和视口宽度的比率就是内容区的放大比率
 let dialogWidth = this.$refs['pdfDialog'].$el.querySelector('.el-dialog').clientWidth - 40
 let pageWidth = page.view[2] * ratio
 let scale = dialogWidth / pageWidth
 let viewport = page.getViewport({ scale })
 // 记录内容区宽高，后期添加水印时需要
 this.width = viewport.width * ratio
 this.height = viewport.height * ratio
 canvas.width = this.width
 canvas.height = this.height
 // 缩放比率
 ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
 page.render({
 canvasContext: ctx,
 viewport
 }).promise.then(() => {})
 })
 }
}

data () {
 return {
 // 是否位于队列中
 rendering: false
 }
},
methods: {
 _renderQueue () {
 if (this.rendering) {
 return
 }
 this._renderPage()
 }
}

methods: {
 _renderPage () {
 // 队列开始
 this.rendering = true
 this.pdfDoc.getPage(this.currentPage).then(page => {
 // ... 省略实现代码
 page.render({
 canvasContext: ctx,
 viewport
 }).promise.then(() => {
 // 队列结束
 this.rendering = false
 })
 })
 }
}

data () {
 return {
 currentPage: 1,
 totalPage: 1
 }
},
computed: {
 // 是否首页
 firstPage () {
 return this.currentPage <= 1
 },
 // 是否尾页
 lastPage () {
 return this.currentPage >= this.totalPage
 },
},
methods: {
 // 跳转到首页
 firstPageHandler () {
 if (this.firstPage) {
 return
 }
 this.currentPage = 1
 this._renderQueue()
 },
 // 跳转到尾页
 lastPageHandler () {
 if (this.lastPage) {
 return
 }
 this.currentPage = this.totalPage
 this._renderQueue()
 },
 // 上一页
 previousPage () {
 if (this.firstPage) {
 return
 }
 this.currentPage--
 this._renderQueue()
 },
 // 下一页
 nextPage () {
 if (this.lastPage) {
 return
 }
 this.currentPage++
 this._renderQueue()
 }
}

props: {
 watermark: {
 type: String,
 default: 'asing1elife'
 }
},
methods: {
 _initWatermark () {
 let canvas = document.createElement('canvas');
 canvas.width = 200
 canvas.height = 200
 let ctx = canvas.getContext('2d')
 ctx.rotate(-18 * Math.PI / 180)
 ctx.font = '14px Vedana'
 ctx.fillStyle = 'rgba(200, 200, 200, .3)'
 ctx.textAlign = 'left'
 ctx.textBaseline = 'middle'
 ctx.fillText(this.watermark, 50, 50)
 return canvas
 }
}

methods: {
 _renderWatermark () {
 let canvas = document.querySelector('#pdfCanvas')
 let ctx = canvas.getContext('2d')
 // 平铺水印
 let pattern = ctx.createPattern(this._initWatermark(), 'repeat')
 ctx.rect(0, 0, this.width, this.height)
 ctx.fillStyle = pattern
 ctx.fill()
 }
}

methods: {
 // 渲染页面
 _renderPage () {
 this.pdfDoc.getPage(this.currentPage).then(page => {
 // ... 省略实现代码
 page.render({
 canvasContext: ctx,
 viewport
 }).promise.then(() => {
 // 渲染水印
 this._renderWatermark()
 })
 })
 }
}