Xuất biểu đồ sang PDF trong ASP.NET MVC với thư viện iTextSharp

Giới thiệu

Trong bài viết này, chúng ta sẽ tìm hiểu cách xuất biểu đồ từ ASP.NET MVC sang định dạng PDF bằng cách sử dụng thư viện iTextSharp. Chúng ta sẽ sử dụng cơ sử dữ liệu mẫu Northwind của Microsoft để minh họa.

Cài đặt cơ sở dữ liệu mẫu Northwind

Đầu tiên, bạn cần tải xuống cơ sở dữ liệu mẫu Northwind miễn phí từ Microsoft. Truy cập vào trang tải xuống chính thức và nhấn nút download.

Sau khi tải xuống hoàn tất, chạy file cài đặt (.msi) và hoàn thành quá trình cài đặt theo hướng dẫn.

Tiếp theo, mở SQL Server Management Studio, nhấp chuột phải vào thư mục Databases trong Object Explorer và chọn Attach. Tìm và chọn file NORTHWIND.MDF, sau đó nhấn OK để hoàn tất việc đính kèm cơ sở dữ liệu.

Tạo Model cho biểu đồ

Chúng ta cần tạo một class model để lưu trữ dữ liệu biểu đồ:

public class DonHangModel
{
    public string ThanhPho { get; set; }
    public int SoLuongDonHang { get; set; }
}

Tạo Controller xuất PDF

Dưới đây là controller hoàn chỉnh để tạo và xuất biểu đồ sang PDF:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using System.IO;
using iTextSharp.text;
using iTextSharp.text.pdf;
using WebApplication1.Models;
using System.Web.Helpers;

namespace WebApplication1.Controllers
{
    public class BieuDoPdfController : Controller
    {
        private static PdfContext doiTuongPdf = new PdfContext();
        
        public ActionResult Index()
        {
            byte[] duLieuAnh = TaoBieuDo();
            ViewBag.DuongDanAnh = "data:image/png;base64," + Convert.ToBase64String(duLieuAnh, 0, duLieuAnh.Length);
            return View();
        }
        
        [HttpPost]
        public FileResult XuatPdf()
        {
            byte[] duLieuAnh = TaoBieuDo();
            ViewBag.DuongDanAnh = "data:image/png;base64," + Convert.ToBase64String(duLieuAnh, 0, duLieuAnh.Length);
            
            using (MemoryStream luong = new System.IO.MemoryStream())
            {
                using (Document taiLieuPdf = new Document(PageSize.A4, 10f, 10f, 10f, 10f))
                {
                    PdfWriter ghiTaiLieu = PdfWriter.GetInstance(taiLieuPdf, luong);
                    taiLieuPdf.Open();

                    iTextSharp.text.Image anh = iTextSharp.text.Image.GetInstance(duLieuAnh);
                    taiLieuPdf.Add(anh);
                    taiLieuPdf.Close();

                    return File(luong.ToArray(), "application/pdf", "BieuDo.pdf");
                }
            }
        }
        
        private static byte[] TaoBieuDo()
        {
            List<DonHangModel> duLieuBieuDo = new List<DonHangModel>();
            
            var danhSachDuLieu = doiTuongPdf.Orders.GroupBy(u => u.ShipCity)
                                    .Select(s => new
                                    {
                                        TenThanhPho = s.Key,
                                        soDon = s.Count()
                                    }).ToList().Take(5).ToList();
            
            foreach (var phanTu in danhSachDuLieu)
            {
                duLieuBieuDo.Add(new DonHangModel()
                {
                    SoLuongDonHang = phanTu.soDon,
                    ThanhPho = phanTu.TenThanhPho
                });
            }
            
            Chart bieuDo = new Chart(width: 500, height: 500, theme: ChartTheme.Blue);
            bieuDo.AddTitle("Phan Bo Thanh Pho USA");
            bieuDo.AddSeries("MacDinh", chartType: "Pie", xValue: duLieuBieuDo, xField: "ThanhPho", yValues: duLieuBieuDo, yFields: "SoLuongDonHang");
            return bieuDo.GetBytes(format: "jpeg");
        }
    }
}

Tạo View

View để hiển thị biểu đồ và nút xuất PDF:

@{
    Layout = null;
}

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <img alt="BieuDo" src="@ViewBag.DuongDanAnh" style="height:300px; width:300px" />
    <br />
    @using (Html.BeginForm("XuatPdf", "BieuDoPdf", FormMethod.Post))
    {
        <input type="submit" id="btnXuat" value="Xuat PDF" />
    }
</body>
</html>

Giải thích các bước chính

Bước 1: Phương thức TaoBieuDo() tạo biểu đồ từ dữ liệu cơ sở dữ liệu bằng cách sử dụng lớp Chart của Web.Helpers. Biểu đồ được xuất ra định dạng JPEG.

Bước 2: Trong action Index(), chúng ta tạo biểu đồ và chuyển đổi nó thành chuỗi Base64 để hiển thị trực tiếp trên trang web.

Bước 3: Trong action XuatPdf(), chúng ta sử dụng iTextSharp để tạo tài liệu PDF, thêm hình ảnh biểu đồ vào tài liệu, sau đó trả về file PDF cho người dùng tải xuống.

Thư viện iTextSharp cung cấp các lớp DocumentPdfWriter để tạo và ghi nội dung PDF một cách dễ dàng.

Thẻ: ASP.NET MVC iTextSharp C# PDF chart

Đăng vào ngày 12 tháng 7 lúc 02:15