終于把Markdown導(dǎo)出的PDF的樣式調(diào)整滿意了

作為程序員,寫文檔的工作和寫代碼的工作量其實是差不多的,那些架構(gòu)師級別的程序員可能寫文檔的時間還要比寫代碼的時間多。一個好用的Markdown必須有以下特性:

  1. 功能足夠豐富,有足夠的能力來表達自己的想法。Mermaid很大程序滿足了程序員從代碼到圖形的表述能力,Tools.top的Markdown編輯器已升級到最新版Mermaid,?持12種圖表類型,下一步是支持用戶在線白板畫圖能力。

  2. 支持分享。Tools.top的Markdown編輯器支持多種模式的導(dǎo)出:

  • 無損HTML導(dǎo)出
  • 圖片型PDF導(dǎo)出(查看者無法復(fù)制PDF中的內(nèi)容)
  • 原生PDF導(dǎo)出,支持EMOJI和Mermaid圖表/圖片的導(dǎo)出,支持代碼高亮

其實要做到支持中文,支持EMOJI,支持Mermaid圖表的導(dǎo)出需要比較復(fù)雜的實現(xiàn),需要服務(wù)器端來支持,一開始在實現(xiàn)中文支持的時候就遇到很大的問題,OPENPDF的庫調(diào)了半天也沒有調(diào)出來,最后使用了wkhtmltopdf 才實現(xiàn)中文的顯示。

然后EMOJI 的實現(xiàn)也比較麻煩,服務(wù)器端的字體只能支持少量EMOJI,最后把整個TWEMOJI庫下載到服務(wù)器端,讓服務(wù)器端在做轉(zhuǎn)換之前把所有EMOJI替換成圖片才搞定的。

Mermaid圖表的支持也是費了較大的周折,一開始我生成HTML是依賴Mermaid.JS庫的,PDF生成庫支持JS的很少,也不好。后來我在客戶端支持生成SVG,不依賴JS了。可是wkhtmltopdf對SVG的支持也不太好,后來我在客戶端把所有SVG轉(zhuǎn)成PNG圖片,然后以BASE64的編碼上傳給服務(wù)器的PDF生成API才搞定的。

有些PDF會比較大,有時候同步模式會出現(xiàn)超時情況,我為用戶提供了異步任務(wù)模式,解決了大PDF生成的問題。最終大家看到的就是下面截圖的樣子的PDF。

歡迎大家試用并提意見: https://md.tools.top

image.png
image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容