Vue-Beispielcode für die Online-Vorschau von Office-Dateien

Ich arbeite derzeit an elektronischen Archiven und das Backend stellt den Huawei Cloud OSS-Link für die Dateien bereit. Die Funktion zum Herunterladen einer Datei per Klick wurde implementiert. Sie hoffen jedoch, dass sie reguläre Dateien direkt in der Vorschau anzeigen können, ohne sie herunterladen zu müssen.

Logischerweise können Sie zur Online-Vorschau von Dateien einfach einen Drittanbieterdienst kaufen, den Dienst auf dem Backend bereitstellen, ihn mit dem Frontend verbinden und alles andere wird erledigt.
Können Sie dem Dritten nicht standhalten, müssen Sie grundsätzlich Geld bezahlen. Wenn Sie kein Geld ausgeben möchten, welche anderen Lösungen gibt es?

Methode 1

Onlinevorschau mit Microsoft Office Online

https://view.officeapps.live.com/op/view.aspx?src=Dateiadresse Beispiel: https://view.officeapps.live.com/op/view.aspx?src=http://www.xxx.com/xxx.ppt

Methode 2

Nutzen Sie die Online-Vorschau des docx Cloud-Dienstes, die Nutzung ist ähnlich wie bei Microsoft

http://view.xdocin.com/xdoc?_xdoc=文件地址

Voraussetzung ist, dass die vom Backend bereitgestellte Dateiadresse ein öffentlich zugänglicher Link sein muss. Hier laden wir die Datei beispielsweise in die Huawei Cloud hoch. Die Datei kann nur angezeigt, nicht bearbeitet werden.

Die Wirkung ist wie folgt

Zum Code

    <!-- Vorschausymbol -->
                  <i
                    v-if="row.doc_url und canPreviewList.includes(row.doc_ext)"
                    Stil="Schriftstärke: fett;Schriftgröße: 16px;"
                    Klasse = "Link-Typ el-Icon-View"
                    @click.stop="VorschauDateiereignis(Zeile)"
                  />

    VorschauDateiEreignis(Zeile) {
      const typeArr = ['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx']
      lass url = ''
      wenn (typeArr.indexOf(row.doc_ext) !== -1) {
        // Verwenden Sie Microsoft Office Online
        url = 'http://view.officeapps.live.com/op/view.aspx?src=' + row.doc_url
      } anders {
        url = Zeile.doc_url
      }
      // window.open() öffnet in der Mitte const width = 1000; const height = 800
      const top = (window.screen.availHeight - Höhe) / 2
      const left = (window.screen.availWidth - Breite) / 2
      Fenster.öffnen(URL, '', 'Breite=' + Breite + ',Höhe=' + Höhe + ',Oben=' + oben + ',Links=' + links)
    }

Ich verwende den von Microsoft bereitgestellten Dienst. Kann zum Öffnen der Dateien „doc“, „docx“, „ppt“, „pptx“, „xls“ und „xlsx“ verwendet werden.
Einige Verarbeitungen wurden auch an anderen Dateien vorgenommen, beispielsweise an PDF- und Bilddateien, die über Links direkt geöffnet werden können und deren Browser eine direkte Vorschau unterstützt.
Bei anderen Dateien, die nicht in der Vorschau angezeigt werden können, habe ich die Einschränkung so vorgenommen, dass das Vorschausymbol nicht angezeigt wird.

Hier liegt ein Problem vor. Die txt-Datei wird beim direkten Öffnen im Browser verstümmelt. Der Download verlief normal, es wurde keine Lösung gefunden.
Wer es weiß, darf es gerne mitbringen. O(∩_∩)O

Der Grund für die Verstümmelung der TXT-Datei wurde gefunden. Es hängt mit dem Kodierungsformat des Browsers zusammen.

Die txt-Datei, die ich hier habe, ist in der UTF-8-Kodierung gespeichert. Der Standardbrowser ist jedoch nicht Google Chrome.

Es muss in das entsprechende Kodierungsformat geändert werden, damit die Anzeige normal erfolgt.

Um das Kodierungsformat von Google Chrome zu ändern, müssen Sie ein offizielles Plug-in Set Character Encoding aus dem App Store installieren.
Klicken Sie nach der Installation mit der rechten Maustaste auf die Seite, um das Kodierungsformat zu ändern.

Dies ist das Ende dieses Artikels über den Beispielcode von Vue zur Realisierung der Online-Vorschau von Office-Dateien. Weitere relevante Vue-Online-Vorschauen von Office-Inhalten 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!