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

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()
 })
 })
 }
}