Vue3 H5 页面无构建工具使用 PDFH5

<p>可以使用以下步骤在不使用构建工具的方式下，用 vue3 在 H5 页面使用 pdfh5：</p>
<ol>
  <li>在 H5 页面中引入 pdfh5 的 js 文件。</li>
  <pre><code class="language-html"><script src='https://unpkg.com/pdfh5/dist/pdfh5.js'></script></code></pre>
  <li>在 Vue 的 mounted 生命周期中初始化 pdfh5。</li>
  <pre><code class="language-javascript">mounted() {
  const container = this.$refs.container;
  const pdf = new PDFH5(container, {
    src: 'path/to/pdf/file.pdf',
  });
  pdf.load();
},
</code></pre>
  <li>在 template 中定义一个包含 pdf 的容器。</li>
  <pre><code class="language-html"><template>
  <div ref="container"></div>
</template></code></pre>
  <li>样式调整。默认情况下，pdfh5 的容器会占据整个页面，需要根据需要设置样式调整。</li>
  <pre><code class="language-css"><style>
  #app {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #app > div {
    width: 80%;
    height: 80%;
  }
</style></code></pre>
  <p>以上是在不使用构建工具的方式下，用 vue3 在 H5 页面使用 pdfh5 的基本步骤。需要注意的是，pdfh5 的功能和性能可能受到浏览器的限制，建议在现代浏览器中使用。</p>