Vue pdf 全屏并添加水印

你可以使用 Vue.js 和 PDF.js 来实现全屏查看 PDF 并添加水印的功能。

首先，你需要在 Vue.js 中引入 PDF.js，并创建一个 Vue 组件，用于加载和显示 PDF 文件。你可以使用以下代码来实现：

<template>
  <div ref="pdfViewer"></div>
</template>

<script>
import pdfjs from 'pdfjs-dist'

export default {
  mounted() {
    const pdfViewer = this.$refs.pdfViewer
    const pdfUrl = '/path/to/pdf/file.pdf'

    pdfjs.getDocument(pdfUrl).promise.then(pdf => {
      const viewer = pdfViewer.getElementsByClassName('pdfViewer')[0]
      const page = pdf.getPage(1)

      const viewport = page.getViewport({ scale: 1 })
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      const renderContext = {
        canvasContext: ctx,
        viewport: viewport
      }

      viewer.appendChild(canvas)
      canvas.width = viewport.width
      canvas.height = viewport.height

      page.render(renderContext)
    })
  }
}
</script>

接下来，你可以使用 `fullscreen API` 来实现全屏查看功能。你可以使用以下代码来实现：

<template>
  <div ref="pdfViewer" @click="toggleFullScreen"></div>
</template>

<script>
import pdfjs from 'pdfjs-dist'

export default {
  data() {
    return {
      isFullScreen: false
    }
  },
  mounted() {
    const pdfViewer = this.$refs.pdfViewer
    const pdfUrl = '/path/to/pdf/file.pdf'

    pdfjs.getDocument(pdfUrl).promise.then(pdf => {
      const viewer = pdfViewer.getElementsByClassName('pdfViewer')[0]
      const page = pdf.getPage(1)

      const viewport = page.getViewport({ scale: 1 })
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      const renderContext = {
        canvasContext: ctx,
        viewport: viewport
      }

      viewer.appendChild(canvas)
      canvas.width = viewport.width
      canvas.height = viewport.height

      page.render(renderContext)
    })
  },
  methods: {
    toggleFullScreen() {
      const element = this.$refs.pdfViewer

      if (!this.isFullScreen) {
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen()
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen()
        }

        this.isFullScreen = true
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }

        this.isFullScreen = false
      }
    }
  }
}
</script>

最后，你可以在 PDF 文件上添加水印。你可以使用以下代码来实现：

<template>
  <div ref="pdfViewer"></div>
</template>

<script>
import pdfjs from 'pdfjs-dist'

export default {
  mounted() {
    const pdfViewer = this.$refs.pdfViewer
    const pdfUrl = '/path/to/pdf/file.pdf'

    pdfjs.getDocument(pdfUrl).promise.then(pdf => {
      const viewer = pdfViewer.getElementsByClassName('pdfViewer')[0]
      const page = pdf.getPage(1)

      const viewport = page.getViewport({ scale: 1 })
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      const renderContext = {
        canvasContext: ctx,
        viewport: viewport
      }

      viewer.appendChild(canvas)
      canvas.width = viewport.width
      canvas.height = viewport.height

      page.render(renderContext).promise.then(() => {
        ctx.font = '50px Arial'
        ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'
        ctx.textAlign = 'center'
        ctx.fillText('Watermark', canvas.width / 2, canvas.height / 2)
      })
    })
  }
}
</script>

以上就是使用 Vue.js 和 PDF.js 实现全屏查看 PDF 并添加水印的方法。