Vue は PDF.js を統合して PDF プレビューを実装し、透かしを追加する手順を実行します。

yarn pdfjs-dist を追加する

'pdfjs-dist' から * を PDFJS としてインポートします。

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

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

小道具: {
 // PDF ファイルの実際のリンク URL: {
 タイプ: 文字列
 }
},
データ （） {
 戻る {
 合計ページ: 1,
 // PDFJS インスタンス pdfDoc: null
 }
},
メソッド: {
 _initPdf() {
 PDFJS.getDocument(this.url).promise.then(pdf => {
 // ドキュメントオブジェクト this.pdfDoc = pdf
 //ページ総数 this.totalPage = pdf.numPages
 // ページをレンダリングします this.$nextTick(() => {
 this._renderPage()
 })
 })
 }
}

時計：
 'url' (値) {
 もし(!val) {
 戻る
 }

 this._initPdf()
 }
},

メソッド: {
 _getRatio(ctx) {
 dpr = window.devicePixelRatio || 1 とします
 bsr = とします
 ctx.webkitBackingStoreピクセル比 ||
 ctx.mozBackingStoreピクセル比 ||
 ctx.msBackingStoreピクセル比 ||
 ctx.oBackingStoreピクセル比 ||
 ctx.backingStoreピクセル比 ||
 1

 dpr / bsrを返す
 }
}

データ （） {
 戻る {
 現在のページ: 1,
 合計ページ: 1,
 幅: 0,
 高さ: 0,
 pdfDoc: ヌル
 }
},
メソッド: {
 _renderPage() {
 this.pdfDoc.getPage(this.currentPage).then(ページ => {
 キャンバスを document.querySelector('#pdfCanvas') にします。
 ctx = canvas.getContext('2d') とします。
 // ページ比率を取得する let ratio = this._getRatio(ctx)

 // ページ幅とビューポート幅の比率がコンテンツ領域の拡大率です。let dialogWidth = this.$refs['pdfDialog'].$el.querySelector('.el-dialog').clientWidth - 40
 pageWidth = page.view[2] * 比率とする
 scale = dialogWidth / pageWidth とします。

 viewport = page.getViewport({ scale }) とします。

 // コンテンツ領域の幅と高さを記録します。これは後で透かしを追加するときに必要になります。this.width = viewport.width * ratio
 this.height = viewport.height * 比率

 キャンバスの幅 = this.width
 キャンバスの高さ = this.height

 // スケーリング比率 ctx.setTransform(ratio, 0, 0, ratio, 0, 0)

 ページ.レンダリング({
 キャンバスコンテキスト: ctx,
 ビューポート
 }).promise.then(() => {})
 })
 }
}

データ （） {
 戻る {
 // キューレンダリング中かどうか: false
 }
},
メソッド: {
 _renderQueue() {
 if (this.rendering) {
 戻る
 }

 this._renderPage()
 }
}

メソッド: {
 _renderPage() {
 // キューが開始されます this.rendering = true

 this.pdfDoc.getPage(this.currentPage).then(ページ => {
 // ... 実装コードを省略 page.render({
 キャンバスコンテキスト: ctx,
 ビューポート
 }).promise.then(() => {
 // キューが終了します this.rendering = false
 })
 })
 }
}

データ （） {
 戻る {
 現在のページ: 1,
 合計ページ: 1
 }
},
計算: {
 // ホームページですか firstPage() {
 this.currentPage <= 1 を返す
 },
 // 最後のページかどうか lastPage() {
 this.currentPage >= this.totalPage を返します。
 },
},
メソッド: {
 // ホームページにジャンプ firstPageHandler () {
 if (this.firstPage) {
 戻る
 }

 this.currentPage = 1
 this._renderQueue()
 },
 // 最後のページにジャンプ lastPageHandler () {
 最後のページの場合
 戻る
 }

 this.currentPage = this.totalPage
 this._renderQueue()
 },
 // 前のページ previousPage() {
 if (this.firstPage) {
 戻る
 }

 this.currentPage--
 this._renderQueue()
 },
 // 次のページ nextPage() {
 最後のページの場合
 戻る
 }

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

小道具: {
 透かし：
 タイプ: 文字列、
 デフォルト: 'asing1elife'
 }
},
メソッド: {
 _initWatermark() {
 キャンバスを document.createElement('キャンバス') にします。
 キャンバス幅 = 200
 キャンバスの高さ = 200

 ctx = canvas.getContext('2d') とします。
 ctx.rotate(-18 * Math.PI / 180)
 ctx.font = '14px ヴェダナ'
 ctx.fillStyle = 'rgba(200, 200, 200, .3)'
 ctx.textAlign = '左'
 ctx.textBaseline = '中央'
 ctx.fillText(this.watermark, 50, 50)

 キャンバスを返す
 }
}

メソッド: {
 _renderWatermark() {
 キャンバスを document.querySelector('#pdfCanvas') にします。
 ctx = canvas.getContext('2d') とします。

 // タイル状の透かし let pattern = ctx.createPattern(this._initWatermark(), 'repeat')
 ctx.rect(0, 0, this.width, this.height)
 ctx.fillStyle = パターン
 ctx.fill()
 }
}

メソッド: {
 // レンダリング page_renderPage () {
 this.pdfDoc.getPage(this.currentPage).then(ページ => {
 // ... 実装コードを省略 page.render({
 キャンバスコンテキスト: ctx,
 ビューポート
 }).promise.then(() => {
 // 透かしをレンダリングする this._renderWatermark()
 })
 })
 }
}