Export report

To control and customize report export in the Bold Reports® JavaScript Report Viewer, use its export events and properties. You can handle export progress, change export formats, hide export types, and set PDF, Word, Excel, PowerPoint, CSV, and HTML options.

How do I show export progress in the Report Viewer?

To show progress information in the JavaScript Report Viewer when the exporting process takes a long time to complete, use the exportProgressChanged event.

  1. Set the exportProgressChanged event in Report Viewer initialization.
  2. Implement the function and replace the following code samples to show a custom message based on the progress stage.
index.html
index.js
    <body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
    <div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
    <script src="index.js"></script>
    </body>
function onExportProgressChanged(args) {
        if (args.stage === "beginExport") {
            console.log(args.stage);
            args.format =
                $('#viewer').ejWaitingPopup({ showOnInit: true, cssClass: "customStyle", text: "Preparing exporting document.. Please wait..." });
        }
        else if (args.stage === "exportStarted") {
            console.log(args.stage);
            var popupObj1 = $('#viewer').data('ejWaitingPopup');
            popupObj1.hide();
        }
        else if (args.stage === "preparation") {
            console.log(args.stage);
            console.log(args.format);
            console.log(args.preparationStage);
            if (args.format === "PDF" && args.preparationStage === "documentPreparation") {
                console.log(args.totalPages);
                console.log(args.currentPage);
                if (args.totalPages > 1 && args.currentPage > 1) {
                    var progressPercentage = Math.floor((args.currentPage / args.totalPages) * 100);
                    if (progressPercentage > 0) {
                        var popupObj2 = $('#viewer').data('ejWaitingPopup');
                        popupObj2.setModel({ text: "Preparing exporting document.." + progressPercentage + " % completed.. Please wait..." });
                    }
                }
            }
        }

        args.handled = true;
    }

$(function () {
    $("#viewer").boldReportViewer({
                    reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
                    reportPath: '~/Resources/docs/sales-order-detail.rdl',
                    exportProgressChanged: onExportProgressChanged
                });
});

You can view the Web API service used in the preceding code in the Reporting Service GitHub location. For more information, see Samples and demos.

How do I change the Excel and Word export format?

To change the default Excel and Word export file format in the JavaScript Report Viewer, use the excelFormat and wordFormat properties. The following code sample changes the default versions.

index.html
index.js
    <body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
    <div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
    <script src="index.js"></script>
    </body>
$(function () {
    $("#viewer").boldReportViewer({
                    reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
                    reportPath: '~/Resources/docs/sales-order-detail.rdl',
					exportSettings: {
                        excelFormat: ej.ReportViewer.ExcelFormats.Excel2013,
                        wordFormat: ej.ReportViewer.WordFormats.Word2013
                    }
                });
});

How do I hide a specific export type for a report?

To hide a specific export type, show or hide the default export types available in the JavaScript Report Viewer using the exportOptions property. The following code hides the HTML export type from the default export options.

index.html
index.js
    <body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
    <div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
    <script src="index.js"></script>
    </body>
$(function () {
    $("#viewer").boldReportViewer({
                    reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
                    reportPath: '~/Resources/docs/sales-order-detail.rdl',
					exportSettings: { exportOptions: ej.ReportViewer.ExportOptions.All & ~ej.ReportViewer.ExportOptions.Html & ~ej.ReportViewer.ExportOptions.Word }
                });
});

PDF export options

The PDFOptions class provides properties to manage PDF export behaviors in the JavaScript Report Viewer. Set the properties in the OnInitReportOptions method of the Web API service.

How do I export reports with complex scripts?

To export reports with complex scripts from the JavaScript Report Viewer, set the ComplexScript property of the PDFOptions instance to true.

    [NonAction]
    public void OnInitReportOptions(ReportViewerOptions reportOption)
    {
        reportOption.ReportModel.PDFOptions = new BoldReports.Writer.PDFOptions()
        {
            EnableComplexScript = true
        };
    }

PDF conformance

To export the report as a PDF/A-1b document from the JavaScript Report Viewer, specify the PdfConformanceLevel.Pdf_A1B conformance level in the PdfConformanceLevel property.

    [NonAction]
    public void OnInitReportOptions(ReportViewerOptions reportOption)
    {
        reportOption.ReportModel.PDFOptions = new BoldReports.Writer.PDFOptions()
        {
            PdfConformanceLevel = Syncfusion.Pdf.PdfConformanceLevel.Pdf_A1B
        };
    }

How do I add custom fonts to an exported PDF document?

To add custom fonts to a PDF document exported from the JavaScript Report Viewer, add the font streams to the Fonts collection in the PDFOptions instance.

To add custom fonts to the PDF exported document, follow these steps:

  1. Add the font .ttf files into your application Resources folder.
  2. In the Solution Explorer, open the properties of the font file and set the property Copy to Output Directory as Copy always.
  3. Initialize the Font collection and add the font stream to it.

The key value provided in the font collection should be same as in the report item font property.

    [NonAction]
    public void OnInitReportOptions(ReportViewerOptions reportOption)
    {
        reportOption.ReportModel.PDFOptions = new BoldReports.Writer.PDFOptions()
        {
            //Load Missing font stream
            Fonts = new Dictionary<string, System.IO.Stream>
            {
                { "Segoe UI", System.IO.File.OpenRead(System.Web.Hosting.HostingEnvironment.MapPath(@"~/Resources/docs/font_symbols.ttf")) }
            }
         };
     }

