How to Export Document as PDF in JavaScript DOCX Editor

28 Aug 20269 minutes to read

In this article, we are going to see how to export the document as PDF. You can export the document as PDF in the following ways:

Export the Document as PDF on the Client Side

Use the pdf export component at the application level to export the document as PDF using the exportAsImage API. Here, all pages will be converted to images and inserted as PDF pages (works like print as PDF).

NOTE

1. The DOCX Editor exports PDFs by converting pages into images on the client side, which may slightly increase file size compared to text-based PDFs.
2. Text search is not supported in the exported PDF, as the content is stored as images.
3. You can install the PDF export packages from this link.

The following example code illustrates how to export the document as PDF on the client side.

// Initialize DocumentEditorContainer component.
        var container = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, height: '590px' });
        ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
        container.serviceUrl = 'http://localhost:62870/api/documenteditor/';
        //DocumentEditorContainer control rendering starts
        container.appendTo('#DocumentEditor');

        document.getElementById('export').addEventListener('click', function () {
            let pdfdocument = new ej.pdfexport.PdfDocument();
            let count = container.documentEditor.pageCount;
            container.documentEditor.documentEditorSettings.printDevicePixelRatio = 2;
            let loadedPage = 0;
            for (let i = 1; i <= count; i++) {
                setTimeout(() => {
                    let format = 'image/jpeg';
                    // Getting pages as image
                    let image = container.documentEditor.exportAsImage(i, format);
                    image.onload = function () {
                        let imageHeight = parseInt(image.style.height.toString().replace('px', ''));
                        let imageWidth = parseInt(image.style.width.toString().replace('px', ''));
                        let section = pdfdocument.sections.add();
                        let settings = new ej.pdfexport.PdfPageSettings(0);
                        if (imageWidth > imageHeight) {
                            settings.orientation = PdfPageOrientation.Landscape;
                        }
                        settings.size = new ej.pdfexport.SizeF(imageWidth, imageHeight);
                        section.setPageSettings(settings);
                        let page = section.pages.add();
                        let graphics = page.graphics;
                        let imageStr = image.src.replace('data:image/jpeg;base64,', '');
                        let pdfImage = new ej.pdfexport.PdfBitmap(imageStr);
                        graphics.drawImage(pdfImage, 0, 0, imageWidth, imageHeight);
                        loadedPage++;
                        if (loadedPage == count) {
                            // Exporting the document as pdf
                            pdfdocument.save((container.documentEditor.documentName === ''? 'sample': container.documentEditor.documentName) + '.pdf');
                        }
                    };
                }, 500);
            }
        })

Export Document as PDF on the Server Side Using Syncfusion^® DocIO

With the help of Syncfusion DocIO, you can export the document as PDF on the server side. Here, the exported PDF supports text search.

The following steps illustrate how to convert the document to PDF:

• Using the serialize API, convert the document to SFDT and send it to the server side.

The following example code illustrates how to convert the document to SFDT and pass it to the server side.

import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
let container: DocumentEditorContainer = new DocumentEditorContainer({
    enableToolbar: true,
    height: '590px',
});
DocumentEditorContainer.Inject(Toolbar);
container.serviceUrl =
    'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';

container.appendTo('#container');

document.getElementById('export').addEventListener('click', function () {
    let http: XMLHttpRequest = new XMLHttpRequest();
    // Replace your running web service Url here
    http.open('POST', 'http://localhost:62869/api/documenteditor/ExportPdf');
    http.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
    http.responseType = 'json';
    //Serialize the document content as SFDT.
    let sfdt: any = { content: container.documentEditor.serialize() };
    //Send the SFDT content to the server side.
    http.send(JSON.stringify(sfdt));
});

NOTE

The Web API hosted link https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/ utilized in the DOCX Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.

• Using the Save API on the server side, you can convert the SFDT to a stream.
• Finally, convert the stream to a PDF using the Syncfusion.DocIORenderer.Net.Core library.

The following example code illustrates how to process the SFDT on the server side.

[AcceptVerbs("Post")]
[HttpPost]
[EnableCors("AllowAllOrigins")]
[Route("ExportPdf")]
public void ExportPdf([FromBody]SaveParameter data)
{
    // Converts the sfdt to stream
    Stream document = WordDocument.Save(data.content, FormatType.Docx);
    Syncfusion.DocIO.DLS.WordDocument doc = new Syncfusion.DocIO.DLS.WordDocument(document, Syncfusion.DocIO.FormatType.Docx);
    //Instantiation of DocIORenderer for Word to PDF conversion
    DocIORenderer render = new DocIORenderer();
    //Converts Word document into PDF document
    PdfDocument pdfDocument = render.ConvertToPDF(doc);
    // Saves the document to server machine file system, you can customize here to save into databases or file servers based on requirement.
    FileStream fileStream = new FileStream("sample.pdf", FileMode.OpenOrCreate, FileAccess.ReadWrite);
    //Saves the PDF file
    pdfDocument.Save(fileStream);
    pdfDocument.Close();
    fileStream.Close();
    document.Close();
}

Get the complete working sample in this link.