Astro.js で PDF.js を利用する

2023年は割とAstro.jsを使ってた気がする。ちょっとしたLPを作るのにちょうどいいなって。

AstroPDF.js が動かないのなんでなん?という質問をコミュニティで見かけたので、試しに実装してみたものを載せておく。

PDF.js公式のサンプルソースを流用した。
読み込むPDFファイルは public ディレクトリに置く。
ソースに書いてるファイル名は昔ダウンロードした Adobe-CEPのドキュメントだが、ページ数200超えのMBファイルなので、こういうもののテストにちょうどいいと思う。

本体をCDNから読み込むので、scriptタグに is:inline をつけておく。

そういや前に社内システムでPDF見れる様にしたなーと思って記憶を遡ったら、これのReactラッパーである react-pdf-viewer を使っていたのだった。React環境ならこっちのが楽だと思う。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください