Office ファイルのオンライン プレビュー用の Vue サンプル コード

Office ファイルのオンライン プレビュー用の Vue サンプル コード

最近、電子アーカイブに取り組んでおり、バックエンドではファイルの Huawei Cloud OSS リンクを提供しています。クリックしてファイルをダウンロードする機能が実装されました。しかし、彼らは、通常のファイルをダウンロードせずに直接プレビューできることを望んでいます。

論理的に言えば、ファイルのオンラインプレビューを行うには、サードパーティのサービスを購入し、そのサービスをバックエンドに展開し、フロントエンドに接続するだけで、すべて完了します。
第三者に耐えられない場合は、基本的にお金を払わなければならなくなります。お金をかけたくない場合、他にどんな解決策がありますか?

方法1

Microsoft Office Online でオンラインプレビュー

https://view.officeapps.live.com/op/view.aspx?src=ファイル アドレス 例: https://view.officeapps.live.com/op/view.aspx?src=http://www.xxx.com/xxx.ppt

方法2

docxクラウドサービスのオンラインプレビューを使用します。使用方法はMicrosoftと同様です。

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

前提として、バックエンドによって提供されるファイル アドレスは、パブリックにアクセス可能なリンクである必要があります。たとえば、ここではファイルを Huawei Cloud にアップロードします。ファイルは表示のみ可能で、編集はできません。

効果は以下のとおりです

ここに画像の説明を挿入

ここに画像の説明を挿入

ここに画像の説明を挿入

コードについて

    <!-- プレビュー アイコン -->
                  <i
                    v-if="row.doc_url && canPreviewList.includes(row.doc_ext)"
                    スタイル="font-weight: bold;font-size:16px;"
                    クラス="link-type el-icon-view"
                    @click.stop="previewFileEvent(行)"
                  />
    プレビューファイルイベント(行) {
      const typeArr = ['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx']
      url = '' とします
      (typeArr.indexOf(row.doc_ext) !== -1) の場合 {
        // Microsoft Office Online を使用する
        url = 'http://view.officeapps.live.com/op/view.aspx?src=' + row.doc_url
      } それ以外 {
        url = 行.doc_url
      }
      // window.open() は中央に開きます const width = 1000; const height = 800
      定数 top = (window.screen.availHeight - 高さ) / 2
      定数 左 = (window.screen.availWidth - 幅) / 2
      window.open(url, '', 'width=' + width + ',height=' + height + ',top=' + top + ',left=' + left)
    }

Microsoft が提供するサービスを利用しています。 「doc」、「docx」、「ppt」、「pptx」、「xls」、「xlsx」ファイルを開くために使用できます。
PDF や画像ファイルなど、リンクから直接開くことができる他のファイルにもいくつかの処理が行われており、ブラウザは直接プレビューをサポートしています。
プレビューできないその他のファイルについては、プレビューアイコンが表示されないように制限しています。

ここで問題があります。ブラウザで直接開くと、txt ファイルが文字化けします。ダウンロードは正常でしたが、解決策は見つかりませんでした。
知っている人がいたら、ぜひ持ってきてください。オ(∩_∩)オ

txt ファイルが文字化けする原因が判明しました。これはブラウザのエンコード形式に関連しています。

ここにある txt ファイルは utf-8 エンコードで保存されています。しかし、デフォルトのブラウザは Google Chrome ではありません。

ここに画像の説明を挿入

正常に表示するには、対応するエンコード形式に変更する必要があります。

Google Chromeのエンコード形式を変更するには、App Storeから公式プラグイン「Set Character Encoding」をインストールする必要があります。
インストール後、ページを右クリックしてエンコード形式を変更します。

ここに画像の説明を挿入

これで、Office ファイルのオンライン プレビューを実現するための Vue のサンプル コードに関するこの記事は終了です。Office コンテンツの Vue オンライン プレビューの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue は PDF ファイルのオンライン プレビューとダウンロードを実装します (pdf.js)
  • Vue は PDF ドキュメントのオンライン プレビュー機能を実装しました
  • Vue プラグイン開発: pdf.js を使用してモバイル フォンで PDF ドキュメントのオンライン プレビューを実現する方法
  • Vue は PDF ファイルのオンライン プレビューを実装します (pdf.js/iframe/embed を使用)
  • vue vue-pdf を使用して PDF オンライン プレビューを実装するためのサンプル コード
  • Vue-pdfはPDFファイルのオンラインプレビューを実装します
  • vue-pdf はオンラインファイルプレビューを実現します
  • Vue プロジェクトでよく使用される 3 つのファイル タイプ (pdf/word/excel テーブル) のオンライン プレビュー

<<:  Centos7 に Docker をインストールします (2020 の最新バージョンが利用可能、コピーして貼り付けるだけ)

>>:  HTMLの行間設定方法と問題点

推薦する

JavaScript の useRef と useState の紹介

目次1. useStateフック2. useRefフック3. useRef と useState 4...

Linux の EXT シリーズファイルシステムフォーマットの詳細な説明

Linux ファイルシステム一般的なハードディスクは上図のとおりです。各ディスクは複数のトラックに分...

JavaScriptのURLオブジェクトとは何かについて話しましょう

目次概要ハッシュプロパティホストプロパティホスト名属性Href属性起源のプロパティユーザー名とパスワ...

Vue における v-model を使用したクロスコンポーネントバインディングの基本的な実装方法

みなさんこんにちは。今日はv-modelを使って親子コンポーネントのバインディング効果を実現する方法...

MySQLは挿入を使用して複数のレコードを挿入し、データを一括で追加します。

table1 に 5 つのレコードを挿入する場合、次のコードは誤りです。 テーブル1に(id,na...

VMware に Centos7 をインストールした後に外部ネットワークに ping できない問題を解決する

クラスターを構成する際に問題が発生しました。当初は 3 台の仮想マシンすべてが外部ネットワークに p...

Centos8 で Apache httpd2.4.37 を使用して Web サーバーをインストールする詳細な手順

ステップ 1: yum install httpd -y #httpd サービスをインストールします...

VUEプロジェクトでXSS攻撃に遭遇した実体験

目次序文原因を発見するカスタムフィルタリングルール要約する序文インターネットの急速な発展に伴い、情報...

Vueベースのカスタムコンポーネントを実装してアイコンを導入する

序文プロジェクト開発では、アイコンを使用する方法はたくさんあります。iconfont で適切なアイコ...

Mac に MySQL データベースをインストールし、環境変数を設定するためのグラフィック チュートリアル

目次MySQLをインストールする環境変数の設定MySQLをインストールするmysqlをダウンロードし...

CSS フロートプロパティ図 フロートプロパティの詳細

CSS の float プロパティを正しく使用することは、カバーすべき内容が多く、ブラウザの互換性の...

Vue.js の watch メソッドと computed メソッドの違いの詳細な例

目次序文導入1. 作用機序2. 自然から3. 時計と計算の比較4. メソッドはデータロジックの関係を...

CentOS に MySQL 8.0 をインストールして設定するための詳細な手順

序文CentOS に MySQL をインストールして設定する手順は次のとおりです。文章yumソースか...

DockerとFastDFSのインストールコマンドと使い方の詳しい説明

Dockerの機能1) すぐに始められるユーザーがプログラムを「Docker 化」するには、わずか数...

VueはExcelデータをエクスポートするパブリック関数メソッドをカプセル化します

vue+element UI は Excel データをエクスポートするためのパブリック関数をカプセル...