slidevでExport時にスタイルが崩れる現象のデバック方法
ken7253先に答え
ローカルホストを立てた後に下記のURLに移動すると実際のPDF変換時の表示を確認できる。
http://localhost:3030/print?print
slidevはpdfとしてエクスポートするときにHTML上のクラス名を変更するっぽい。
自分の場合は背景色の変更に#app #slide-contentというセレクタを使ってデフォルトテーマを上書きしていたが、エクスポート時にここのidが変わったものがplaywright上で表示されて出力されたPDFは背景色が反映されていなかった。
（idは#print-contentになっていた。）
このセレクタをエクスポート時も変わらないセレクタに変更することで解消できた。
ken7253この記事見ながらnode_modules内の@slidev/cliのコードを直接編集したりしてデバックした。
ken7253下記のコードをデバック用にcliのコードに入れて実行したら
const element = await page.waitForSelector(selector);
const color = await element.evaluate((el) => {
return window.getComputedStyle(el).getPropertyValue('background-color');
});
console.log(color);
ken7253下記のようなエラーが出てタイムアウトした。
=========================== logs ===========================
waiting for locator('#app #slide-content') to be visible
============================================================
at genPagePdfOnePiece (/home/*****/project/slide/node_modules/@slidev/cli/dist/export-GTPZJWVE.js:245:32)
at async exportSlides (/home/*****/project/slide/node_modules/@slidev/cli/dist/export-GTPZJWVE.js:327:5)
at async Object.handler (/home/*****/project/slide/node_modules/@slidev/cli/dist/cli.js:339:22) {
name: 'TimeoutError'
}
export時にplaywrightからchromeを呼び出している処理があったので、下記のようにheadlessモードを無効化して実際にブラウザを見てみた。
const browser = await chromium.launch({
executablePath,
headless: false // debug
});
上記からHTMLが書き換えられているっぽかったので追加でデバックしようとしたが、設定のタイムアウト時間を０にしてタイムアウトしないようにしても落ちてしまうのでどうにか開発環境で確認する方法を探した。
ken7253
ここらへんでplaywrightで読みに行くURLを定義しているっぽかったのでちょっとよんでみた。
?printという記述が気になったので、もう一度headlessモードをOFFにして立ち上がったブラウザのアドレスバーを確認することに。
ken7253アドレスバーを見たら/print?printというふうに書いてあったので開発環境でも同じURLを指定したところ同じように背景色が描画されていない現象を確認できた。
ken7253調べていて面白かったこと
slidevのPDFエクスポートはブラウザ上のプレビューを１ページ毎にスクショして後から結合する方式かと思ったら、1ページに全部のスライドを乗っけてそれをPDF生成時にスライスしてそれぞれのページにしている方法を取っていたこと。
自分はそれを知らずにグラデーションの背景色を定義していて、ページが進むにつれ色が変わっていくという面白い？ことになっていた。