Vue 集成 PDF.js 實(shí)現(xiàn) PDF 預(yù)覽和添加水印的步驟
實(shí)現(xiàn)效果
可用插件介紹
Mozilla 提供了 PDF.js 和pdfjs-dist ，兩者的區(qū)別如下：
- PDF.js ，一個完整的 PDF 查看器，可以直接使用其提供的 viewer.html 查看 PDF 內(nèi)容，包含完整樣式和相關(guān)功能。優(yōu)點(diǎn)是快速集成，不需要自己實(shí)現(xiàn)查看器的功能和樣式。缺點(diǎn)是如果要自定義樣式和功能，反而會很麻煩。
- pdfjs-dist ，PDF.js 的預(yù)購建版本，只包含 PDF 內(nèi)容的渲染功能，需要自己實(shí)現(xiàn)查看器的樣式和相關(guān)功能。
Vue 官方插件庫 Awesome Vue.js 推薦的vue-pdf 就是對 pdfjs-dist 進(jìn)行了封裝實(shí)現(xiàn)，一般情況下使用 vue-pdf 即可快速實(shí)現(xiàn) PDF 的預(yù)覽效果。
根據(jù)需求進(jìn)行插件選型
我們的需求是在現(xiàn)有頁面中實(shí)現(xiàn) PDF 預(yù)覽的同時，在 PDF 內(nèi)容上添加水印。
PDF.js 這種完整版的查看器顯得過于臃腫，而 vue-pdf 雖然可以快速實(shí)現(xiàn)預(yù)覽效果，但在添加水印時需要對顯示 PDF 的 canvas 進(jìn)行二次渲染，經(jīng)過嘗試后發(fā)現(xiàn)會拋出 Failed to execute 'drawImage' on 'CanvasRenderingContext2D': Overload resolution failed. 的錯誤。
所以最后選擇直接集成 pdfjs-dist 來完成全部功能
安裝和引入插件
安裝
yarn add pdfjs-dist
引入
必須手動指定 workerSrc ，不然會拋出 Setting up fake worker failed 的錯誤。
雖然本地目錄 node_modules/pdfjs-dist/build/pdf.worker.js 存在該文件，但實(shí)際引入時依舊會報錯，所以只能使用 CDN 地址下的 pdf.worker.js ?？梢酝ㄟ^傳入 PDFJS.version 來提高引入的靈活性。
import * as PDFJS from 'pdfjs-dist'
PDFJS.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${PDFJS.version}/pdf.worker.js`
初始化插件
用于渲染內(nèi)容的 canvas 節(jié)點(diǎn)
<canvas id="pdfCanvas"></canvas>
用于接收 PDFJS 實(shí)例的對象
props: {
// PDF 文件的實(shí)際鏈接
url: {
type: String
}
},
data () {
return {
totalPage: 1,
// PDFJS 實(shí)例
pdfDoc: null
}
},
methods: {
_initPdf () {
PDFJS.getDocument(this.url).promise.then(pdf => {
// 文檔對象
this.pdfDoc = pdf
// 總頁數(shù)
this.totalPage = pdf.numPages
// 渲染頁面
this.$nextTick(() => {
this._renderPage()
})
})
}
}
監(jiān)聽鏈接變化并初始化實(shí)例
當(dāng)外部傳入的 url 有效時，就可以觸發(fā) PDF 查看器的初始化函數(shù)
watch: {
'url' (val) {
if (!val) {
return
}
this._initPdf()
}
},
渲染 PDF 內(nèi)容
獲取當(dāng)前頁面比率，用于計算內(nèi)容的實(shí)際寬高
methods: {
_getRatio (ctx) {
let dpr = window.devicePixelRatio || 1
let bsr =
ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio ||
1
return dpr / bsr
}
}
渲染當(dāng)前頁面
page.getViewport({ scale }) 中的 scale 非常關(guān)鍵，直接關(guān)系到渲染出來的內(nèi)容能不能撐滿整個父容器，所以這里分別獲取了父容器和頁面本身的寬度，父容器寬度 / 頁面寬度 后得出的比率就是實(shí)際頁面需要放大多少的比率。
page.view 是一個數(shù)組，里面有四個值，分別是 x軸偏移量、y軸偏移量、寬度、高度。 要獲取真實(shí)的寬度，還需要考慮當(dāng)前頁面比率，所以使用 page.view[2] * ratio 計算得出實(shí)際寬度。
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)
// 根據(jù)頁面寬度和視口寬度的比率就是內(nèi)容區(qū)的放大比率
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 })
// 記錄內(nèi)容區(qū)寬高，后期添加水印時需要
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(() => {})
})
}
}
實(shí)現(xiàn)頁面跳轉(zhuǎn)
準(zhǔn)備渲染隊列，防止渲染順序混亂
當(dāng)觸發(fā)頁面跳轉(zhuǎn)時，會調(diào)用 _renderQueue() 函數(shù)，而不是直接調(diào)用 _renderPage() 函數(shù)，因?yàn)槭欠耖_始渲染，要取決于當(dāng)前是否沒有正在被渲染的頁面。
data () {
return {
// 是否位于隊列中
rendering: false
}
},
methods: {
_renderQueue () {
if (this.rendering) {
return
}
this._renderPage()
}
}
在渲染頁面時改變隊列狀態(tài)
methods: {
_renderPage () {
// 隊列開始
this.rendering = true
this.pdfDoc.getPage(this.currentPage).then(page => {
// ... 省略實(shí)現(xiàn)代碼
page.render({
canvasContext: ctx,
viewport
}).promise.then(() => {
// 隊列結(jié)束
this.rendering = false
})
})
}
}
實(shí)現(xiàn)翻頁函數(shù)
data () {
return {
currentPage: 1,
totalPage: 1
}
},
computed: {
// 是否首頁
firstPage () {
return this.currentPage <= 1
},
// 是否尾頁
lastPage () {
return this.currentPage >= this.totalPage
},
},
methods: {
// 跳轉(zhuǎn)到首頁
firstPageHandler () {
if (this.firstPage) {
return
}
this.currentPage = 1
this._renderQueue()
},
// 跳轉(zhuǎn)到尾頁
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()
}
}
在頁面內(nèi)容中添加平鋪的文字水印
前端添加水印的方式毋庸置疑都是使用 canvas 進(jìn)行繪制。
最開始找到的方案是準(zhǔn)備一個 div 作為透明的遮罩層擋在內(nèi)容區(qū)的上層，然后將 canvas 繪制的水印使用 canvas.toDataURL('image/png') 導(dǎo)出成 Base64 格式，作為遮罩層的背景圖片進(jìn)行平鋪。 雖然可以實(shí)現(xiàn)效果，但這種方式只要簡單的打開瀏覽器控制臺，刪除這個遮罩層就可以去除水印。
之后在 Canvas 繪制另一個 Canvas 中找到 canvas 其實(shí)是可以將一個 canvas 作為圖片繪制到自身上的，于是有了接下來的方案。
繪制作為水印的 canvas
因?yàn)槭墙M件，所以水印的文字 watermark 由外部傳入。
繪制水印的 canvas 不需要添加到頁面中，繪制完成后直接將 DOM 元素返回即可，注意，返回的是 DOM 元素 ，而不是使用 getContext(2d) 獲取的畫布實(shí)例。
ctx.fillStyle 表示文字的透明度。 ctx.fillText(this.watermark, 50, 50) 表示文字在畫布中的位置，第一個值是文字內(nèi)容，第二個值是 x軸偏移量，第三個值是 y軸偏移量。
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
}
}
將水印平鋪到渲染內(nèi)容的 canvas 中
該方法參考自 HTML5 canvas 平鋪的幾種方法 ，ctx.rect(0, 0, this.width, this.height) 中的 width 和 height 就是在 _renderPage() 函數(shù)中記錄的頁面內(nèi)容區(qū)的實(shí)際寬高。只要將實(shí)際寬高傳入，canvas 就會自動根據(jù)水印圖片的大小和內(nèi)容區(qū)的大小自動實(shí)現(xiàn) x軸和 y軸的重復(fù)次數(shù)。
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()
}
}
頁面內(nèi)容渲染完成后，再次觸發(fā)水印渲染
methods: {
// 渲染頁面
_renderPage () {
this.pdfDoc.getPage(this.currentPage).then(page => {
// ... 省略實(shí)現(xiàn)代碼
page.render({
canvasContext: ctx,
viewport
}).promise.then(() => {
// 渲染水印
this._renderWatermark()
})
})
}
}
以上就是Vue 集成 PDF.js 實(shí)現(xiàn) PDF 預(yù)覽和添加水印的的詳細(xì)內(nèi)容，更多關(guān)于vue 實(shí)現(xiàn) PDF 預(yù)覽和添加水印的資料請關(guān)注腳本之家其它相關(guān)文章！
- Vue3+TypeScript項目中安裝PDF.js詳細(xì)的步驟
- vue中pdf.js的使用之pdf顯示、跳轉(zhuǎn)指定頁面及高亮關(guān)鍵詞
- Vue中使用pdf.js實(shí)現(xiàn)PDF文檔展示功能實(shí)例
- vue3使用pdf.js來預(yù)覽文件的操作步驟(本地文件測試)
- vue如何使用pdf.js實(shí)現(xiàn)在線查看pdf文件功能
- Vue使用PDF.js實(shí)現(xiàn)瀏覽pdf文件功能
- 使用Vue3+PDF.js實(shí)現(xiàn)PDF預(yù)覽功能
- vue使用pdf.js預(yù)覽pdf文件的方法
- vue實(shí)現(xiàn)在線預(yù)覽pdf文件和下載（pdf.js）
- Vue中使用PDF.js的實(shí)戰(zhàn)指南
相關(guān)文章
Vue中構(gòu)造數(shù)組數(shù)據(jù)之map和forEach方法實(shí)現(xiàn)
數(shù)組操作是前端最重要的數(shù)據(jù)操作，構(gòu)造數(shù)組數(shù)據(jù)，又是數(shù)組操作中很常見的，本文將梳理下map和forEach方法在Vue項目中的使用，感興趣的朋友跟隨小編一起看看吧2022-09-09
這篇文章主要介紹了Vue?如何關(guān)掉響應(yīng)式問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
在Vue應(yīng)用中,表單驗(yàn)證是非常重要的一部分,Vue提供了一些內(nèi)置的驗(yàn)證規(guī)則,比如required、min、max等,但是有時候我們需要對表單進(jìn)行自定義驗(yàn)證,以滿足特定的業(yè)務(wù)需求,本文將介紹如何在Vue中進(jìn)行表單自定義驗(yàn)證,感興趣的朋友可以參考下2023-12-12
今天小編就為大家分享一篇Vue axios設(shè)置訪問基礎(chǔ)路徑方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
文章介紹了如何使用JavaScript的`setTimeout`和Vue.js的`v-show`指令實(shí)現(xiàn)頁面自動播放,并通過CSS的`transition`和`animation`屬性控制動畫的播放時間2025-12-12
在Vue.js中,頁面跳轉(zhuǎn)是構(gòu)建單頁面應(yīng)用（SPA）的基本操作之一,本文將介紹Vue中實(shí)現(xiàn)頁面跳轉(zhuǎn)的幾種方法,并通過實(shí)例代碼幫助理解每種方法的用法,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了watch里面的deep和immediate作用及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
最近公司開發(fā)一個項目,采用的前后端分離的方式,前端采用vue,但是再項目開發(fā)過程中遇到一個比較麻煩的問題,下面這篇文章主要給大家介紹了關(guān)于vue?ui的安裝步驟以及使用的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要為大家介紹了vue組件通信的幾種方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹了vue-cli腳手架的.babelrc文件用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09