VSCode 中 Markdown Preview Enhanced 外掛利用 Chrome (Puppeteer) 匯出 PDF 檔案使用說明與問題解決

cjyyxn發表於2024-06-28
VSCodeViewChrome

準備

預先安裝好 Chrome 瀏覽器。

使用方法

右鍵選擇 Chrome (Puppeteer)。

使用方法

設定 Puppeteer

透過 front-matter

即在 markdown 文件開頭加上 yaml 格式的配置程式碼

---
puppeteer:
    format: "A4"
    scale: 1.0
    margin:
        top: 2cm
        right: 3cm
        bottom: 2cm
        left: 3cm
---

這裡 format 表示紙張格式，scale 表示縮放，margin 表示頁邊距。

更多設定選項說明可以參考官方文件 (https://github.com/puppeteer/puppeteer/blob/v1.8.0/docs/api.md#pagepdfoptions)

公式渲染問題

有時會發現一些公式渲染沒有顯示，這是因為 Puppeteer 匯出 pdf 的原理是網頁快照。渲染還沒有完成，網頁已被匯出。

解決方案是延遲匯出時間，即

---
puppeteer:
    timeout: 3000
---

表明等待 3000 毫秒（此時認為渲染已完成）後匯出

另一種解決方法是修改外掛設定，這與上面的方法效果一樣

程式碼背景顯示問題

有時會發現程式碼背景沒有顯示，如圖

而預期效果應為

解決方法是修改外掛設定，設定列印背景

儲存時自動匯出

---
export_on_save:
    puppeteer: true # 儲存檔案時匯出 PDF
    puppeteer: ["pdf", "png"] #儲存檔案時匯出 PDF 和 PNG
    puppeteer: ["png"] # 儲存檔案時匯出 PNG
---

圖片調整大小

匯出的 pdf 文件中，圖片可能過大，解決方法是新增自定義 css。

即在 front-matter 後加上

<style>
img{
    width: 60%;
    padding-left: 20%;
}
</style>

這段程式碼的意思是，把所有圖片的寬度設定為段落寬度的 60%，並向右移 20%（即讓圖片居中）。

也可匯入外部 css 檔案。

如在檔案 style.css 中有

img{
    width: 60%;
    padding-left: 20%;
}

在 markdown 檔案的front-matter後加上

@import "style.css"

此時效果與上相同。

當然有更好玩的方法，使 style.css 為

img[src*="#w100"] {
width: 100%;
}

img[src*="#w80"] {
width: 80%;
}

img[src*="#w60"] {
width: 60%;
}

img[src*="#w50"] {
width: 50%;
}

img[src*="#w30"] {
width: 30%;
}

img[src*="#w20"] {
width: 20%;
}

img[src*="#w10"] {
width: 10%;
}

此時 markdown 寫法如下，就可以調整圖片大小

![](img.png#w60)

頁碼顯示

可以在匯出的 pdf 檔案上顯示頁碼

---
puppeteer:
    timeout: 3000
    displayHeaderFooter: true
    headerTemplate: '<span class="pageNumber"></span>'
    footerTemplate: '
        <div style="font-size: 10px; margin-left: 20px;">
        <span class="pageNumber"></span> / 
        <span class="totalPages"></span>
        </div>
        '
---

簡單排版

新增大段空行

<p style="margin-bottom: 400px;"></p>

換頁，只有在匯出為 PDF 時才會起作用

<div STYLE="page-break-after: always;"></div>

總結

比較合適的 front-matter 為

---
puppeteer:
    scale: 0.8
    margin:
        top: 2cm
        right: 3cm
        bottom: 2cm
        left: 3cm
    timeout: 3000
    displayHeaderFooter: true
    headerTemplate: '<span class="pageNumber"></span>'
    footerTemplate: '
        <div style="font-size: 10px; margin-left: 20px;">
        <span class="pageNumber"></span> / 
        <span class="totalPages"></span>
        </div>
        '
---

相關文章