Vue で pdfjs を使用して PDF ファイルをプレビューする方法

序文

プロジェクトの作成プロセスでは、PDF ファイルが使用されることがあります。PDF ファイルを表示したい場合、まず PDF ファイルをダウンロードし、その後、コンピューターにインストールされている PDF を開くための専用ソフトウェアを使用して PDF ファイルを表示しますか?ユーザーにソフトウェアをインストールさせないという要件があったらどうなるでしょうか? 結局のところ、ソフトウェアのインストール方法やソフトウェアを開くために何が必要かを知らないユーザーがまだたくさんいます。そうですね、そういう需要があるなら実現するしかないですね。結局、この理由を否定することはできないですから。

考える

せっかく話題になったので、使い方を考えてみましょう。 pdf を使用する必要があるためです。 js で操作できるライブラリファイルはありますか? Baidu で検索するだけで、今日の主役である pdfjs が見つかります。

ライブラリディレクトリの解析とダウンロード

計画ができたので、それを検討してみましょう。まず、このライブラリのファイルをダウンロードする必要があります。ダウンロードアドレス: ここをクリックしてダウンロードしてください。このページには 2 つのバージョンがあり、1 つは古いバージョンと互換性があり、実際の状況に応じてダウンロードできます。

ダウンロードしたコードの構造は次のとおりです。

ここには 2 つのフォルダがあります:

ビルドこれはPDFコアファイルです
ウェブの例

使い方

使用方法は 2 つあります。1 つはコアライブラリファイルを使用して PDF プレビューを独自に実装する方法、もう 1 つは提供されている例を使用して PDF ファイルをプレビューする方法です。ここでは、PDF ファイルをプレビューするために、示された例を使用します。興味がある場合は、コアファイルを使用して実装する方法を学習できます。

ファイルの場所

まず、ダウンロードしたファイルを以下のように Vue プロジェクトの静的ディレクトリに配置する必要があります。

実際の通話

必要な場所で呼び出すには、次のメソッドを使用します。

var url = encodeURIComponent(window.location.origin+'/other/202101/dc88623a-74c4-49c4-bc95-7e34d9cf6163.pdf')
window.open(window.location.origin + window.location.pathname+'static/pdfjs/web/viewer.html?file='+url)

上記の PDF アドレスは、ローカルに置いたパスです。ここでのパスは相対パスでも絶対パスでもかまいません。上記は絶対パスです。

このとき、次の効果を確認できます。

質問

この PDF ファイルのアドレスと現在ダウンロードされているライブラリファイルのアドレスが同じドメインにある場合、大きな問題は発生しません。異なるドメインにある場合は、クロスドメインの問題を解決する必要があります。ここで解決する必要があることが 1 つあります。それは、ダウンロードしたライブラリファイルです。viewer.js ファイルで次のコンテンツコメントを見つけます。