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 をよろしくお願いいたします。

以下もご興味があるかもしれません: