vue项目实现预览pdf功能（解决动态文字无法显示的问题）

<template><divclass="table-container"><!--<PDF :src="url"  :disableFontFace="true"/>--><!--<vue-pdf-embed :source="{cMapUrl: 'https://unpkg.com/pdfjs-dist/cmaps/',
url: url,
  }"/> --><!--<PdfViewerv-if="url" :url="url" :type="'canvas'" :pdfjsDistPath="'/src/components/pdfjsDistPath'"></PdfViewer><pdfv-if="url" :url="url" :type="'canvas'" :pdfjsDistPath="'/src/components'"/>--><iframe :src="'static/pdf/web/viewer.html?file=' + url + '#page=1'"style="width: 100%; height: 100%"></iframe>  <!--!!!!注意这里，这里需要注意的地方有2个，第一个是我们的url，这个就是我们要预览的pdf的地址，第二个是#page=1 ，这个是打开时默认先展示第一页 --></div></template><scriptlang="ts">import { defineComponent, onMounted, reactive, ref, toRefs } from'vue'import { useRoute } from'vue-router'// import pdf from '../../components/pdf/pdf'// import PDF from "pdf-vue3";// PlusexportdefaultdefineComponent({
name: 'showpdf',
directives: {
    },
components: {},
setup() {
constroute=useRoute()
leturl=ref()
onMounted(() => {
url.value=route.query.url// getNumPages(route.query.url)        })
// 思考 ref 响应式和 reactive 响应式的区别； 修改对象属性值，是否会刷新数据return {
url        }
    }
})
</script><stylelang="stylus"scoped>    .table-container{
height: 100%;
overflow: scroll;
    }
</style>

constexamine= (item: any) => {
router.push({
path: '/report/showpdf',
query: { url: item.fileUrl }
            })