效果图
安装
bash
复制代码
npm install vue3-pdf-app@1.0.3
完整案例
javascript
复制代码
<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>