PDF.js を使用して WeChat ミニプログラムで PDF ファイルをプレビューする

WeChat アプレットでは、wx.downloadFileおよびwx.openDocument API を通じて PDF ファイルをダウンロードして開くことができます。この方法には多くの主な欠点があります。

1. 閲覧する前にダウンロードする必要があり、開くたびにダウンロードして一時ファイルを生成する必要があります。PDF ファイルの数が多い場合、一時ファイルもどんどん増えていきます。 PDFファイルが大きいと、開くのが遅くなります。

2. ナビゲーションバーに表示されるタイトルは一時的なファイル名であり、見た目が十分ではありません。

3. ページをめくるのが不便です。

ミニプログラムで PDF を直接プレビューできますか? WeChatアプレットのWebビューを使ってPDFファイルを表示しようとしましたが、開発ツールでは表示できるのですが、実機では表示できません。WeChat オープンコミュニティで、 PDF.jsを使用して PDF ファイルをブラウザで開いている人を見ました。PDF.js は Mozilla によってサポートされています。目標は、PDF を解析してレンダリングするためのユニバーサルな Web 標準ベースのプラットフォームを作成することです。web-view PDF.js で解析された PDF ファイルは、WeChat 開発ツールでは正常に表示できませんが、幸いなことに、実機では正常に表示できます。

PDF.js を使用して PDF を解析する方法は次のとおりです。

1. PDF.js 公式 Web サイトにアクセスして、このフレームワークをダウンロードします: https://mozilla.github.io/pdf.js/getting_started

2. PDF.js を Web サイトに展開します。PDF.js には web と build という 2 つのフォルダーがあります。これら 2 つのファイルを Web サイトのディレクトリ (pdfljs ディレクトリなど) に配置します。web ディレクトリには viewer.html ファイルがあります。オンラインで PDF ファイルを解析するために使用できます。もちろん、PDF ファイルへのリンクは同じドメイン名である必要があります。プレビュー方法は次のとおりです。

https://wwww.domianname.com/pdfjs/web/viewer.html?file=xxx/xxx/xxx.pdf

次に、このリンクを Web ビューで開くと、PDF ファイルを直接プレビューできます。

上記の方法における PDF ファイルへのリンクは、設定する必要があるミニプログラムビジネスドメイン名にあることに注意してください。クロスドメインリンクもサポートされていますが、特別な処理が必要です。詳細については、リンクを参照してください: https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#faq-xhr

PDF.js を使用して WeChat アプレットで PDF ファイルをプレビューし、サイドバー、検索、ページング、ズーム、テキストの追加、描画、回転、プレゼンテーションモードなどの PDF.js 関連機能をサポートします。

上記は公式のviewer.htmlでPDFファイルを表示する方法ですが、PDF.jsを導入することで解析して表示することもでき、機能をカスタマイズすることができます。以下のような方法:

1. pdf.js ライブラリの導入

<script src="./build/pdf.js"></script>
<script src="./build//pdf.worker.js"></script>

2. キャンバスを使用して、読み取る必要のある PDF コンテンツを受信し、表示します。

<canvas id="myCanvas"></canvas>

3. PDF オブジェクトを作成します。データは、PDF ファイルに対応する Base64 文字列、ファイルへの相対パスまたは絶対パス、またはオンラインファイルの URL アドレスにすることができます。

var loadingTask = pdfjsLib.getDocument(data)
loadingTask.promise.then(function (pdf) {
                for (var i = 1; i <= pdf.numPages; i++) {
                    pdf.getPage(1).then(function (page) {
                        var scale = 2
                        var viewport = page.getViewport({ scale: scale })
                        var canvas = document.getElementById('myCanvas')
                        var context = canvas.getContext('2d')
                        canvas.height = viewport.height
                        canvas.width = viewport.width
                        var renderContext = {
                            canvasContext: context,
                            viewport: viewport,
                        };
                        page.render(renderContext);
                    })
                }
            });

PDF.js の詳細については、公式 Web サイトを参照してください: https://mozilla.github.io/pdf.js/

誰もがそれを体験し、提案をし、 CRMEB オープンソースモールシステムをより強力にし、より多くの開発者に利益をもたらすために協力することを歓迎します。オープンソースですが、必要な機能はすべて揃っています。共同購入、フラッシュセール、クーポン、くじ、ポイント、ライブ配信、配信、ページDIY…モールシステムの共通機能はすべてオープンソースでそのまま利用可能！

PDF.js を使用して WeChat ミニ プログラムで PDF ファイルをプレビューする

おすすめ

PDF.js を使用して WeChat ミニプログラムで PDF ファイルをプレビューする