If a font used in the report definition is not installed or not available in the local system, load the font stream. In the preceding code, font_symbols font stream is loaded to export the Sales Order Detail.rdl report as symbols.

Word export options

The WordOptions class provides properties to manage Word document export behaviors in the JavaScript Report Viewer.

Word document type

To save the report to the required Word document version, set the FormatType property.

    reportOption.ReportModel.WordOptions = new BoldReports.Writer.WordOptions()
    {
        FormatType = BoldReports.Writer.WordFormatType.Docx
    };

Word document advance layout for merged cells

To eliminate tiny columns, rows, and merged cells, render the Word document elements without nested grid layout by setting the LayoutOption to TopLevel. The ParagraphSpacing is the distance value added between two elements in the document.

    reportOption.ReportModel.WordOptions = new BoldReports.Writer.WordOptions()
    {
        LayoutOption = BoldReports.Writer.WordLayoutOptions.TopLevel,
        ParagraphSpacing = new BoldReports.Writer.ParagraphSpacing()
        {
            Bottom = 0.5f,
            Top = 0.5f
        }
    };

A paragraph element is inserted between two tables in the exported document to overcome the Word document auto merging behavior. A table in a Word document is not a stand-alone object. If you draw two tables one after another, they are automatically merged into a single table. To prevent this merging, add an empty paragraph between two tables.

How do I protect an exported Word document from editing?

To protect a Word document exported from the JavaScript Report Viewer, restrict editing either with a password or without a password. The following are the types of protection:

  1. AllowOnlyComments: You can add or modify only the comments in the Word document.
  2. AllowOnlyFormFields: You can modify the form field values in the Word document.
  3. AllowOnlyRevisions: You can accept or reject the revisions in the Word document.
  4. AllowOnlyReading: You can only view the content in the Word document.
  5. NoProtection: You can access or edit the Word document contents as normally.
    reportOption.ReportModel.WordOptions = new BoldReports.Writer.WordOptions()
    {
        ProtectionType = Syncfusion.DocIO.ProtectionType.AllowOnlyReading
    };

Excel export options

The ExcelOptions class provides properties to manage Excel document export behaviors in the JavaScript Report Viewer.

Excel document type

To save the report to the required Excel version, set the ExcelSaveType property.

    reportOption.ReportModel.ExcelOptions = new BoldReports.Writer.ExcelOptions()
    {
        ExcelSaveType = BoldReports.Writer.ExcelVersion.Excel2013
    };

Excel document advance layout for merged cells

To eliminate tiny columns, rows, and merged cells for clear readability and data manipulation, set the LayoutOption to IgnoreCellMerge.

    reportOption.ReportModel.ExcelOptions = new BoldReports.Writer.ExcelOptions()
    {
        LayoutOption = BoldReports.Writer.ExcelLayoutOptions.IgnoreCellMerge
    };

How do I protect an exported Excel document from editing?

To protect an Excel document exported from the JavaScript Report Viewer, restrict editing either by providing the ExcelSheetProtection or enabling the ReadOnlyRecommended properties.

    reportOption.ReportModel.ExcelOptions = new BoldReports.Writer.ExcelOptions()
    {
        ReadOnlyRecommended = true,
        ExcelSheetProtection = ExcelSheetProtection.DeletingColumns
    };

PowerPoint export options

To save a report exported from the JavaScript Report Viewer to the required PowerPoint version, set the FormatType property.

    reportOption.ReportModel.PPTOptions = new BoldReports.Writer.PPTOptions()
    {
        FormatType = BoldReports.Writer.PPTSaveType.PowerPoint2013
    };

CSV export options

The CsvOptions class lets you change the encoding, delimiters, qualifiers, extension, and line break of a CSV document exported from the JavaScript Report Viewer.

    reportOption.ReportModel.CsvOptions = new BoldReports.Writer.CsvOptions()
    {
        Encoding = System.Text.Encoding.Default,
        FieldDelimiter = ",",
        UseFormattedValues = false,
        Qualifier = "#",
        RecordDelimiter = "@",
        SuppressLineBreaks = true,
        FileExtension = ".txt"
    };

HTML export options

To hide the separator added at the end of each page in an HTML document exported from the JavaScript Report Viewer, set the HidePageSeparator property to true.

    reportOption.ReportModel.HTMLOptions = new BoldReports.Writer.HTMLOptions()
    {
        HidePageSeparator = true
    };

How do I password protect an exported document?

To protect an exported PDF, Microsoft Word, Microsoft Excel, or PowerPoint document from unauthorized users, encrypt the document with an encryption password in the JavaScript Report Viewer. The following code snippet demonstrates how to encrypt the exported document with a user-defined password.

    [NonAction]
    public void OnInitReportOptions(ReportViewerOptions reportOption)
    {
        //PDF encryption
        reportOption.ReportModel.PDFOptions = new BoldReports.Writer.PDFOptions();
        reportOption.ReportModel.PDFOptions.Security = new Syncfusion.Pdf.Security.PdfSecurity()
        {
            UserPassword = "password"
        };

        //Word encryption
        reportOption.ReportModel.WordOptions = new BoldReports.Writer.WordOptions()
        {
            EncryptionPassword = "password"
        };

        //Excel encryption
        reportOption.ReportModel.ExcelOptions = new BoldReports.Writer.ExcelOptions()
        {
            PasswordToModify = "password",
            PasswordToOpen = "password"
        };

        //PPT encryption
        reportOption.ReportModel.PPTOptions = new BoldReports.Writer.PPTOptions()
        {
            EncryptionPassword = "password"
        };
    }

Password protection is not supported for HTML export format.