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

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

首先，你需要安装必要的依赖，包括 Vue 和 pdfjs-dist。在你的项目中运行：npm install vue pdfjs-dist @vueuse/core --save

引入需要的模块，在 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

创建一个方法来加载并处理 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>