Vue3+vue3-pdf-app@1.0.3实现加载 .pdf文件

效果图

安装

npm install vue3-pdf-app@1.0.3

完整案例

<script setup>
import { ref } from 'vue'
import VuePdfApp from "vue3-pdf-app"
import "vue3-pdf-app/dist/icons/main.css"

// const pdfUrl = ref("/test.pdf")
const pdfUrl = ref("https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf")

// 可选：监听页面加载和翻页事件
const onPdfLoaded = (pdf) => {
  console.log("PDF 加载完成", pdf)
}
const onPageChange = (pageNum) => {
  console.log("当前页码", pageNum)
}
</script>

<template>
  <div class="container">
    <VuePdfApp
      :pdf="pdfUrl"
      @loaded="onPdfLoaded"
      @page-change="onPageChange"
    />
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
  background-color: #c6c6c6;
}
</style>
<style>
/* 隐藏顶部工具栏 */
/* #toolbarContainer {
  display: none !important;
} */
</style>