Vue3.js 中使用 pdfh5 库加载 PDF 文件

本文介绍如何在 Vue3.js 项目中使用 pdfh5 库加载并展示 PDF 文件。通过引入 pdf.worker.min.js 文件并将其配置到 PDF.js 库中，可以轻松实现 PDF 的展示功能。

您可以通过在组件中使用 import 语句来引入该 js 文件，如下所示：

<template>
  <div>
    <!-- PDF展示区域 -->
  </div>
</template>

<script>
import pdfWorker from 'https://cdn.jsdelivr.net/npm/pdfh5@1.4.2/js/pdf.worker.min.js';

export default {
  name: 'PdfViewer',
  mounted() {
    // 在mounted钩子函数中使用pdfWorker
    window.PDFJS.GlobalWorkerOptions.workerSrc = pdfWorker;
    // 加载PDF文件，展示PDF
  }
}
</script>

在上述代码中，我们通过 import 语句引入了该文件，并将其赋值给了 pdfWorker 变量。在 mounted 钩子函数中，我们将 pdfWorker 传递给 window.PDFJS.GlobalWorkerOptions.workerSrc，以使 PDF.js 库能够正确加载该文件。之后，即可使用 PDF.js 库加载并展示 PDF 文件。