FranklinWH-wiki/docs/.vitepress/theme/components/SecurePdfViewer.vue

<template>
  <div ref="container" style="border: 1px solid #ccc; width: 100%; height: 90vh; overflow-y: auto;" >
    <!-- <canvas ref="container" style="border: 1px solid #ccc; width: 100%; height: 100vh; overflow-y: auto;" /> -->
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { withBase } from 'vitepress'
import { decrypt } from '../../script/decrypt_pdf'
import * as pdfjsLib from 'pdfjs-dist'
import workerSrc from 'pdfjs-dist/build/pdf.worker.min.mjs?url'
pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc

const props = defineProps<{
  fileUrl: string
}>()

const container = ref<HTMLCanvasElement | null>(null)

onMounted(async () => {
  const decryptedData = await decrypt(withBase(props.fileUrl)).catch((err) => {
    console.error('Error during decrypt:', err)
    return undefined
  })
  if (!decryptedData) return
  const pdf = await pdfjsLib.getDocument({
    data: decryptedData
  }).promise.catch((err) => {
    console.error('Error during get document:', err)
    return undefined
  })
  if (!pdf) return

  for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
    const page = await pdf.getPage(pageNum).catch((err) => {
      console.error(`Error during get page ${pageNum}:`, err)
      return undefined
    })
    if (!page) return

    const viewport = page.getViewport({ scale: 1.1 })
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d')
    canvas.width = viewport.width
    canvas.height = viewport.height
    if (ctx) await page.render({ canvasContext: ctx, viewport }).promise.catch((err) => {
      console.error('Error during page render:', err)
    })
    canvas.style.marginBottom = '20px';
    container.value?.appendChild(canvas);
  }
})
</script>