Beispiele für Vorschaufunktionen für verschiedene Dateitypen in vue3

Vorwort

Es ist kein angenehmes Gefühl, den Fluss zu überqueren, indem man die Steine ​​berührt. Ich habe gehört, dass die Chefs großer Unternehmen damit beschäftigt sind, ihre Projekte mit Vue3 zu aktualisieren, also würde ich gerne bei dem Spaß mitmachen. Obwohl ich in einer kleinen Fabrik arbeite, bin ich immer noch nicht bereit, zu kämpfen. Ich arbeite an einem neuen Projekt und verwende vue3 direkt. Ich bin so aufgeregt, dass sich manche Leute vielleicht nicht um die Konsequenzen kümmern, aber ich habe es im Grunde nach einigem Herumprobieren fertiggestellt. Lass es uns aufzeichnen.

Lassen Sie uns heute über eine Funktion im Entwicklungsprozess sprechen! Wie dem auch sei, es nimmt viel Zeit in Anspruch, also lassen Sie uns zuerst über die funktionalen Anforderungen sprechen: Nachdem Sie eine Datei hochgeladen haben, können Sie sie in der Dateiliste in der Vorschau anzeigen, einschließlich Dateimedientypen wie Bilder, Word-, Excel- und andere Dokumentdateien, PDF, Video und Audiovorschau für die PC-Seite

1. Vorschau der Office-Dokumenttypen

Das Erste, was ich sah, war die Vorschau von Dokumentdateien wie Word und Excel. Ich begann im Internet nach Methoden zu suchen, um dieses Problem zu lösen. Schließlich hatte ich wenig Erfahrung. Einige Leute empfahlen, die Vorschau direkt mit dem A-Tag herunterzuladen, was offensichtlich nicht unseren Erwartungen entsprach. Einige Leute empfahlen, SheetJS für Excel zu verwenden, aber wir müssen auch einen anderen Weg für Word finden. Am Ende entschied ich mich, die Online-Vorschau von Microsoft zu verwenden und iframe als Träger zu verwenden.

<iframe Rahmenrand="0" 
:src="'https://view.officeapps.live.com/op/view.aspx?src=' + fileUrl" width='100%'>
</iframe>

Zu berücksichtigen ist, dass im Dialog-Popup-Fenster von Element-Plus das Iframe das übergeordnete Element zu diesem Zeitpunkt nicht gut erweitern konnte und daher Code eingefügt wurde. Und da der Ladevorgang langsam ist, habe ich aus Zeitgründen nicht daran gedacht, andere Methoden auszuprobieren.

2. Vorschau des PDF-Typs

Für diese Art von PDF-Vorschau scheint es einfach zu lösen. Verwenden Sie das npm install pdfjs-dist, das ich zuvor verwendet habe, und fertig. Ich hätte nie erwartet, dass meine aktuelle Version vue3 nicht unterstützt, daher wird natürlich ein Fehler gemeldet, wenn ich sie ausführe. Ich habe Baidu gründlich durchsucht und Baidu hat mir gesagt, dass dieses pdfjs-dist vue3 es nicht unterstützt. Versuchen wir es mit einer anderen Methode. Ich bin ***, Sie sagten, ich möchte eine Lösung finden, der Protagonist ist hier. Legen Sie nach dem Herunterladen die Build- und Webordner als Referenz in unseren öffentlichen Dateien ab. Achten Sie darauf, ob Ihre Adresse korrekt ist. Ich habe sie in ein Embed eingefügt

  data.pdfUrl = './pdf/web/viewer.html?file='+type; // Online-Vorschau

 <embed: src="pdfUrl" style="width: 100%; "/>

3. Bildtyp

Ich denke, wir müssen nicht viel über diesen Typ sagen, gehen Sie einfach zum Code und verarbeiten Sie die URL

<div v-if="showImg == true" Klasse="dialog-body-content-base-style">
    <el-Bild
        Klasse="Bildvorschau"
        :src="Bild-URL"
        />
</div>

4. Videotyp

Für den Videotyp wollte ich ursprünglich das Videoelement direkt verwenden, aber ich bin ein aufstrebender Programmierer, der seine eigenen Ideale verfolgt. Ich begann, vue-video-player für die Videovorschau zu verwenden, aber es lief nicht so, wie ich es mir gewünscht hatte. In vue3 wurde ein Fehler gemeldet. Um es ganz offen zu sagen: Baby, es unterstützt vue3 nicht? Es ist okay, ich bin daran gewöhnt. Ich empfehle jedem, vue-vam-video zu verwenden

npm installiere vue-vam-video -s

importiere VamVideo von „vue-vam-video“;
Komponenten:
    VamVideo,
},
setup(Requisiten,Kontext) {
    const Daten = reaktiv({
        Videooption: {
            Eigenschaften:
                Poster: '',
                Quelle:"",
                Vorspannung: "auto",
                // Schleife: "Schleife",
                // automatische Wiedergabe: "automatische Wiedergabe",
                // stummgeschaltet: wahr
            },
            Videostil: {
                Breite: "100%",
                // Höhe: "600px",
            },
            Steuerungskonfiguration: {
                fullScreenTit: "Vollbild",
                EscfullScreenTit: "Vollbildmodus beenden",
                speedTit: "Geschwindigkeit",
                yinliangTit: "Lautstärke",
                jingyinTit: „Still“,
                playTit: "Spielen",
                pauseTit: "Pause",
                Vollbild:true,
                Geschwindigkeit: wahr,
                hören:wahr
            }
        },
    })
}     

<vam-video
    :Eigenschaften="videoOption.Eigenschaften"
    :videoStyle="videoOption.videoStyle"
    :controlsConfig="videoOption.controlsConfig"
    @play="Video abspielen"
    @canplay="kannVideo abspielen"
    @pause="Video anhalten"
></vam-video>

5. Audiotyp

Nachdem ich den oben genannten Verlust erlitten hatte, habe ich mich schließlich dazu entschlossen, das Audio-Tag zu verwenden und es einfach direkt zu nutzen.

<audio :src="musicUrl" steuert></audio>

Zusammenfassend empfehle ich, dass jeder sorgfältig darüber nachdenkt. Die Chefs in großen Fabriken haben ihre eigenen Komponentenbibliotheken und machen sich überhaupt keine Sorgen, aber wir in kleinen Fabriken sollten vorsichtig sein. Ich hoffe, dass die Komponenten- und Funktionsbibliotheken von Vue vollständiger werden. Schließlich ist es bequem, auf den Schultern von Riesen zu stehen. Es ist in Ordnung, den Quellcode zu studieren. . . . . .

Zusammenfassen

Dies ist das Ende dieses Artikels über die Vorschaufunktion verschiedener Dateitypen in vue3. Weitere relevante Inhalte zur vue3-Dateivorschau finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!