最近、電子アーカイブに取り組んでおり、バックエンドではファイルの Huawei Cloud OSS リンクを提供しています。クリックしてファイルをダウンロードする機能が実装されました。しかし、彼らは、通常のファイルをダウンロードせずに直接プレビューできることを望んでいます。 論理的に言えば、ファイルのオンラインプレビューを行うには、サードパーティのサービスを購入し、そのサービスをバックエンドに展開し、フロントエンドに接続するだけで、すべて完了します。 方法1Microsoft Office Online でオンラインプレビュー https://view.officeapps.live.com/op/view.aspx?src=ファイル アドレス 例: 方法2docxクラウドサービスのオンラインプレビューを使用します。使用方法はMicrosoftと同様です。 前提として、バックエンドによって提供されるファイル アドレスは、パブリックにアクセス可能なリンクである必要があります。たとえば、ここではファイルを 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」ファイルを開くために使用できます。 ここで問題があります。ブラウザで直接開くと、txt ファイルが文字化けします。ダウンロードは正常でしたが、解決策は見つかりませんでした。 txt ファイルが文字化けする原因が判明しました。これはブラウザのエンコード形式に関連しています。 ここにある txt ファイルは utf-8 エンコードで保存されています。しかし、デフォルトのブラウザは Google Chrome ではありません。 正常に表示するには、対応するエンコード形式に変更する必要があります。 Google Chromeのエンコード形式を変更するには、App Storeから公式プラグイン「Set Character Encoding」をインストールする必要があります。 これで、Office ファイルのオンライン プレビューを実現するための Vue のサンプル コードに関するこの記事は終了です。Office コンテンツの Vue オンライン プレビューの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Centos7 に Docker をインストールします (2020 の最新バージョンが利用可能、コピーして貼り付けるだけ)
目次1. useStateフック2. useRefフック3. useRef と useState 4...
Linux ファイルシステム一般的なハードディスクは上図のとおりです。各ディスクは複数のトラックに分...
目次概要ハッシュプロパティホストプロパティホスト名属性Href属性起源のプロパティユーザー名とパスワ...
みなさんこんにちは。今日はv-modelを使って親子コンポーネントのバインディング効果を実現する方法...
table1 に 5 つのレコードを挿入する場合、次のコードは誤りです。 テーブル1に(id,na...
クラスターを構成する際に問題が発生しました。当初は 3 台の仮想マシンすべてが外部ネットワークに p...
ステップ 1: yum install httpd -y #httpd サービスをインストールします...
目次序文原因を発見するカスタムフィルタリングルール要約する序文インターネットの急速な発展に伴い、情報...
序文プロジェクト開発では、アイコンを使用する方法はたくさんあります。iconfont で適切なアイコ...
目次MySQLをインストールする環境変数の設定MySQLをインストールするmysqlをダウンロードし...
CSS の float プロパティを正しく使用することは、カバーすべき内容が多く、ブラウザの互換性の...
目次序文導入1. 作用機序2. 自然から3. 時計と計算の比較4. メソッドはデータロジックの関係を...
序文CentOS に MySQL をインストールして設定する手順は次のとおりです。文章yumソースか...
Dockerの機能1) すぐに始められるユーザーがプログラムを「Docker 化」するには、わずか数...
vue+element UI は Excel データをエクスポートするためのパブリック関数をカプセル...