While going through a webpage we may want to download HTML content as a PDF file for further reference. Like, we can use Html to Pdf conversations when we need to share our web page in presentation format to clients, and sales companies can use it to display the yearly or monthly sales of their product based on the charts from HTML to pdf.
I am taking the example of charts that I am converting from HTML to PDF.
Step 1: Add a view for charts.
Copy and paste the below code to render the charts from view to browser.
<body>
<canvas id="mybarChart" style="width:100%;max-width:700px"></canvas>
<canvas id="mylineChart" style="width:100%;max-width:600px"></canvas>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script>
var barValues = ["Italy", "France", "Spain", "USA", "Argentina"];
var baryValues = [55, 49, 44, 24, 20];
var barColors = ["red", "green", "blue", "orange", "brown"];
new Chart("mybarChart", {
type: "bar",
data: {
labels: barValues,
datasets: [{
backgroundColor: barColors,
data: baryValues
}]
},
options: {
legend: { display: false },
title: {
display: true,
text: "World Covid-Case 2020"
}
}
});
var lineValues = [50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150];
var lineyValues = [7, 8, 8, 9, 9, 9, 10, 11, 14, 14, 15];
new Chart("mylineChart", {
type: "line",
data: {
labels: lineValues,
datasets: [{
fill: false,
lineTension: 0,
backgroundColor: "red",
borderColor: "Black",
data: lineyValues
}]
},
options: {
legend: { display: false },
title: {
display: true,
text: "World Covid-Case 2020"
},
scales: {
yAxes: [{ ticks: { min: 6, max: 16 } }],
}
}
});
var PieValues = ["Italy", "France", "Spain", "USA", "Argentina"];
var PieyValues = [55, 49, 44, 24, 15];
var pieColors = [
"#b91d47",
"#00aba9",
"#2b5797",
"#e8c3b9",
"#1e7145"
];
new Chart("myChart", {
type: "pie",
data: {
labels: PieValues,
datasets: [{
backgroundColor: pieColors,
data: PieyValues
}]
},
options: {
title: {
display: true,
text: "World Covid-Case 2020"
}
}
});
</script>
Step 2: Put one button to convert Html to Pdf
@{Html.BeginForm("HtmlToPdfConvert", "BarChart", FormMethod.Post);
{
<div>
<input type="submit" value="Convert PDF" style="width:150px;height:27px;background-color:lightcoral" />
</div>
}
Html.EndForm();
}
Step 3: Install the IronPdf from Nuget Package.
Step 4: In your controller Copy and paste the below code.
public async Task<IActionResult> HtmlToPdfConvert()
{
var html = await RazorTemplateEngine.RenderAsync("~/Views/BarChart/Chart.cshtml");
var Renderer = new IronPdf.ChromePdfRenderer();
Renderer.RenderingOptions.EnableJavaScript = true;
Renderer.RenderingOptions.RenderDelay = 1000;
Renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;
var pdfdoc = Renderer.RenderHtmlAsPdf(html);
byte[] Binary = pdfdoc.BinaryData;
return File(Binary, System.Net.Mime.MediaTypeNames.Application.Pdf, "Chart.pdf");
}
Ouput
