Search results
Suggest a FeaturePDF

Export Data Visualization in MVC Environment

we have provided the below option to export the data visualization report items

  1. External browser - Puppeteer.
  2. External browser - Selenium.
  3. PhantomJS - Classic Tool

External Browser - Puppeteer

In .NET Framework it supports net621 or above version only. To Download puppeteer package use below link.

Operating System Download Link
Windows 32-bit https://storage.googleapis.com/chromium-browser-snapshots/Win/901912/chrome-win.zip
Windows 64-bit https://storage.googleapis.com/chromium-browser-snapshots/Win_x64/901912/chrome-win.zip
  1. Open the Report Writer application and install the PuppeteerSharp package from NuGet Gallery.
  2. Create following folderwwwroot/Puppeteer in your application.
  3. Copy the chrome-win folder for Windows from the extracted location of puppeteer package and paste into wwwroot/Puppeteer folder in your application.
  4. Open the Report Writer application Web API file.
  5. Set the BrowserTypes Enum property to External.
  6. Create and initialize CustomBrowserType by inheriting the ExportSettings class.
  7. Set the ResourcePath, Scripts and DependentScripts property in Report Writer instance. The following code example demonstrates how to configure Puppeteer in your ASP.NET MVC application.

In this tutorial, the product-line-sales.rdl report is used, and it can be downloaded in this link.

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public IActionResult Export(string writerFormat)
    {
        string fileName = null;
        WriterFormat format;

        string reportPath = Server.MapPath(@"~\App_Data\Resources\product-line-sales.rdl");
        FileStream reportStream = new FileStream(reportPath, FileMode.Open, FileAccess.Read);
        BoldReports.Writer.ReportWriter writer = new BoldReports.Writer.ReportWriter();

        // Puppeteer Option to export the data visualization report items.
        writer.ExportResources.BrowserType = ExportResources.BrowserTypes.External;
        writer.ExportResources.ResourcePath = Server.MapPath(@"\App_Data\Puppeteer\");
        // Initialize the class for puppeteer
        writer.ExportSettings = new CustomBrowserType(writer.ExportResources.ResourcePath);

        writer.ExportResources.Scripts = new List<string>
        {
            //Report Viewer component dependent script
            $"https://cdn.boldreports.com/12.1.12/scripts/common/ej2-base.min.js",
            $"https://cdn.boldreports.com/12.1.12/scripts/common/ej2-data.min.js",
            $"https://cdn.boldreports.com/12.1.12/scripts/common/ej2-pdf-export.min.js",
            $"https://cdn.boldreports.com/12.1.12/scripts/common/ej2-svg-base.min.js",
            $"https://cdn.boldreports.com/12.1.12/scripts/data-visualization/ej2-lineargauge.min.js",
            $"https://cdn.boldreports.com/12.1.12/scripts/data-visualization/ej2-circulargauge.min.js",
            $"https://cdn.boldreports.com/12.1.12/scripts/common/bold.reports.common.min.js",
            $"https://cdn.boldreports.com/12.1.12/scripts/common/bold.reports.widgets.min.js",
            $"https://cdn.boldreports.com/12.1.12/scripts/data-visualization/ej.chart.min.js",
             //Report Viewer Script
            $"https://cdn.boldreports.com/12.1.12/scripts/bold.report-viewer.min.js",
        };
        writer.ExportResources.DependentScripts = new List<string>
        {
            "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
        };

        if (writerFormat == "PDF")
        {
            fileName = "ProductLineSales.pdf";
            format = WriterFormat.PDF;
        }
        else if (writerFormat == "Word")
        {
            fileName = "ProductLineSales.docx";
            format = WriterFormat.Word;
        }
        else if (writerFormat == "CSV")
        {
            fileName = "ProductLineSales.CSV";
            format = WriterFormat.CSV;
        }
        else
        {
            fileName = "ProductLineSales.xlsx";
            format = WriterFormat.Excel;
        }

        writer.LoadReport(reportStream);
        MemoryStream memoryStream = new MemoryStream();
        writer.Save(memoryStream, format);
        // Download the generated document from client.
        memoryStream.Position = 0;
        FileStreamResult fileStreamResult = new FileStreamResult(memoryStream, "application/pdf");
        fileStreamResult.FileDownloadName = fileName;
        return fileStreamResult;
    }

    // Add the class to override the method for puppeteer
    public class CustomBrowserType : ExportSettings
    {
        private string puppeteerPath;

        public CustomBrowserType(string path)
        {
            puppeteerPath = path;
        }
        // Can be used to rendered html data visualization from the given url and convert the image to base 64 string by using external browser
        public override string GetImageFromHTML(string url)
        {
            return LaunchPuppeteer(url).Result;
        }
        // Can be used to convert the image from Puppeteer
        public async Task<string> LaunchPuppeteer(string url)
        {
        // Assigned the chrome.exe path to the puppeteer
            await using var browser = await Puppeteer.LaunchAsync(new LaunchOptions { Headless = true, ExecutablePath =  puppeteerPath + @"chrome-win/chrome.exe"});
            await using var page = await browser.NewPageAsync();
            await page.GoToAsync(url);
            return await page.WaitForSelectorAsync("#imagejsonData").Result.GetPropertyAsync("innerText").Result.JsonValueAsync<string>();
        }
    }
}

