Vue integrates PDF.js to implement PDF preview and add watermark steps

Achieve results

Available plugins introduction

Mozilla provides PDF.js and pdfjs-dist. The differences between the two are as follows:

• PDF.js, a complete PDF viewer, can directly use the viewer.html provided by it to view PDF content, including complete styles and related functions. The advantage is quick integration and no need to implement the viewer's functions and styles yourself. The disadvantage is that it will be troublesome if you want to customize the style and functions.
• pdfjs-dist , a pre-built version of PDF.js, only contains the rendering function of PDF content. You need to implement the viewer style and related functions yourself.

vue-pdf, recommended by Awesome Vue.js, the official Vue plugin library, is an encapsulation of pdfjs-dist. In general, you can use vue-pdf to quickly achieve PDF preview effects.

Select plug-ins based on your needs

Our requirement is to add a watermark to the PDF content while implementing PDF preview in the existing page.

The full version of PDF.js is too bloated. Although vue-pdf can quickly achieve the preview effect, it needs to render the canvas that displays the PDF twice when adding a watermark. After trying, it was found that the error Failed to execute 'drawImage' on 'CanvasRenderingContext2D': Overload resolution failed. would be thrown.

So in the end I chose to directly integrate pdfjs-dist to complete all the functions

Install and import plugins

Install

yarn add pdfjs-dist

Introduction

workerSrc must be specified manually, otherwise an error of Setting up fake worker failed will be thrown.

Although the file exists in the local directory node_modules/pdfjs-dist/build/pdf.worker.js, an error will still be reported when it is actually imported, so you can only use the pdf.worker.js under the CDN address. You can increase the flexibility of importing by passing in PDFJS.version.

import * as PDFJS from 'pdfjs-dist'

