Trying to export the contents of an Editor to a PDF and right now I am only able to export the editor itself, literally an image of the component without content. I am thinking I need to capture the View of the editor and export that but I haven't seen or found any examples that detail how to accomplish that. Here is the code we are using, any assistance would be greatly appreciated.
import React, { Component, Fragment } from 'react';import ReactDom from 'react-dom';import { Editor, EditorTools, EditorUtils } from '@progress/kendo-react-editor';import { PDFExport, savePDF } from "@progress/kendo-react-pdf";const { Bold, Italic, Underline, Strikethrough, Subscript, Superscript, AlignLeft, AlignCenter, AlignRight, AlignJustify, Indent, Outdent, OrderedList, UnorderedList, Undo, Redo, FontSize, FontName, FormatBlock, Link, Unlink, InsertImage, ViewHtml, InsertTable, AddRowBefore, AddRowAfter, AddColumnBefore, AddColumnAfter, DeleteRow, DeleteColumn, DeleteTable, MergeCells, SplitCell} = EditorTools;export class Home extends Component { displayName = Home.name editor = null; constructor(props) { super(props); this.state = { Matters: {}, id: null, data: '', loading: true }; this.handleChange = this.handleChange.bind(this); } render() { return ( <React.Fragment> <div className="row"> <label> Matter: <input type="text" name="matterid" onChange={this.handleChange} /> </label> <button className="k-button k-button-icontext" onClick={this.setHtml}> <span className="k-icon k-i-arrow-60-up" /> Fetch data </button> <button className="k-button k-button-icontext" onClick={this.getdata}> <span className="k-icon k-i-arrow-60-down" /> Save data </button> </div> <div className="row"> <PDFExport ref={component => (this.pdfExportComponent = component)} paperSize="auto" margin={40} fileName={`Report for ${new Date().getFullYear()}`} author="KendoReact Team" > <div ref={container => (this.container = container)}> <Editor tools={[ [Bold, Italic, Underline, Strikethrough], [Subscript, Superscript], [AlignLeft, AlignCenter, AlignRight, AlignJustify], [Indent, Outdent], [OrderedList, UnorderedList], FontSize, FontName, FormatBlock, [Undo, Redo], [Link, Unlink, InsertImage, ViewHtml], [InsertTable], [AddRowBefore, AddRowAfter, AddColumnBefore, AddColumnAfter], [DeleteRow, DeleteColumn, DeleteTable], [MergeCells, SplitCell] ]} contentStyle={{ height: 600 }} ref={editor => this.editor = editor} /> </div> </PDFExport> </div> <div className="row"> <button className="k-button" onClick={this.exportPDFWithComponent}> Export with component </button> <button className="k-button" onClick={this.exportPDFWithMethod}> Export with method </button> </div> </React.Fragment> ); } exportPDFWithComponent = () => { this.pdfExportComponent.save(); };}
I have removed some code that is sensitive to data but nothing that should affect export.
Thank you!
1 Answer, 1 is accepted
Hello, Chad,
I assume that this occurs as the Editor content is rendered inside an iFrame by default.
The content can be exported by adding a custom tool that will export the Editor dom element using the savePDF method:
https://www.telerik.com/kendo-react-ui/components/editor/tools/#toc-using-custom-tools
https://www.telerik.com/kendo-react-ui/components/pdfprocessing/
I made an example showcasing this:
https://stackblitz.com/edit/react-ddvxnn-uuwbtr?file=app%2FMyPrintTool.jsx
Another option can be to render the Editor as div and then it should be exported with the current setup:
https://www.telerik.com/kendo-react-ui/components/editor/api/EditorProps/#toc-defaulteditmode
I hope this is helpful.
Regards,
Stefan
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.