Export Data Visualization in Core Environment

Report Writer uses WebBrowser Control to export the data visualization to PDF, PPT,Word, Excel, and HTML file formats. The WebBrowser is not supported in Core environment. To overcome this limitation in Core environment, we offer several options for exporting data visualization report items. Please use one of the following methods to export the report.

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

Note:

  • Puppeteer: It supports the .NET Core framework. It’s compatible with most Linux distributions used in Kubernetes, including Ubuntu. However, it does not support Azure environments. For Azure on Linux in windows, use Playwright.
  • Playwright: It supports the .NET Core framework.
  • PhantomJS: It supports the .NET Core framework, but note that it’s no longer actively maintained.

External Browser - Puppeteer

In .NET Core it supports ASP.NET Core 2.1 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
linux https://storage.googleapis.com/chromium-browser-snapshots/Linux_x64/901912/chrome-linux.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 or chrome-linux folder for Linux 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 Core application.

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

public class HomeController : Controller
{
    // IWebHostEnvironment used with sample to get the application data from wwwroot.
    private Microsoft.AspNetCore.Hosting.IWebHostEnvironment _hostingEnvironment;

    // IWebHostEnvironment initialized with controller to get the data from application data folder.
    public HomeController(Microsoft.AspNetCore.Hosting.IWebHostEnvironment hostingEnvironment)
    {
        _hostingEnvironment = hostingEnvironment;
    }

    public IActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public IActionResult Export(string writerFormat)
    {
        string fileName = null;
        WriterFormat format;
        string basePath = _hostingEnvironment.WebRootPath;
        // Here, we have loaded the sample report from application the folder wwwroot.
        FileStream inputStream = new FileStream(basePath + @"\Resources\product-line-sales.rdl", FileMode.Open, FileAccess.Read);
        MemoryStream reportStream = new MemoryStream();
        inputStream.CopyTo(reportStream);
        reportStream.Position = 0;
        inputStream.Close();
        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 = basePath + @"/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/13.1.26/scripts/v2.0/common/bold.reports.common.min.js",
            "https://cdn.boldreports.com/13.1.26/scripts/v2.0/common/bold.reports.widgets.min.js",
             //Report Viewer Script
            "https://cdn.boldreports.com/13.1.26/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;
    }

    // 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>();
        }
    }
}

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

External Browser - Playwright

In .NET Core it supports ASP.NET Core 2.1 or above versions only.

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
linux https://storage.googleapis.com/chromium-browser-snapshots/Linux_x64/901912/chrome-linux.zip
  1. Open the Report Writer application and install the Microsoft. Playwright package from the NuGet Gallery.
  2. Create the following folder wwwroot/Playwright in your application.
  3. Copy the chrome-win folder for Windows or chrome-linux folder for Linux from the extracted location of playwright package and paste into wwwroot/Playwright folder in your application.
  4. Open the Web API file in the Report Writer application.
  5. Set the BrowserTypes enum property to External.
  6. Create and initialize a HeadlessBrowser by inheriting from the ExportSettings class.
  7. 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
{
    // IWebHostEnvironment is used in this example to retrieve application data from wwwroot.
    private Microsoft.AspNetCore.Hosting.IWebHostEnvironment _hostingEnvironment;

    // IWebHostEnvironment is initialized in the controller to access data from the application data folder
    public HomeController(Microsoft.AspNetCore.Hosting.IWebHostEnvironment hostingEnvironment)
    {
        _hostingEnvironment = hostingEnvironment;
    }

    public IActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public IActionResult Export(string writerFormat)
    {
        string fileName = null;
        WriterFormat format;
        string basePath = _hostingEnvironment.WebRootPath;
        // Load the sample report from the application's wwwroot folder.
        FileStream inputStream = new FileStream(basePath + @"/Resources/product-line-sales.rdl", FileMode.Open, FileAccess.Read);
        MemoryStream reportStream = new MemoryStream();
        inputStream.CopyTo(reportStream);
        reportStream.Position = 0;
        inputStream.Close();

        BoldReports.Writer.ReportWriter writer = new BoldReports.Writer.ReportWriter();
        writer.ExportResources.BrowserType = ExportResources.BrowserTypes.External;
        writer.ExportResources.ResourcePath = Path.Combine(basePath, "Playwright");
        writer.ExportSettings = new CustomBrowserType(writer.ExportResources.ResourcePath);

        writer.ExportResources.Scripts = new List<string>
        {
            //Report Viewer component dependent script
        "https://cdn.boldreports.com/13.1.26/scripts/v2.0/common/bold.reports.common.min.js",
        "https://cdn.boldreports.com/13.1.26/scripts/v2.0/common/bold.reports.widgets.min.js",
            //Report Viewer Script
        "https://cdn.boldreports.com/13.1.26/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 CustomBrowserType : ExportSettings
    {
        private readonly string _resourcePath;

        public CustomBrowserType(string resourcePath)
        {
            _resourcePath = resourcePath;
        }

        public override string GetImageFromHTML(string url)
        {
            return GetImageFromHtmlAsync(url).GetAwaiter().GetResult();
        }

        private async Task<string> GetImageFromHtmlAsync(string url)
        {
            return await RenderWithPlaywrightAsync(url);
        }

        private async Task<string> RenderWithPlaywrightAsync(string url)
        {
            using var playwright = await Playwright.CreateAsync();

            var chromiumPath = Path.Combine(_resourcePath, "chrome-win", "chrome.exe");

            await using var browser = await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions
            {
                Headless = true,
                ExecutablePath = chromiumPath
            });

            var context = await browser.NewContextAsync();
            var page = await context.NewPageAsync();

            await page.GotoAsync(url);
            await page.WaitForSelectorAsync("#imagejsonData");

            return await page.Locator("#imagejsonData").InnerTextAsync();
        }
    }
}

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

PhantomJS - Classic Tool

It supports ASP.NET Core 2.1 or above versions only. 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 wwwroot/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 Core application.

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

public class HomeController : Controller
{
    // IWebHostEnvironment used with sample to get the application data from wwwroot.
    private Microsoft.AspNetCore.Hosting.IWebHostEnvironment _hostingEnvironment;

    // IWebHostEnvironment initialized with controller to get the data from application data folder.
    public HomeController(Microsoft.AspNetCore.Hosting.IWebHostEnvironment hostingEnvironment)
    {
        _hostingEnvironment = hostingEnvironment;
    }

    public IActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public IActionResult Export(string writerFormat)
    {
        string fileName = null;
        WriterFormat format;
        string basePath = _hostingEnvironment.WebRootPath;
        // Here, we have loaded the sample report from application the folder wwwroot.
        FileStream inputStream = new FileStream(basePath + @"\Resources\product-line-sales.rdl", FileMode.Open, FileAccess.Read);
        MemoryStream reportStream = new MemoryStream();
        inputStream.CopyTo(reportStream);
        reportStream.Position = 0;
        inputStream.Close();
        BoldReports.Writer.ReportWriter writer = new BoldReports.Writer.ReportWriter();

        // 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 = basePath + @"\PhantomJS\";

        writer.ExportResources.Scripts = new List<string>
        {
            //Report Viewer component dependent script
            "https://cdn.boldreports.com/13.1.26/scripts/v2.0/common/bold.reports.common.min.js",
            "https://cdn.boldreports.com/13.1.26/scripts/v2.0/common/bold.reports.widgets.min.js",
             //Report Viewer Script
            "https://cdn.boldreports.com/13.1.26/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;
    }
}

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