Export Data Visualization in MVC Environment
To export data visualization report items with the Bold Reports® ASP.NET MVC Report Writer, use an external browser (Puppeteer or Selenium) or PhantomJS. Use one of the following options to export the report.
External Browser - Puppeteer
To export data visualization report items with Puppeteer in the ASP.NET MVC Report Writer, download the Chromium package for your operating system and configure PuppeteerSharp in your application.
In .NET Framework it supports
net621or above version only. To download the Puppeteer package, use the following links.
| 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 |
- Open the Report Writer application and install the
PuppeteerSharppackage fromNuGet Gallery. - Create the following folder
wwwroot/Puppeteerin your application. - Copy the
chrome-winfolder for Windows from the extracted location of puppeteer package and paste intowwwroot/Puppeteerfolder in your application. - Open the Report Writer application Web API file.
- Set the
BrowserTypesEnum property toExternal. - Create and initialize
CustomBrowserTypeby inheriting theExportSettingsclass. - Set the
ResourcePath,ScriptsandDependentScriptsproperty inReport Writerinstance. The following code example demonstrates how to configurePuppeteerin your ASP.NET MVC application.
This tutorial uses the
product-line-sales.rdlreport. You can download it from the product line sales sample report download.
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/15.1.10/scripts/common/ej2-base.min.js",
$"https://cdn.boldreports.com/15.1.10/scripts/common/ej2-data.min.js",
$"https://cdn.boldreports.com/15.1.10/scripts/common/ej2-pdf-export.min.js",
$"https://cdn.boldreports.com/15.1.10/scripts/common/ej2-svg-base.min.js",
$"https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej2-lineargauge.min.js",
$"https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej2-circulargauge.min.js",
$"https://cdn.boldreports.com/15.1.10/scripts/common/bold.reports.common.min.js",
$"https://cdn.boldreports.com/15.1.10/scripts/common/bold.reports.widgets.min.js",
$"https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej.chart.min.js",
//Report Viewer Script
$"https://cdn.boldreports.com/15.1.10/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
ScriptsandDependentscripts must be added to export the data visualization report items.
External Browser - Selenium
To export data visualization report items with Selenium in the ASP.NET MVC Report Writer, download the Chromium package and the Chrome driver for your operating system and configure the Selenium.WebDriver packages in your application.
In .NET Framework it supports
netframework462or above version only.
- Open the Report Writer application and install the
Selenium.WebDriverandSelenium.WebDriver.ChromeDriverpackage from theNuGet Gallery. - Create the following folder
App_Data/Selenium/chrome-winin your application. - Copy all the files from
chrome-winfolder for Windows orchrome-linuxfolder for Linux from the above shared download links and paste intoApp_Data/Selenium/chrome-winfolder in your application. - Download the Chrome Driver from the above shared download links as per your operating system and paste it in
App_Data/Seleniumfolder. - Open the Web API file in the Report Writer application.
- Set the
BrowserTypesenum property toExternal. - Create and initialize a
CustomExportSettingsby inheriting from theExportSettingsclass. - Set the
ResourcePath,Scripts, andDependentScriptsproperties in theReport Writerinstance. The following code example demonstrates how to configurePlaywrightin your ASP.NET Core application.
This tutorial uses the
product-line-sales.rdlreport. You can download it from the product line sales sample report download.
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/15.1.10/scripts/v2.0/common/bold.reports.common.min.js",
"https://cdn.boldreports.com/15.1.10/scripts/v2.0/common/bold.reports.widgets.min.js",
//Report Viewer Script
"https://cdn.boldreports.com/15.1.10/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
ScriptsandDependentscripts must be added to export the data visualization report items.
PhantomJS - Classic Tool
To export data visualization report items with PhantomJS in the ASP.NET MVC Report Writer, deploy the PhantomJS application in your application folder and set the UsePhantomJS property to true.
To download
PhantomJSapplication and deploy it on your machine, you should accept its license terms on LICENSE and Third-Party document.
- Download
PhantomJSforwindowsorPhantomJSforlinuxand extract the downloaded file. - Copy the
PhantomJSfile from the extracted bin folder and paste intoAppData/PhantomJSfolder in your application. - Open the Report Writer application Web API file.
- Set the
UsePhantomJSproperty totrue. - Set the
PhantomJSPath,ScriptsandDependentScriptsproperty inReport Writerinstance. The following code example demonstrates how to configurePhantomJSin your ASP.NET MVC application.
This tutorial uses the
sales-order-detail.rdlreport. You can download it from the sales order detail sample report download.
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/15.1.10/scripts/v2.0/common/bold.reports.common.min.js",
"https://cdn.boldreports.com/15.1.10/scripts/v2.0/common/bold.reports.widgets.min.js",
//Report Viewer Script
"https://cdn.boldreports.com/15.1.10/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
ScriptsandDependentscripts must be added to export the data visualization report items.