invoicePre.vue

<template>
  <div class="container">
    <NavBar title="发票查看" left-arrow @click-left="goBack" />

    <div class="content">
      <VuePdfEmbed ref="pdfRef"  :source="pdfSource" :page="page" @rendered="handleDocumentRender"></VuePdfEmbed>
    </div>
  </div>
</template>

<script setup>
import { goBack } from "@/utils/globalFun"
import { NavBar, Toast } from "vant";
import VuePdfEmbed from 'vue-pdf-embed'
import { watchEffect } from 'vue'
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();
let isLoading = $ref(true)
const page = $ref(null)
const pdfRef = $ref('')
let pageCount = $ref(1)
const pdfSource = $ref(route.query.url)
let iframeUrl = $ref(route.query.url)


watchEffect(() => {
  if (isLoading) {
    Toast.loading({ message: '加载中...', forbidClick: true, overlay: true, duration: 0 });
  } else {
    Toast.clear()
  }
})

const handleDocumentRender = (args) => {
  console.log(args)
  isLoading = false
  pageCount = pdfRef.pageCount
}
</script>

<style lang="less" scoped>
.content {
  height: calc(100% - var(--van-nav-bar-height));
  overflow-y: auto;
}

.vue-pdf-embed {

}
</style>