Vivliostyle Coreを用いたHTML->PDFビューワー

VivliostyleのCore APIを使ってHTMLから出力するPDF出力をプレビューするところまでやってみた。

見ての通りほとんどコードは書いていない。ただAPIを読み込んで、簡単なページナビゲーションをつけてみただけのサンプルだが、Vivliostyle CoreのAPIドキュメントだけでは苦労する方も多いだろうから(実際私はかなり苦労した)、公開することにした。

https://github.com/ttrace/vivliostyle-core-api-test/tree/main

レポジトリをクローンしたらnpmのパッケージをインストールする。Viviostyle CoreはCDNで提供されていないようなので、組み込む必要がある。

% npm install @vivliostyle/core
% npm install ts-loader, typescript, webpack, webpack-cli --save-dev

インストールできたらWebpackをビルド。コマンドはpackage.jsonに書いてある。

% npm run build

/dist/index.htmlでLive Serverを立ち上げればVivliostyleのビュワーが、/dist/publish.htmlを読み込んでPDFプレビューを表示してくれる。左右カーソルキーか、画面のクリックでページ送りする。
ちなみにfile:///では動かないので、何らかの方法でhttpサーバーを立ち上げてください。VS CodeならLive Serverが楽だと思います。

コメントを残す