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

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

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

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

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

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

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

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

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

歡迎大家試用并提意見(jiàn): https://md.tools.top

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

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

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