實現效果：

實現原理：將PDF文件一頁一頁的渲染在畫布上面，然后將水印文字也渲染在畫布上面。

在網上也找了很多教程，自己試了一下，或多或少有點問題，最后結合了一下，做了些修改實現了。

?使用到的插件?pdfjs-dist，這個版本需要注意，太低或太高版本都不行。我最后選的是2.6.347，成功運行了。

package.json配置文件：

{"name": "pdf","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"},"dependencies": {"core-js": "^3.8.3","pdfjs-dist": "^2.6.347","vue": "^2.6.14"},"devDependencies": {"@babel/core": "^7.12.16","@babel/eslint-parser": "^7.12.16","@vue/cli-plugin-babel": "~5.0.0","@vue/cli-plugin-eslint": "~5.0.0","@vue/cli-service": "~5.0.0","eslint": "^7.32.0","eslint-plugin-vue": "^8.0.3","vue-template-compiler": "^2.6.14"},"eslintConfig": {"root": true,"env": {"node": true},"extends": ["plugin:vue/essential","eslint:recommended"],"parserOptions": {"parser": "@babel/eslint-parser"},"rules": {}},"browserslist": ["> 1%","last 2 versions","not dead"] }

vue代碼：

<template><div class="main-container"><input type="file" ref="fielinput" @change="uploadFile" /><div ref="canvasCont" class="canvas-container"><canvas ref="myCanvas" class="pdf-container"></canvas></div><div class="pagination-wrapper"><button @click="clickPre">上一頁</button><span>第{{ pageNo }} / {{ pdfPageNumber }}頁</span><button @click="clickNext">下一頁</button></div></div> </template><script> const pdfJS = require("pdfjs-dist");pdfJS.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/build/pdf.worker.entry"); export default {props: {watermark: {type: String,default: "水印文字",},},mounted() {},data() {return {pageNo: null,pdfPageNumber: null,renderingPage: false,pdfData: null, // PDF的base64scale: 1, // 縮放值width: "",height: "",};},methods: {uploadFile() {let inputDom = this.$refs.fielinput;let file = inputDom.files[0];let reader = new FileReader();reader.readAsDataURL(file);reader.onload = () => {let data = atob(reader.result.substring(reader.result.indexOf(",") + 1));this.loadPdfData(data);};},loadPdfData(data) {// 引入pdf.js的字體let CMAP_URL = "https://unpkg.com/pdfjs-dist@2.0.943/cmaps/";//讀取base64的pdf流文件this.pdfData = pdfJS.getDocument({data: data, // PDF base64編碼cMapUrl: CMAP_URL,cMapPacked: true,});console.log(this.pdfData);this.renderPage(1);},// 根據頁碼渲染相應的PDFrenderPage(num) {this.renderingPage = true;this.pdfData.promise.then((pdf) => {this.pdfPageNumber = pdf.numPages;pdf.getPage(num).then((page) => {// 獲取DOM中為預覽PDF準備好的canvasDOM對象let canvas = this.$refs.myCanvas;let ctx = canvas.getContext("2d");// 獲取頁面比率let ratio = this._getRatio(ctx);// 根據頁面寬度和視口寬度的比率就是內容區的放大比率let dialogWidth = this.$refs["canvasCont"].offsetWidth;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);let renderContext = {canvasContext: ctx,viewport: viewport,};page.render(renderContext).promise.then(() => {this.renderingPage = false;this.pageNo = num;// 添加水印this._renderWatermark();});});});},// 計算角度_getRatio(ctx) {let dpr = window.devicePixelRatio || 1;let bsr =ctx.webkitBackingStorePixelRatio ||ctx.mozBackingStorePixelRatio ||ctx.msBackingStorePixelRatio ||ctx.oBackingStorePixelRatio ||ctx.backingStorePixelRatio ||1;return dpr / bsr;},// 在畫布上渲染水印_renderWatermark() {let canvas = this.$refs.myCanvas;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();},// 生成水印圖片_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(0, 0, 0, 0.8)";ctx.textAlign = "left";ctx.textBaseline = "middle";ctx.fillText(this.watermark, 50, 50);return canvas;},clickPre() {if (!this.renderingPage && this.pageNo && this.pageNo > 1) {this.renderPage(this.pageNo - 1);}},clickNext() {if (!this.renderingPage &&this.pdfPageNumber &&this.pageNo &&this.pageNo < this.pdfPageNumber) {this.renderPage(this.pageNo + 1);}},}, }; </script><style scoped> .main-container {display: flex;flex-direction: column;align-items: center; } .canvas-container {width: 600px;height: 700px;border: 1px dashed black;position: relative;display: flex;justify-content: center; } .pdf-container {width: 100%;height: 100%; }.pagination-wrapper {display: flex;justify-content: center;align-items: center; } </style>

總結

以上是生活随笔為你收集整理的前端vue实现给pdf添加水印的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。