vue3 のさまざまなファイルタイプのプレビュー機能の例

序文

石を踏みながら川を渡るのは気持ちの良いものではありません。大企業の上司が vue3 でプロジェクトをアップグレードするのに忙しいと聞いたので、私も参加してみたいです。小さな工場で働いていますが、まだ苦労するつもりはありません。新しいプロジェクトに取り組んでいて、vue3 を直接使用しています。とても興奮しているので、結果を気にしない人もいるかもしれませんが、つまずきながらも基本的に完成しました。記録してみましょう。

今日は開発プロセスにおける機能についてお話しましょう。とにかく、時間がかかるので、まずは機能要件についてお話ししましょう。ファイルをアップロードした後、ファイルリストでクリックしてプレビューできます。画像、ワード、エクセル、その他のドキュメントファイル、PDF、ビデオ、PC側のオーディオプレビューなどのファイルメディアタイプが含まれます。

1. オフィス文書の種類のプレビュー

最初に目にしたのは、Word や Excel などのドキュメントファイルのプレビューでした。この問題を解決するために、インターネットでいくつかの方法を検索し始めました。結局のところ、私には経験がほとんどありません。一部の人は、a タグを使用してプレビューを直接ダウンロードすることを推奨しましたが、これは明らかに私たちの期待を満たしていませんでした。一部の人は、Excel に sheetjs を使用することを推奨しましたが、Word の場合は別の方法を見つける必要もありました。最終的に、Microsoft のオンラインプレビューを使用し、iframe をキャリアとして使用することにしました。

<iframe フレームボーダー="0" 
:src="'https://view.officeapps.live.com/op/view.aspx?src=' + ファイル URL" width='100%'>
</iframe>

考慮すべき点は、当時の element-plus のダイアログポップアップボックスでは、iframe が親要素をうまく展開できなかったため、何らかのコードが入力されていたことです。また、読み込みプロセスが遅いため、時間の制約により、他の方法を試すことは考えませんでした。

2. PDF形式のプレビュー

このようなPDFプレビューの場合、簡単に解決できそうです。以前使用したnpm install pdfjs-distを使用すると完了です。現在のバージョンがvue3をサポートしていないとは思っていなかったので、実行すると当然エラーが報告されます。思い切ってBaiduで検索したところ、このpdfjs-dist vue3はサポートされていないとのことでした。別の方法を試してみましょう。私は***です、あなたは解決策を見つけたいと言いました、主人公はここにいます。ダウンロード後、ビルドフォルダーとWebフォルダーを参照用に公開ファイルの下に置いてください。アドレスが正しいかどうかに注意してください。埋め込みに入れました

  data.pdfUrl = './pdf/web/viewer.html?file='+type; // オンラインプレビュー

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

3. 画像の種類

このタイプについてはあまり言う必要はないと思います。コードを開いてURLを処理するだけです。

<div v-if="showImg == true" クラス="ダイアログボディコンテンツベーススタイル">
    <el-image
        クラス="画像プレビュー"
        :src="画像URL"
        />
</div>

4. ビデオの種類

動画タイプについては、本来は直接 video 要素を使いたかったのですが、私は自分の理想を追い求めるプログラマー志望者です。動画プレビュー用に vue-video-palyer を使い始めましたが、思ったようにはいきませんでした。vue3 でエラーが報告されました。はっきり言って、ベイビー、vue3 に対応していないのでは？大丈夫です、慣れています。皆さんにはvue-vam-videoを使うことをお勧めします

npm インストール vue-vam-video -s

「vue-vam-video」からVamVideoをインポートします。
コンポーネント:
    ヴァムビデオ、
},
セットアップ(プロパティ、コンテキスト) {
    constデータ = リアクティブ({
        ビデオオプション: {
            プロパティ:
                ポスター: ''、
                ソース: "",
                プリロード: "自動"、
                // ループ: "ループ",
                // 自動再生: "自動再生",
                // ミュート:true
            },
            ビデオスタイル: {
                幅: "100%",
                // 高さ: "600px",
            },
            コントロール構成: {
                fullScreenTit: "フルスクリーン",
                EscfullScreenTit: 「全画面表示を終了」、
                speedTit: "スピード",
                yinliangTit: 「ボリューム」、
                jingyinTit: 「サイレント」、
                playTit: 「再生」、
                pauseTit: 「一時停止」、
                フルスクリーン:true、
                速度:true、
                聞く:true
            }
        },
    })
}

<vam-ビデオ
    :properties="ビデオオプションのプロパティ"
    :videoStyle="ビデオオプション.videoStyle"
    :controlsConfig="ビデオオプション.controlsConfig"
    @play="ビデオを再生"
    @canplay="ビデオを再生できます"
    @pause="ビデオを一時停止"
</vam-ビデオ>

5. オーディオタイプ

上記の損失を被った後、最終的にオーディオタグを使用して直接使用することにしました。

<audio :src="musicUrl" コントロール></audio>

まとめると、皆さんは慎重に検討することをお勧めします。大規模な工場の上司は独自の部品ライブラリを持っているのでまったく心配していませんが、小規模な工場の私たちは注意する必要があります。 Vue のコンポーネントライブラリや関数ライブラリがもっと充実することを期待します。やはり巨人の肩の上に立つのは便利ですね。ソースコードを勉強しても大丈夫です。。。。。。

要約する

vue3 の各種ファイルのプレビュー機能に関するこの記事はこれで終わりです。vue3 ファイルのプレビューに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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