Export Data Visualization in MVC Environment
we have provided the below option to export the data visualization report items
External Browser - Puppeteer
In .NET Framework it supports
net621or 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 |
- Open the Report Writer application and install the
PuppeteerSharppackage fromNuGet Gallery. - Create 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.
In this tutorial, the
product-line-sales.rdlreport 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/13.1.26/scripts/common/ej2-base.min.js",
$"https://cdn.boldreports.com/13.1.26/scripts/common/ej2-data.min.js",
$"https://cdn.boldreports.com/13.1.26/scripts/common/ej2-pdf-export.min.js",
$"https://cdn.boldreports.com/13.1.26/scripts/common/ej2-svg-base.min.js",
$"https://cdn.boldreports.com/13.1.26/scripts/data-visualization/ej2-lineargauge.min.js",
$"https://cdn.boldreports.com/13.1.26/scripts/data-visualization/ej2-circulargauge.min.js",
$"https://cdn.boldreports.com/13.1.26/scripts/common/bold.reports.common.min.js",
$"https://cdn.boldreports.com/13.1.26/scripts/common/bold.reports.widgets.min.js",
$"https://cdn.boldreports.com/13.1.26/scripts/data-visualization/ej.chart.min.js",
//Report Viewer Script
$"https://cdn.boldreports.com/13.1.26/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
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.
In this tutorial, the
product-line-sales.rdlreport 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/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 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 download
PhantomJSapplication and deploy it on your machine, you should accept its license terms on LICENSE and Third-Party document.
- Download
PhantomJSforwindowshere and forlinuxhere and extract the download 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.
In this tutorial, the
sales-order-detail.rdlreport 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/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 = "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.