Trình xem C# ASP.NET Excel

Bạn có muốn hiển thị các trang tính Microsoft Excel trong ứng dụng web của mình không? Bạn đang tìm kiếm một Trình xem ASP.NET MVC Excel? Nếu có, bạn đã hạ cánh ở một nơi hoàn toàn chính xác. Trong blog này, bạn sẽ tìm hiểu cách tạo Trình xem Excel và hiển thị các trang tính Excel trong các ứng dụng ASP.NET MVC bằng C#. Sau vài phút và làm theo một số bước đơn giản, bạn sẽ thiết lập và chạy Trình xem Excel (XLS hoặc XLSX) của riêng mình. Vì vậy, hãy bắt đầu.

Các tính năng của Trình xem ASP.NET MVC Excel

Trình xem ASP.NET Excel của chúng tôi sẽ có các tính năng sau và bạn có thể nâng cao chúng theo yêu cầu của mình.

  1. Duyệt và xem các tệp Excel.
  2. Tải tệp Excel mặc định khi tải trang.
  3. Các tab để điều hướng giữa các trang tính Excel.

Các bước để tạo Excel Viewer trong ASP.NET MVC

Sau đây là một số bước đơn giản để xem các tệp Excel trong ASP.NET MVC.

  1. Tạo một ứng dụng web ASP.NET MVC mới trong Visual Studio.
Ứng dụng web ASP.NET MVC
  1. Mở Trình quản lý gói NuGet và cài đặt gói Aspose.Cells for .NET.
Xem các tệp Excel trong ASP.NET trong trình duyệt

  1. Tạo thư mục mới “Documents” để lưu các tệp Excel và thư mục con “Rendered” để lưu các hình ảnh được hiển thị.

  2. Tạo một thư mục mới với tên “Người trợ giúp” trong thư mục gốc.

  3. Tạo một lớp mới với tên “Sheet” trong thư mục “Helpers” để lưu trữ thông tin của bảng tính Excel.

public class Sheet
{
	public string SheetName { get; set; }
	public string Path { get; set; }
}
  1. Mở lớp “HomeController” và thay thế mã của nó bằng mã sau. Đảm bảo thay thế tên tệp Excel mặc định trong hành động Chỉ mục.
public class HomeController : Controller
{
	public List<Sheet> sheets;

	[HttpGet]
	public ActionResult Index(string fileName)
	{
		sheets = new List<Sheet>();
		if (fileName == null)
		{
			// Hiển thị Worksheet mặc định khi tải trang
			sheets = RenderExcelWorksheetsAsImage("Workbook.xlsx");
		}
		else
		{
			sheets = RenderExcelWorksheetsAsImage(fileName);
		}

		return View(sheets);
	}
	public List<Sheet> RenderExcelWorksheetsAsImage(string FileName)
	{
		// Tải sổ làm việc Excel 
		Workbook book = new Workbook(Server.MapPath(Path.Combine("~/Documents", FileName)));
		var workSheets = new List<Sheet>();
		// Đặt tùy chọn kết xuất hình ảnh
		ImageOrPrintOptions options = new ImageOrPrintOptions();
		options.HorizontalResolution = 200;
		options.VerticalResolution = 200;
		options.AllColumnsInOnePagePerSheet = true;
		options.OnePagePerSheet = true;
		options.TextCrossType = TextCrossType.Default;
		options.ImageType = Aspose.Cells.Drawing.ImageType.Png;

		string imagePath = "";
		string basePath = Server.MapPath("~/");

		// Tạo trình kết xuất sổ làm việc Excel
		WorkbookRender wr = new WorkbookRender(book, options);
		// Lưu và xem trang tính
		for (int j = 0; j < book.Worksheets.Count; j++)
		{
			imagePath = Path.Combine("/Documents/Rendering", string.Format("sheet_{0}.png", j));
			wr.ToImage(j, basePath + imagePath);
			workSheets.Add(new Sheet { SheetName = string.Format("{0}", book.Worksheets[j].Name), Path = imagePath });
		}

		return workSheets;
	}
}
  1. Mở Views/Home/index.cshtml và thay thế nội dung của nó bằng tập lệnh sau.
@{
    ViewBag.Title = "Home Page";
    string[] files = Directory.GetFiles(Server.MapPath("~/Documents/"), "*.xlsx");
}
@model List<Excel_Viewer.Helper.Sheet>
@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Excel Viewer</title>
    <!-- CSS Includes -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <a class="navbar-brand" href="#">Spreadsheet Viewer</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                            browse
                        </button>
                    </li>
                </ul>
            </div>
        </nav>
        <br />
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            @for (int i = 0; i < Model.Count; i++)
            {
                if (i == 0)
                {
                    <li class="nav-item">
                        <a class="nav-link active" id="@Model[i].SheetName.Replace(' ','_')-tab" data-toggle="tab" href="#@Model[i].SheetName.Replace(' ','_')" role="tab" aria-controls="@Model[i].SheetName">@Model[i].SheetName</a>
                    </li>
                }
                else
                {
                    <li class="nav-item">
                        <a class="nav-link" id="@Model[i].SheetName.Replace(' ','_')-tab" data-toggle="tab" href="#@Model[i].SheetName.Replace(' ','_')" role="tab" aria-controls="@Model[i].SheetName">@Model[i].SheetName</a>
                    </li>
                }
            }
        </ul>
        <div class="tab-content" id="myTabContent">
            @for (int i = 0; i < Model.Count; i++)
            {
                if (i == 0)
                {
                    <div class="tab-pane fade show active" id="@Model[i].SheetName.Replace(' ','_')" role="tabpanel"><br />
                        <div class="card">
                            <div class="card-body"> <img src="@Model[i].Path" style="width: 11in" /></div>
                        </div>
                    </div>
                }
                else
                {
                    <div class="tab-pane fade" id="@Model[i].SheetName.Replace(' ','_')" role="tabpanel"><br />
                        <div class="card">
                            <div class="card-body"> <img src="@Model[i].Path" style="width: 11in" /></div>
                        </div>
                    </div>
                }
            }
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Select a file</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="list-group">
                        @foreach (string s in files)
                        {
                            string fileName = Path.GetFileName(s);
                            @Html.ActionLink(fileName, "Index", "Home", new { fileName = fileName }, new { @class = "list-group-item" })
                        }
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <!-- JS includes -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> @**@
    <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
</body>
</html>
  1. Xây dựng ứng dụng và chạy nó trên trình duyệt yêu thích của bạn.

Xem tệp Excel trong ASP.NET MVC Viewer - Demo

Tệp Excel mặc định sẽ được hiển thị khi bạn khởi động ứng dụng lần đầu tiên.

Trình xem Excel trong ASP.NET C#

Mở một tệp Excel

Để mở một tệp Excel, hãy nhấp vào nút duyệt và chọn tệp từ danh sách.

Duyệt tệp Excel
Mở tệp Excel trong ASP.NET C#

Điều hướng giữa các trang tính Excel bằng cách sử dụng tab

Tất cả các trang tính trong sổ làm việc Excel sẽ được hiển thị dưới dạng các tab. Bạn có thể nhấp vào các tab để điều hướng giữa các trang tính.

Hiển thị tệp Excel trong ASP.NET

Tải xuống mã nguồn

Ứng dụng này là nguồn mở và mã nguồn của nó có sẵn trên GitHub.

Nhận giấy phép tạm thời cho Aspose.Cells for .NET

Bạn có thể lấy giấy phép tạm thời của Aspose.Cells for .NET API để tránh các giới hạn đánh giá/dùng thử.