Vue3.js 中使用 pdfh5 库实现 PDF 预览

首先，需要引入 pdfh5 的依赖和 Vue3.js 的依赖。可以使用 npm 或 yarn 安装。

npm install pdfh5 vue@next

接着，在 Vue 组件中引入 pdfh5。

<template>
  <div>
    <pdfh5 :src='pdfSrc' />
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import 'pdfh5/dist/pdfh5.css'
import Pdfh5 from 'pdfh5'

export default defineComponent({
  name: 'PdfViewer',
  components: {
    Pdfh5
  },
  data() {
    return {
      pdfSrc: 'https://pdfjs.express/sample/files/eeb7a4a0-8b7a-11ea-b1a7-0f6a8a8c6735.pdf'
    }
  }
})
</script>

在上面的示例中，我们使用了 pdfh5 组件并传入了一个 pdf 文件的链接作为 src 属性。pdfh5 组件会自动加载并显示 pdf 文件。需要注意的是，我们还引入了 pdfh5 的样式文件。如果没有引入样式文件，则 pdfh5 组件可能无法正常显示。

最后，我们可以在应用程序中使用这个 Vue 组件。

<template>
  <div>
    <PdfViewer />
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import PdfViewer from './components/PdfViewer.vue'

export default defineComponent({
  name: 'App',
  components: {
    PdfViewer
  }
})
</script>