> Note: Puppeteer, a headless Chrome automation tool, is currently functioning only for EJ1 scripts.

The Scripts and Dependent scripts must be added to export the data visualization report items.

External Browser - Selenium

In .NET Framework it supports netframework462 or above version only.

Operating System chrome-win Download Link Chrome driver Download Link
Windows 32-bit https://storage.googleapis.com/chromium-browser-snapshots/Win/901912/chrome-win.zip https://storage.googleapis.com/chrome-for-testing-public/136.0.7103.113/win32/chromedriver-win32.zip
Windows 64-bit https://storage.googleapis.com/chromium-browser-snapshots/Win_x64/901912/chrome-win.zip https://storage.googleapis.com/chrome-for-testing-public/136.0.7103.113/win64/chromedriver-win64.zip
linux https://storage.googleapis.com/chromium-browser-snapshots/Linux_x64/901912/chrome-linux.zip https://storage.googleapis.com/chrome-for-testing-public/136.0.7103.113/linux64/chromedriver-linux64.zip
  1. Open the Report Writer application and install the Selenium.WebDriver and Selenium.WebDriver.ChromeDriver package from the NuGet Gallery.
  2. Create the following folder App_Data/Selenium/chrome-win in your application.
  3. Copy all the files from chrome-win folder for Windows or chrome-linux folder for Linux from the above shared download links and paste into App_Data/Selenium/chrome-win folder in your application.
  4. Download the Chrome Driver from the above shared download links as per your operating system and paste it in App_Data/Selenium folder.
  5. Open the Web API file in the Report Writer application.
  6. Set the BrowserTypes enum property to External.
  7. Create and initialize a CustomExportSettings by inheriting from the ExportSettings class.
  8. Set the ResourcePath, Scripts, and DependentScripts properties in the Report Writer instance. The following code example demonstrates how to configure Playwright in your ASP.NET Core application.

In this tutorial, the product-line-sales.rdl report is used, and it can be downloaded from this link.

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public IActionResult Export(string writerFormat)
    {
        string fileName = null;
        WriterFormat format;
        string reportPath = Server.MapPath(@"~\App_Data\Resources\OrdersAnalysis.rdl");
        FileStream reportStream = new FileStream(reportPath, FileMode.Open, FileAccess.Read);
        BoldReports.Writer.ReportWriter writer = new BoldReports.Writer.ReportWriter();

        writer.ExportResources.BrowserType = ExportResources.BrowserTypes.External;
        string chromeDriverPath = Server.MapPath(@"~\App_Data\Selenium\");
        string chromeExePath = Server.MapPath(@"~\App_Data\Selenium\chrome-win\chrome.exe");
        writer.ExportResources.ResourcePath = Server.MapPath(@"\App_Data\Selenium\chrome-win");

        writer.ExportSettings = new CustomExportSettings(chromeDriverPath, chromeExePath);

        writer.ExportResources.Scripts = new List<string>
        {
            //Report Viewer component dependent script
        "https://cdn.boldreports.com/12.1.12/scripts/v2.0/common/bold.reports.common.min.js",
        "https://cdn.boldreports.com/12.1.12/scripts/v2.0/common/bold.reports.widgets.min.js",
            //Report Viewer Script
        "https://cdn.boldreports.com/12.1.12/scripts/v2.0/bold.report-viewer.min.js"
        };
        writer.ExportResources.DependentScripts = new List<string>
        {
        "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
        };

        if (writerFormat == "PDF")
        {
            fileName = "ProductLineSales.pdf";
            format = WriterFormat.PDF;
        }
        else if (writerFormat == "Word")
        {
            fileName = "ProductLineSales.docx";
            format = WriterFormat.Word;
        }
        else if (writerFormat == "CSV")
        {
            fileName = "ProductLineSales.CSV";
            format = WriterFormat.CSV;
        }
        else
        {
            fileName = "ProductLineSales.xlsx";
            format = WriterFormat.Excel;
        }

        writer.LoadReport(reportStream);
        MemoryStream memoryStream = new MemoryStream();
        writer.Save(memoryStream, format);
        // Download the generated document from client.
        memoryStream.Position = 0;
        FileStreamResult fileStreamResult = new FileStreamResult(memoryStream, "application/pdf");
        fileStreamResult.FileDownloadName = fileName;
        return fileStreamResult;
    }
}

public class CustomExportSettings : ExportSettings
{
    private readonly string _chromeDriverPath;
    private readonly string _chromeBinaryPath;

    public CustomExportSettings(string chromeDriverPath, string chromeBinaryPath)
    {
        _chromeDriverPath = chromeDriverPath;
        _chromeBinaryPath = chromeBinaryPath;
    }

