最近，因為公司項目需要預覽pdf的功能，開始的時候找了市面上的一些pdf插件，都能用，但是，后面因為pdf變成了需要根據內容進行變化的，然后，就出現了需要動態生成的文字不顯示了。換了好多好多的插件，都無法顯示，直接無語了。 （pdf-vue3，pdf.js,vue3-pdfjs,vue-pdf-embed等插件無法顯示動態文字）
先看效果：
????????
?這個插件支持自定義功能，唯一的缺點就是有點龐大，其他的就很完美了。
········我先簡單來說一下設計思路吧，將查看pdf的這個頁面寫成一個組件，然后將組件綁定一個路由，當我們在列表頁點擊查看pdf功能時，將pdf的地址通過路由傳入到我們的查看pdf的組件當中，然后在組件中使用插件，從而渲染我們的pdf文件
按照下面的步驟開始進行操作
1，創建一個新的預覽pdf的組件
<template><div class="table-container"><!-- <PDF :src="url" :disableFontFace="true"/> --><!-- <vue-pdf-embed :source="{cMapUrl: 'https://unpkg.com/pdfjs-dist/cmaps/',url: url,}"/> --><!-- <PdfViewer v-if="url" :url="url" :type="'canvas'" :pdfjsDistPath="'/src/components/pdfjsDistPath'" ></PdfViewer><pdf v-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>
<script lang="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";// Plus
export default defineComponent({name: 'showpdf',directives: {},components: {},setup() {const route = useRoute()let url = ref()onMounted(() => {url.value = route.query.url// getNumPages(route.query.url)})// 思考 ref 響應式和 reactive 響應式的區別； 修改對象屬性值，是否會刷新數據return {url}}
})
</script>
<style lang="stylus" scoped>.table-container{height: 100%;overflow: scroll;}</style>基本上稍微懂一點vue應該就能到上方代碼的寫法，這里就不多贅述了，有些要注意的地方會加上注釋
1，當創建好vue文件后，將該vue文件綁定在路由上
?3，我們在列表頁獲取到的pdf地址，通過路由傳遞到我們的pdf查看組件里。
const examine = (item: any) => {router.push({path: '/report/showpdf',query: { url: item.fileUrl }})4.在pdf路由組件里接收，并調用pdf查看器插件
?5,自定義
當我們渲染出pdf組件時，我們這時候看到，組件其實就是html渲染的，一般的都是畫布渲染，可能這就是能顯示動態文字的原因吧，既然是html渲染的，我們就能通過修改html來進行自定義功能啦，
?我們找到 web/viweer.html文件，找到我們需要操作的功能，注釋隱藏或者添加即可，在js里寫入功能即可
?6.結尾
后續我們把文件上傳到csdn里，供大家免費下載，如果出現下載需要條件的情況下，可以直接私聊我，獲取pdf預覽查看，當要使用插件時，一定要閱讀放插件文件夾里的提示文檔！！
