vue3用pdfjs-dist去解析pdf，变成一个图片数组结构

Vue3 中，你可以使用 `pdfjs-dist` 这个库来解析 PDF 文件并将其转换为图片。以下是大致步骤：

1. 首先，你需要安装必要的依赖，包括 Vue 和 pdfjs-dist。在你的项目中运行：

npm install vue pdfjs-dist @vueuse/core --save

2. 引入需要的模块，在 Vue 组件中：

import Vue from 'vue';
import { ref } from '@vueuse/core';
import PDFJS from 'pdfjs-dist';
PDFJS.getDocument = Promise.resolve; // mock the async method for demo purposes

3. 创建一个方法来加载并处理 PDF，将每一页转化为 base64 图片：

async loadPdf(pdfUrl) {
  const pdf = await PDFJS.getDocument(pdfUrl);
  const pages = []; // 存储所有页面的图片数组

  for (let i = 1; i <= pdf.numPages; i++) {
    const page = await pdf.getPage(i);
    const scale = 1; // 设置缩放比例
    const viewport = page.getViewport(scale);

    // Render the page into a canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = viewport.width;
    canvas.height = viewport.height;

    await page.render({
      canvasContext: ctx,
      viewport: viewport,
    });

    // Get the image data and convert it to base64
    const imgData = canvas.toDataURL('image/png');

    pages.push(imgData); // 将 base64 图片添加到数组
  }

  return pages;
}

4. 现在你可以调用这个方法并在模板中显示图片数组了：

<template>
  <div>
    <button @click="loadPdf(yourPdfUrl).then(pages => console.log(pages))">Load PDF</button>
    <!-- 你可以在这里渲染图片，比如使用 v-for 循环 -->
    <div v-for="(page, index) in pages" :key="index">
      <img :src="page" alt="PDF Page {{ index + 1 }}">
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    ...,
  },
};
</script>