PDFJS.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${PDFJS.version}/pdf.worker.js`

Initialize plugin

A canvas node for rendering content

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

Object used to receive PDFJS instance

props: {
 // The actual link url of the PDF file: {
 type: String
 }
},
data () {
 return {
 totalPage: 1,
 // PDFJS instance pdfDoc: null
 }
},
methods: {
 _initPdf() {
 PDFJS.getDocument(this.url).promise.then(pdf => {
 // Document object this.pdfDoc = pdf
 //Total number of pages this.totalPage = pdf.numPages
 // Render the page this.$nextTick(() => {
 this._renderPage()
 })
 })
 }
}

Listen for link changes and initialize instances

When the external incoming URL is valid, the initialization function of the PDF viewer can be triggered

watch:
 'url' (val) {
 if (!val) {
 return
 }

 this._initPdf()
 }
},

Rendering PDF content

Get the current page ratio to calculate the actual width and height of the content

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

 return dpr / bsr
 }
}

Render the current page

The scale in page.getViewport({ scale }) is very important, which is directly related to whether the rendered content can fill the entire parent container. Therefore, the width of the parent container and the page itself are obtained here respectively. The ratio of parent container width/page width is the ratio of how much the actual page needs to be enlarged.

page.view is an array with four values: x-axis offset, y-axis offset, width, and height. To get the actual width, you also need to consider the current page ratio, so use page.view[2] * ratio to calculate the actual width.

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')
 // Get the page ratio let ratio = this._getRatio(ctx)

 // The ratio of the page width to the viewport width is the magnification ratio of the content area 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 })

 // Record the width and height of the content area. This will be needed when adding a watermark later. this.width = viewport.width * ratio
 this.height = viewport.height * ratio

 canvas.width = this.width
 canvas.height = this.height

 // Scaling ratio ctx.setTransform(ratio, 0, 0, ratio, 0, 0)

 page.render({
 canvasContext: ctx,
 viewport
 }).promise.then(() => {})
 })
 }
}

Implementing page jump

Prepare the rendering queue to prevent confusion in rendering order

When a page jump is triggered, the _renderQueue() function is called instead of directly calling the _renderPage() function, because whether to start rendering depends on whether there is currently no page being rendered.

data () {
 return {
 // Is it in the queue rendering: false
 }
},
methods: {
 _renderQueue() {
 if (this.rendering) {
 return
 }

 this._renderPage()
 }
}

Changing the queue state when rendering a page

methods: {
 _renderPage() {
 // Queue starts this.rendering = true

 this.pdfDoc.getPage(this.currentPage).then(page => {
 // ... omit the implementation code page.render({
 canvasContext: ctx,
 viewport
 }).promise.then(() => {
 // Queue ends this.rendering = false
 })
 })
 }
}

Implementing page turning function

data () {
 return {
 currentPage: 1,
 totalPage: 1
 }
},
computed: {
 // Is it the home page firstPage () {
 return this.currentPage <= 1
 },
 // Is it the last page lastPage () {
 return this.currentPage >= this.totalPage
 },
},
methods: {
 // Jump to the home page firstPageHandler () {
 if (this.firstPage) {
 return
 }

 this.currentPage = 1
 this._renderQueue()
 },
 // Jump to the last page lastPageHandler () {
 if (this.lastPage) {
 return
 }

 this.currentPage = this.totalPage
 this._renderQueue()
 },
 // Previous Page previousPage () {
 if (this.firstPage) {
 return
 }

 this.currentPage--
 this._renderQueue()
 },
 // Next page nextPage () {
 if (this.lastPage) {
 return
 }

 this.currentPage++
 this._renderQueue()
 }
}

Add a tiled text watermark to the page content

There is no doubt that the way to add watermarks on the front end is to use canvas for drawing.

The first solution was to prepare a div as a transparent mask layer to block the upper layer of the content area, and then use canvas.toDataURL('image/png') to export the watermark drawn by canvas into Base64 format and tile it as the background image of the mask layer. Although the effect can be achieved, this method can remove the watermark by simply opening the browser console and deleting the mask layer.

Then I found out in Canvas drawing another Canvas that canvas can actually draw a canvas as an image onto itself, so I came up with the following solution.

Draw the canvas as a watermark

Because it is a component, the watermark text watermark is passed in from the outside.

The canvas for drawing the watermark does not need to be added to the page. After drawing is completed, the DOM element can be directly returned. Note that what is returned is the DOM element, not the canvas instance obtained using getContext(2d).

ctx.fillStyle indicates the transparency of the text. ctx.fillText(this.watermark, 50, 50) indicates the position of the text in the canvas. The first value is the text content, the second value is the x-axis offset, and the third value is the y-axis offset.

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

Tiles the watermark into the canvas that renders the content

This method is based on several methods of HTML5 canvas tiling. The width and height in ctx.rect(0, 0, this.width, this.height) are the actual width and height of the page content area recorded in the _renderPage() function. As long as the actual width and height are passed in, the canvas will automatically realize the number of repetitions on the x-axis and y-axis according to the size of the watermark image and the size of the content area.

methods: {
 _renderWatermark() {
 let canvas = document.querySelector('#pdfCanvas')
 let ctx = canvas.getContext('2d')

 // Tiled watermark let pattern = ctx.createPattern(this._initWatermark(), 'repeat')
 ctx.rect(0, 0, this.width, this.height)
 ctx.fillStyle = pattern
 ctx.fill()
 }
}

After the page content is rendered, the watermark rendering is triggered again

methods: {
 // Rendering page_renderPage () {
 this.pdfDoc.getPage(this.currentPage).then(page => {
 // ... omit the implementation code page.render({
 canvasContext: ctx,
 viewport
 }).promise.then(() => {
 // Render watermark this._renderWatermark()
 })
 })
 }
}

The above is the details of Vue integrating PDF.js to realize PDF preview and add watermark. For more information about Vue to realize PDF preview and add watermark, please pay attention to other related articles on 123WORDPRESS.COM!