Web编辑器的{PDF / PNG导出功能

Question

最近我的公司通过了一个基于网络的图形编辑器项目来处理，编辑器中的内容可以移动，旋转，调整大小，屏蔽，更改字体......等等。

到目前为止，我能够处理大部分客户端功能。但是，我坚持那些导出PDF / PNG 功能，这给我带来了很多麻烦。我一直在研究像 JSPDF 和 HTML2Canvas 这样的插件，但这些都不能解决我的问题（例如HTML2Canvas不支持clip-path css属性）。

我想知道像Canva或Piktochart 这些受欢迎的产品如何能够开发出如此出色的导出功能。因此，我想从具有构建Web编辑器经验的开发人员那里寻求一些建议：

1. 是否可以通过使用前端技术开发导出功能？
2. 开发导出功能需要哪些知识。 [Blob？ SVG？]
3. 后端方面是否有任何关于此功能的帮助？
P.S：我只有2年的前端开发经验和一点后端知识。 （是的，我一个人在做这个项目。）

非常感谢！

Answer 1

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

• html2canvas - 您可以为任何HTML内容创建HTML Canvas。然后，您可以从画布创建图像PNG / JPG。

• pdf.js - 您可以通过创建新的空白页来手动创建PDF，然后开始绘制它。您还可以在PDF上绘制图像或画布。

更多信息：

• Canvas Element toDataURL - https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
• 从数据网址 - http://danml.com/download.html
触发下载