Vue-pdfはPDFファイルのオンラインプレビューを実装します

Vue-pdfはPDFファイルのオンラインプレビューを実装します

序文

ほとんどのプロジェクトでは、PDF ファイルのオンライン プレビューに遭遇するでしょう。このプロジェクトは、要素 ui を使用し、vue-pdf を使用して実装されています。

依存関係をインストールする

npm インストール --save vue-pdf

関連パラメータ

パラメータの紹介:

  • url: PDF ファイルのパス。ローカル パスまたはオンライン パスにすることができます。
  • page: 現在表示されているページ番号。例: 最初のページ page=1
  • rotate: 回転角度。たとえば、0 は回転なし、+90 および -90 は水平回転を意味します。
  • progress: 現在のページの読み込みの進行状況。範囲は 0 ~ 1 です。1 の場合、現在のページが完全に読み込まれたことを意味します。
  • page-loaded: ページの読み込みが成功した場合のコールバック関数。ほとんど使用されません。
  • num-pages : 総ページ数
  • error: 読み込みエラーのコールバック
  • リンクがクリックされると、スタンドアロン PDF 内のリンクがトリガーされます。
  • print これは印刷機能です。 注意: Google Chrome では、フォントに関連する文字化けした文字が表示されます。

成し遂げる

<テンプレート>
    <div>
        <el-行>
            <el-button @click="onPreview" size="small">プレビュー</el-button>
        </el-row>
        <el-dialog title="契約書添付ファイルのプレビュー" :visible.sync="viewVisible" center width="60%" @close='closePreview'>
            <el-row :gutter="20">
                <span>合計 {{pageCount}} ページ、現在のページ {{pdfPage}}</span>
                <el-button type="text" size="mini" @click.stop="previousPage">前のページ</el-button>
                <el-button type="text" size="mini" @click.stop="nextPage">次のページ</el-button>
            </el-row>
            <div>
                <pdf :src="src" :page="pdfPage" @num-pages="pageCount = $event" @page-loaded="pdfPage = $event" style="display: inline-block; width: 100%"></pdf>
            </div>
        </el-ダイアログ>
    </div>
</テンプレート>
<スクリプト>
'vue-pdf' から pdf をインポートします
'@/store/' からストアをインポートします
エクスポートデフォルト{
    コンポーネント:{
        pdf
    },
    データ(){
        戻る {
            viewVisible: false、
            ソース: null、
            pdfページ: 1,
            ページ数: 0,
            トークン: store.getters.access_token、
        }
    },
    方法:{
        プレビュー(){
            this.src = pdf.createLoadingTask({
                URL: 'http://localhost:8082/file/demo.pdf',
                httpHeaders: {Authorization:'Bearer'+ this.token}
            });
            this.src.promise.then(pdf => {
                this.viewVisible = true;
            });
        },
        プレビューを閉じる(){
            this.pdfページ = 1;
        },
        前のページ(){
            p = this.pdfページとする
            p = p > 1 ? p-1 : this.pageCount
            this.pdfページ = p
        },
        次のページ(){
            p = this.pdfページとする
            p = p < this.pageCount ? p+1 : 1
            this.pdfページ = p
        }
    }
}
</スクリプト>

効果

注記

1. URL

urlはファイルアドレスパスです

this.src = pdf.createLoadingTask({
    URL: 'http://localhost:8082/file/demo.pdf',
});

2. リクエストヘッダーを設定する

httpHeadersを通じてトークンなどのパラメータを設定できます

httpHeaders: {Authorization:'Bearer'+ this.token}

3. 出典

これはもっと重要です。インターネット上の多くの投稿はこのようなものです。

this.src.then(pdf => {
    this.viewVisible = true;
})

TypeError を報告します: this.src.then は関数ではありません

TypeError: this.src.then は関数ではありません
    VueComponent.onPreview (index.vue?6ced:241) で
    クリック時 (index.vue?aaff:261)
    呼び出し時にエラー処理 (vue.runtime.esm.js?2b0e:1854)
    VueComponent.invoker (vue.runtime.esm.js?2b0e:2179) で
    呼び出し時にエラー処理 (vue.runtime.esm.js?2b0e:1854)
    VueComponent.Vue.$emit (vue.runtime.esm.js?2b0e:3888) で
    VueComponent.handleClick (element-ui.common.js?5c96:9413) で
    呼び出し時にエラー処理 (vue.runtime.esm.js?2b0e:1854)
    HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179) で
    HTMLButtonElement.original._wrapper (vue.runtime.esm.js?2b0e:6917) で

正解はこれです

this.src.promise.then(pdf => {
    this.viewVisible = true;
});

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

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

<<:  Windows 8 での MySQL Community Server 5.6 のインストールと設定のチュートリアル

>>:  Linux C バックグラウンドサービスプログラムの単一プロセス制御の実装

推薦する

Docker で MySQL クラスターを構築する方法の例

Docker の基本的な手順:アップデートパッケージ yum -y アップデートDocker仮想マシ...

MySQL シリーズ: MySQL リレーショナル データベースの基本概念

目次1. 基本概念2. データベース管理技術の開発3. リレーショナルデータベース(RDBMS)の概...

Vue は PDF.js を統合して PDF プレビューを実装し、透かしを追加する手順を実行します。

目次成果を達成する利用可能なプラグインの紹介ニーズに応じてプラグインを選択するプラグインのインストー...

MySQL はどのようにしてデータの整合性を確保するのでしょうか?

オンライン ビジネスにとってデータの一貫性と整合性が重要であることは明らかです。データが失われないよ...

MySQL 5.7 のインストールと設定の詳細な手順

1. MySQLをダウンロードする1. MySQLの公式ウェブサイトにログインし、64ビットシステム...

Vue プロジェクトで TypeScript クラスを適用する方法

目次1. はじめに2. 使用1. @コンポーネント2. 計算、データ、方法3. @props 4. ...

Nodejs は JSON 文字列を JSON オブジェクトに変換するエラー解決法

JSON 文字列を JSON オブジェクトに変換するにはどうすればいいですか? JSON.parse...

ページに間隔を空けてグリッドレイアウトを完璧に実装する方法

典型的なレイアウト例上の写真のように、正方形の真ん中に一定の隙間があり、その隙間は固定されています。...

js を使用して年カルーセル選択効果をネイティブに実装する例

序文js を使用して、年の回転選択効果を実現します。では早速、写真を見てみましょう。 1. アイデア...

CentOS7 での MySQL 8.0.16 のインストールと設定のチュートリアル

MySQLの古いバージョンをアンインストールします(古いバージョンがない場合は、この手順をスキップし...

JS配列インデックス検出におけるデータ型の問題の詳細な説明

WeChat アプレット プロジェクトを書いていたとき、その中に「都市選択」機能がありました。作者は...

MySQL データベース インデックスが B+ ツリーの使用を選択するのはなぜですか?

MySQL データベース インデックスが B+ ツリーを使用する理由をさらに分析する前に、データ構...

MySQL でのフィルター条件なしのカウントの詳細な説明

カウント(*)成し遂げる1. MyISAM: テーブル内の行の総数をディスク上に保存し、フィルタリン...

webkit-box-reflect を巧みに使用してさまざまな動的効果を実現する (要約)

かなり前の記事で、 -webkit-box-reflectプロパティについて説明しました。リフレクシ...

Linux で測位バックグラウンド サービスが時々クラッシュする問題の解決方法

問題の説明最近のバックグラウンドサービスでは、特定の命令の要求データをディスクに保存する新しい機能が...