Using api ( methods ) in react

I studied the documentation up and down, but what is described there does not work in my project

I want to make an automatic replacement of text in a PDF file, for this I tried to follow the documentation, this is what I got

export const OnlyOffice = () => {
    const config = ...

    function onDocumentReady(event: any) {
        console.log("Document is loaded");

        const documentEditor = window.DocEditor.instances["pdfEditor2"]
        const connector = documentEditor.createConnector();

        console.log(window?.Asc?.plugin) // undefined
        console.log(connector?.executeMethod("GetCurrentWord")); // undefined

        connector?.executeMethod("ShowError", ["test", 0], (r: any) => {
             console.log(r); // not executed
        });

        connector?.executeMethod("GetCurrentWord", [], (word: any) => {
            console.log(`[METHOD] GetCurrentWord: ${word}`) // not executed
        });

        connector?.executeMethod("GetDocument", [], (returnValue: any) => {
             console.log(returnValue) // not executed
        });

       window?.Asc?.plugin.executeMethod("ShowError", ["test", 0], (r: any) => {
            console.log(r); // not executed
        });
    }

    return (
        <div className={styles.wrapper}>
                <DocumentEditor
                    id="pdfEditor2"
                    documentServerUrl="..."
                    config={config}
                    events_onDocumentReady={onDocumentReady}
                />
        </div>
    )
}

The result is that all the methods from the documentation are undefined and are not called, the question is, what should I do to get access to the API methods?
In particular, I want to repeat this example from the documentation, thanks in advance

Hello @Anton2,
For now there is no yet PDF API, the methods mentioned above are not suitable for PDF Editor, here you can see all the methods available within Form API - Form API | ONLYOFFICE


How should I then address the API class correctly?

@DmitriiV

I don’t understand how to properly access methods because all entities that I have at my disposal return undefined

Could you please send me a mini example of a simple call to any function that I could use as a starting point?

Hello @Anton2

As my colleague has mentioned, there are no methods for interacting with PDF editor yet. It means that there is no Api class that would represent a set of features that are available for editing a PDF file.

Moreover, it is not clear what you have tried in your test and what exactly returns undefined. For instance,

So, there is no way to edit PDF text (e.g. replace “Dummy” with “Real”) programmatically? But how the Editor itself can do it?

Hello @vermus

Various sets of API methods exist for editors that work with XML files (DOCX, XLSX, PPTX), but regular PDF files are more complex that that. For PDF, unfortunately, such methods are not yet available.

Ok, thank you.

  1. Can we convert pdf into xml via React component or Document server (to upload to react component)?
  2. If yes, how good will this conversion? pdf import (file1.pdf) → xml → pdf export(file2) - is file file1.pdf and file2.pdf will be identical (or we can get some layout, font issues and etc.)?

React component is needed for integration of Document Server into your own application, it does not convert anything. If you want to convert a file via Document Server, please refer to the following article about using Conversion API service of Document Server: Conversion API | ONLYOFFICE

As for the quality of conversion, it basically depends on a file. You can try out online conversion service here:

1 Like