Recently, because the company's project needs to preview the pdf function, I found some pdf plug-ins on the market at the beginning, and they were all available. However, later, because the pdf needs to be changed according to the content, and then there is a need for dynamic generation. The text of is not displayed. After changing a lot of plug-ins, none of them can be displayed, and I am speechless. (pdf-vue3, pdf.js, vue3-pdfjs, vue - pdf- embed and other plug-ins cannot display dynamic text)
First look at the effect:
This plugin supports custom functions, the only drawback is that it is a bit bulky, and the others are perfect.
········· Let me briefly talk about the design idea first. Write the page for viewing pdf as a component, and then bind the component to a route. When we click on the view pdf function on the list page, the pdf will be The address is passed into our pdf viewing component through routing, and then use the plug-in in the component to render our pdf file
Follow the steps below to get started
1. Create a new preview pdf component
<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>
Basically, if you understand a little bit of vue, you should be able to get to the writing method of the above code, so I won’t go into details here, and some points that need attention will be added with comments
1. After creating the vue file, bind the vue file to the route
3. The pdf address we obtained on the list page is passed to our pdf viewing component through routing.
const examine = (item: any) => {
router.push({
path: '/report/showpdf',
query: { url: item.fileUrl }
})4. Receive in the pdf routing component and call the pdf viewer plug-in
5, custom
When we render the pdf component, we see at this time that the component is actually rendered by html, usually rendered by canvas. Maybe this is the reason why dynamic text can be displayed. Since it is rendered by html, we can modify it html for custom functions,
We find the web/viweer.html file, find the function we need to operate, just hide or add the comment, and write the function in js
6. Ending
In the future, we will upload the file to csdn for free download. If there is a download requirement, you can chat with me directly and get a pdf preview. When you want to use the plug-in, you must read the tips in the plug-in folder document! !