Native Editor + Native PDF Processing

[ANTONIO]

I'm trying to export the html generated by the Kendo Vue Native Editor to a PDF document, using the Kendo Vue Native PDF Processing (I'm not using the Editor's embedded pdf export button, because I need to send this PDF to the backend).

I can't see any documentation about how to this. This is what I first tried:

const iframe = document.querySelector(".k-editor-content .k-iframe");
      const htmlElementContent = iframe.contentWindow.document.querySelector("html")

      savePDF(htmlElementContent, {
        paperSize: "A4"
      });

But then I got this error: "DOMException: Failed to execute 'insertBefore' on 'Node': Only one element on document allowed."

To bypass this error, I tried to manipulate the Iframe content first:

const iFrameDocument = document.querySelector(".k-editor-content .k-iframe").contentWindow.document;
      const iFrameRootHtml = iFrameDocument.querySelector("html")
      const newSection = iFrameDocument.createElement('section');
      newSection.appendChild(iFrameRootHtml);
      iFrameDocument.appendChild(newSection);

      const newRoot = newSection.querySelector("html");

      savePDF(newRoot, {
        paperSize: "A4"
      });

With the above code I'm able to generate an PDF, but with no embedded fonts at all. Also, if I try to drag an image into the editor (the editor transforms it into a base64 string) and then generate the PDF, I got this error: "DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed."

Still regarding the fonts, I'm declaring them in the style section of the html that is inside the iframe content, using the onLoaded event of the Editor (https://www.telerik.com/kendo-vue-ui/components/editor/styling-content/). I'm also declaring them on the outer content (the main website). The fonts are hosted on my own website. Still, no embedded fonts on the generated PDF.

Also, to the Telerik forum admins, I just noted that there is no tag available neither for the Native Editor or the native PDF Processing, so I'm forced to tag this question with wrong/generic tags.

Any help will be appreciated, thanks in advance.

[Petar]

Hello ANTONIO,

I will start my reply with gratitude for reporting the missing tags in the support system. We've added them and they are already available if you try to submit a new ticket. 

As per the scenarios that you want to achieve here is what we can share for the moment:

• PDF export with fonts - I will prepare an example in which the fonts are embedded in the exported PDF file and sent it to you.
• PDF export with Images - there seems to be an issue with the content export of the Editor when there is an image inside it. We will need more time to investigate the case before I can provide feedback about it. 

I will write you back in the next few days with more details about the two scenarios discussed above. Thank you for your patience and understanding. 

Regards,
Petar
Progress Telerik

[Petar]

Hello ANTONIO,

Attached to my reply, you will find a runnable example demonstrating how the Editor content can be extracted with an embedded font and image inside it.

The font that is embedded in the Editor is the DejaVu Sans that is defined in the styles.css file. To achieve the functionality with the embedded font, it is important to mention that the Editor is rendered as a DIV. The default-edit-mode Editor property is set to "'div'".

The code used to export the Editor content with an image inside it is the following one:

exportPDF() {
  const htmlElementContent = this.$refs.editor.view.dom;
  if (htmlElementContent.getElementsByClassName("ProseMirror-separator").length !== 0) {
    htmlElementContent.getElementsByClassName("ProseMirror-separator")[0].remove()
  }

  savePDF(htmlElementContent, {
    paperSize: 'A4',
  });
},

The code in yellow removes an automatically inserted img tag that presents the proper content export. 

Check the linked example and let me know if it helps you implement what you need in your application.

Looking forward to your reply.

Regards,
Petar
Progress Telerik