    public override string GetImageFromHTML(string url)
    {
        Console.WriteLine(">>> GetImageFromHTML called with URL: " + url);

        ChromeOptions options = new ChromeOptions();
        options.AddArgument("--headless");
        options.AddArgument("--disable-gpu");
        options.AddArgument("--no-sandbox");
        options.AddArgument("--window-size=1920,1080");

        if (!string.IsNullOrWhiteSpace(_chromeBinaryPath))
        {
            options.BinaryLocation = _chromeBinaryPath;
        }

        ChromeDriverService service = ChromeDriverService.CreateDefaultService(_chromeDriverPath);
        service.SuppressInitialDiagnosticInformation = true;
        service.HideCommandPromptWindow = true;

        try
        {
            using (var driver = new ChromeDriver(service, options, TimeSpan.FromSeconds(60)))
            {
                driver.Navigate().GoToUrl(url);

                WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(30));
                wait.Until(d =>
                {
                    var readyState = ((IJavaScriptExecutor)d).ExecuteScript("return document.readyState").ToString();
                    return readyState == "complete";
                });

                // Wait for the chart or canvas to render completely
                System.Threading.Thread.Sleep(3000); // Optional: adjust if needed
                var imageDataElement = driver.FindElement(By.Id("imagejsonData"));
                var base64Image = imageDataElement?.Text;

                if (string.IsNullOrWhiteSpace(base64Image))
                    throw new InvalidOperationException("No base64 image data found.");

                return base64Image;
            }
        }
        catch (Exception ex)
        {
            Console.WriteLine(">>> Error in GetImageFromHTML: " + ex.Message);
            throw new ApplicationException("Failed to render chart image via ChromeDriver.", ex);
        }
    }
}

The Scripts and Dependent scripts must be added to export the data visualization report items.

PhantomJS - Classic Tool

To download PhantomJS application and deploy it on your machine, you should accept its license terms on LICENSE and Third-Party document.

  1. Download PhantomJS for windows here and for linux here and extract the download file.
  2. Copy the PhantomJS file from the extracted bin folder and paste into AppData/PhantomJS folder in your application.
  3. Open the Report Writer application Web API file.
  4. Set the UsePhantomJS property to true.
  5. Set the PhantomJSPath, Scripts and DependentScripts property in Report Writer instance. The following code example demonstrates how to configure PhantomJS in your ASP.NET MVC application.

In this tutorial, the sales-order-detail.rdl report is used, and it can be downloaded in this link.

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Export(string writerFormat)
    {
        // Here, we have loaded the sample report from application the folder App_Data.
        FileStream reportStream = new FileStream(Server.MapPath(@"\App_Data\Resources\sales-order-details.rdl"), FileMode.Open, FileAccess.Read);
        BoldReports.Writer.ReportWriter writer = new BoldReports.Writer.ReportWriter();
        string fileName = null;
        WriterFormat format;
        string type = null;

        // PhantomJS Option to export the data visualization report items.
        writer.ExportResources.UsePhantomJS = true;
        // Set the IncludeText property to true, when text not displayed in the data visualization images.
        writer.ExportResources.IncludeText = true;
        writer.ExportResources.PhantomJSPath = Server.MapPath(@"\App_Data\PhantomJS\");

        writer.ExportResources.Scripts = new List<string>
        {
           //Report Viewer component dependent script
            "https://cdn.boldreports.com/12.1.12/scripts/v2.0/common/bold.reports.common.min.js",
            "https://cdn.boldreports.com/12.1.12/scripts/v2.0/common/bold.reports.widgets.min.js",
             //Report Viewer Script
            "https://cdn.boldreports.com/12.1.12/scripts/v2.0/bold.report-viewer.min.js"
        };
        writer.ExportResources.DependentScripts = new List<string>
        {
            "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
        };

        if (writerFormat == "PDF")
        {
            fileName = "sales-order-detail.pdf";
            format = WriterFormat.PDF;
        }
        else if (writerFormat == "Word")
        {
            fileName = "sales-order-detail.docx";
            format = WriterFormat.Word;
        }
        else if (writerFormat == "CSV")
        {
            fileName = "sales-order-detail.CSV";
            format = WriterFormat.CSV;
        }
        else
        {
            fileName = "sales-order-detail.xlsx";
            format = WriterFormat.Excel;
        }

        writer.LoadReport(reportStream);
        MemoryStream memoryStream = new MemoryStream();
        writer.Save(memoryStream, format);

        // Download the generated document from client.
        memoryStream.Position = 0;
        FileStreamResult fileStreamResult = new FileStreamResult(memoryStream, "application/pdf");
        fileStreamResult.FileDownloadName = fileName;
        return fileStreamResult;
    }
}

The Scripts and Dependent scripts must be added to export the data visualization report items.

CONTENTS
Having trouble getting help?
Contact Support
CONTENTS
Having trouble getting help?
Contact Support