Web編輯器的PDF / PNG導出功能

Question

最近，我的公司向我傳遞了一個基於Web的圖形編輯器項目來處理，該編輯器中的內容可以移動，旋轉，調整大小，遮罩，更改字體等

到目前為止，我已經能夠處理大多數客戶端功能。 但是，我堅持使用那些導出PDF / PNG功能，這讓我很頭疼。 我一直在研究JSPDF和HTML2Canvas之類的插件， 但是這些都不能解決我的問題（例如HTML2Canvas不支持clip-path css屬性）。

我不知道這樣的受歡迎的產品如何Canva或Piktochart能夠發展如此驚人的導出功能。 因此，我想從具有構建Web編輯器經驗的開發人員那里尋求一些建議 ：

1. 是否可以僅使用前端技術來開發導出功能？
2. 開發出口功能需要什么知識。 [斑點？ SVG嗎？]
3. 后端方面對此功能有什么幫助嗎？

PS：我只有2年的前端開發經驗和一些后端知識。 （是的，我一個人在做這個項目。）

非常感謝 ！

Answer 1

您可以使用JavaScript庫。 您不需要后端。

• html2canvas-您可以為任何HTML內容創建HTML Canvas。 然后，您可以從畫布創建圖像PNG / JPG。

• pdf.js-您可以通過創建新的空白頁來手動創建PDF，然后開始在其上繪圖。 您還可以在PDF上繪制圖像或畫布。

更多信息：

• 畫布元素toDataURL - https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL
• 從數據URL觸發下載-http: //danml.com/download.html