Vue2项目如何使用pdfjs-dist解析pdf

import * as pdfjsLib from 'pdfjs-dist/es5/build/pdf'
import pdfWorker from 'pdfjs-dist/es5/build/pdf.worker.entry'

pdfjsLib.GlobalWorkerOptions.workerSrc = pdfWorker
pdfjsLib.GlobalWorkerOptions.isEvalSupported = false // 关闭 eval 支持（防止漏洞）

# gpt给的案例
import * as pdfjsLib from 'pdfjs-dist/build/pdf'
import pdfWorker from 'pdfjs-dist/build/pdf.worker.entry'
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfWorker

// 解析过程省略，主要核心是引用方式的问题

# 前
import * as pdfjsLib from 'pdfjs-dist/build/pdf'
import pdfWorker from 'pdfjs-dist/build/pdf.worker.entry'
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfWorker

# 后
import * as pdfjsLib from 'pdfjs-dist/es5/build/pdf'
import pdfWorker from 'pdfjs-dist/es5/build/pdf.worker.entry'
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfWorker

pdfjsLib.GlobalWorkerOptions.isEvalSupported = false // 关闭 eval 支持（防止漏洞）

<template>
  <div class="pdf-viewer">
    <van-loading v-if="loading" type="spinner" size="32px" vertical>加载中</van-loading>
    <div v-else>
      <div v-if="error" class="fallback">
        <p>当前信息无法加载，您可以<a :href="pdfUrl" target="_blank">点击查看</a></p>
      </div>
      <div v-else>
        <div v-for="(page, index) in pages" :key="index" class="pdf-page">
          <img :src="page" :alt="'pdf ' + (index + 1)" class="pdf-image">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Loading } from 'vant'

// ? 使用pdfjs-dist的2.7.570版本的es5产物,该版本的es5的build产物没有特殊写法,对本项目vue.config.js、babel.config.js的兼容性最好
import * as pdfjsLib from 'pdfjs-dist/es5/build/pdf'
import pdfWorker from 'pdfjs-dist/es5/build/pdf.worker.entry'

pdfjsLib.GlobalWorkerOptions.workerSrc = pdfWorker
pdfjsLib.GlobalWorkerOptions.isEvalSupported = false // 关闭 eval 支持（防止漏洞）// 漏洞链接: https://www.venustech.com.cn/new_type/aqtg/20240514/27492.html

export default {
  name: 'pdf-viewer',
  props: {
    pdfUrl: {
      type: String,
      required: true,
    },
  },
  components: {
    [Loading.name]: Loading,
  },
  data() {
    return {
      pages: [],
      loading: true,
      error: false,
    }
  },
  mounted() {
    this.loadPdf()
  },
  methods: {
    async loadPdf() {
      try {
        const loadingTask = pdfjsLib.getDocument(this.pdfUrl)
        const pdf = await loadingTask.promise
        const pageImages = []

        for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
          const page = await pdf.getPage(pageNum)
          const viewport = page.getViewport({ scale: 2 }) // scale 调大可提高清晰度

          const canvas = document.createElement('canvas')
          const context = canvas.getContext('2d')
          canvas.width = viewport.width
          canvas.height = viewport.height

          await page.render({ canvasContext: context, viewport }).promise
          pageImages.push(canvas.toDataURL())
        }

        this.pages = pageImages
        this.loading = false
      } catch (e) {
        console.error('PDF 加载失败:', e)
        this.error = true
        this.loading = false
      }
    },
  },
}
</script>

<style lang="stylus" scoped>
.pdf-viewer {
  width: 100%;
  overflow-x: hidden;
}
.pdf-image {
  width: 100%;
  display: block;
  object-fit: contain;
}
.fallback {
  text-align: center;
  color: #999;
  font-size: 14px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  a {
    color: #007aff;
    text-decoration: underline;
  }
}
</style>

    // 判断文件类型（扩展名优先，fallback 为 HEAD）
    async detectFileType(url) {
      // 1. 特殊 scheme 优先判断
      if (url.startsWith('data:image/')) return 'image'
      if (url.startsWith('data:application/pdf')) return 'pdf'
      if (url.startsWith('blob:')) return 'unknown'

      // 2. 扩展名判断（宽松匹配）
      if (/\.(jpe?g|png|gif|bmp|webp|svg)([\?#].*)?$/i.test(url)) return 'image'
      if (/\.pdf([\?#].*)?$/i.test(url)) return 'pdf'

      // 3. 尝试发 HEAD 请求获取 content-type
      try {
        const res = await axios.head(url) // ? 支付宝小程序如果遇到404链接会导致页面白屏，微信、安卓不会
        const contentType = res.headers['content-type'] || ''
        if (contentType.includes('image/')) return 'image'
        if (contentType.includes('application/pdf')) return 'pdf'
      } catch (e) {
        console.warn('链接类型获取失败:', url, e.message)
      }

      return 'unknown'
    }