[Solved] Exporting Editor Contents to PDF using PDFExport Component

[Chad]

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!

[Stefan]

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