简体繁体 English

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

[英]PDF/PNG export feature for Web Editor

原文 2018-01-15 11:07:43 7 1 javascript/ frontend/ backend/ export-to-pdf

Recently my company pass me a web-based graphic editor project to handle, where the content inside the editor can be moved, rotate, resize, masking, change font ... etc 最近，我的公司向我传递了一个基于Web的图形编辑器项目来处理，该编辑器中的内容可以移动，旋转，调整大小，遮罩，更改字体等

So far, i was able to handle most of the client side feature. 到目前为止，我已经能够处理大多数客户端功能。 However, i stuck on those exporting PDF/PNG feature which give me a lot of headache. 但是，我坚持使用那些导出PDF / PNG功能，这让我很头疼。 I have been research on plugin like JSPDF and HTML2Canvas and none of this can solve my problem (eg HTML2Canvas doesn't support clip-path css property). 我一直在研究JSPDF和HTML2Canvas之类的插件，但是这些都不能解决我的问题（例如HTML2Canvas不支持clip-path css属性）。

I was wondering how these popular product like Canva or Piktochart were able to develop such amazing export feature. 我不知道这样的受欢迎的产品如何Canva或Piktochart能够发展如此惊人的导出功能。 Therefore, i will like to seek some advice from developer who have experience on building web editor: 因此，我想从具有构建Web编辑器经验的开发人员那里寻求一些建议：

Is it possible to develop export feature by just using Front End technology ? 是否可以仅使用前端技术来开发导出功能？
What knowledge is required to develop export feature. 开发出口功能需要什么知识。 [Blob ? [斑点？ SVG ?] SVG吗？]
Is there anything that Back-End side able to help regarding to this feature ? 后端方面对此功能有什么帮助吗？

PS: I only have 2 year of Front End development experience and a little bit of Back End Knowledge. PS：我只有2年的前端开发经验和一些后端知识。 (Yes, i am doing this project alone.) （是的，我一个人在做这个项目。）

Thanks a lot ! 非常感谢！

1 个解决方案

There are JavaScript libraries that you can use. 您可以使用JavaScript库。 You do not need a backend. 您不需要后端。

html2canvas - You can create an HTML Canvas, for any HTML content. html2canvas-您可以为任何HTML内容创建HTML Canvas。 Then you can create an image PNG/JPG from the canvas. 然后，您可以从画布创建图像PNG / JPG。
pdf.js - You can manually create a PDF by creating a new blank page, and start drawing on it. pdf.js-您可以通过创建新的空白页来手动创建PDF，然后开始在其上绘图。 You also able to draw an image or a canvas on the PDF. 您还可以在PDF上绘制图像或画布。