基于最新 pdf.js 在 Vue3 中预览pdf的方法

<template>
  <div class="pdf-container">
    <iframe
      :src="pdfUrl"
      style="width: 100%; height: 100%; border: none;"
    ></iframe>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const pdfUrl = ref('https://pdfjs.knightlab.com/samples/pdf.worker.js');
 
    // 这里可以添加更多逻辑，比如处理pdf.js的API
 
    return {
      pdfUrl
    };
  }
};
</script>
 
<style>
.pdf-container {
  width: 600px;
  height: 600px;
}
</style>

这个简单的Vue组件展示了如何在Vue 3应用中嵌入一个PDF.js预览器。它使用了一个<iframe>来指向pdf.worker.js脚本，该脚本是PDF.js库的一部分，用于在网页上渲染PDF文件。这个例子假设你已经有了正确的PDF.js库和相关的HTML结构。在实际应用中，你可能需要处理更多的逻辑，比如如何加载PDF文件和处理PDF的页面导航。