Vue-Projektvorschau-PDF-Funktion (um das Problem zu lösen, dass dynamischer Text nicht angezeigt werden kann)

Da das Projekt des Unternehmens kürzlich eine Vorschau der PDF-Funktion benötigt, habe ich zunächst einige PDF-Plug-Ins auf dem Markt gefunden, die alle verfügbar waren. Später jedoch, da das PDF entsprechend dem Inhalt geändert werden muss, und Dann ist eine dynamische Generierung erforderlich. Der Text von wird nicht angezeigt. Nachdem ich viele Plug-Ins geändert habe, kann keines davon angezeigt werden und ich bin sprachlos. (pdf-vue3, pdf.js, vue3-pdfjs, vue - pdf- embed und andere Plug-ins können keinen dynamischen Text anzeigen)

Schauen Sie sich zunächst den Effekt an:

        

 Dieses Plugin unterstützt benutzerdefinierte Funktionen. Der einzige Nachteil ist, dass es etwas sperrig ist, und die anderen sind perfekt.

········· Lassen Sie mich zunächst kurz auf die Designidee eingehen. Schreiben Sie die Seite zum Anzeigen von PDF als Komponente und binden Sie die Komponente dann an eine Route. Wenn wir auf der Listenseite auf die Funktion „PDF anzeigen“ klicken , das PDF wird sein Die Adresse wird durch Routing an unsere PDF-Anzeigekomponente übergeben und verwendet dann das Plug-In in der Komponente, um unsere PDF-Datei zu rendern

Befolgen Sie die nachstehenden Schritte, um zu beginnen

1. Erstellen Sie eine neue Vorschau-PDF-Komponente

<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>
    

Wenn Sie ein wenig Vue verstehen, sollten Sie grundsätzlich mit der Schreibmethode des obigen Codes vertraut sein. Daher werde ich hier nicht auf Details eingehen und einige Punkte, die Aufmerksamkeit erfordern, mit Kommentaren hinzufügen

1. Binden Sie nach dem Erstellen der Vue-Datei die Vue-Datei an die Route

 3. Die PDF-Adresse, die wir auf der Listenseite erhalten haben, wird per Routing an unsere PDF-Anzeigekomponente weitergeleitet.

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

4. Empfangen Sie die PDF-Routing-Komponente und rufen Sie das PDF-Viewer-Plugin auf

 5, benutzerdefiniert

Wenn wir die PDF-Komponente rendern, sehen wir zu diesem Zeitpunkt, dass die Komponente tatsächlich von HTML gerendert wird, normalerweise von Canvas. Vielleicht ist dies der Grund, warum dynamischer Text angezeigt werden kann. Da er von HTML gerendert wird, können wir ihn in HTML ändern für benutzerdefinierte Funktionen,

 Wir finden die Datei web/viweer.html, finden die Funktion, die wir ausführen müssen, verstecken oder fügen einfach den Kommentar hinzu und schreiben die Funktion in js

 6. Ende

In Zukunft werden wir die Datei zum kostenlosen Download auf csdn hochladen. Wenn ein Download erforderlich ist, können Sie direkt mit mir chatten und eine PDF-Vorschau erhalten. Wenn Sie das Plug-in verwenden möchten, müssen Sie die Tipps lesen das Plug-in-Ordnerdokument! !