Penampil Excel C# ASP.NET

Apakah Anda ingin menampilkan lembar kerja Microsoft Excel dalam aplikasi web Anda? Apakah Anda mencari ASP.NET MVC Excel Viewer? Jika ya, Anda telah mendarat di tempat yang benar-benar tepat. Di blog ini, Anda akan belajar cara membuat Excel Viewer dan menampilkan lembar kerja Excel di aplikasi ASP.NET MVC menggunakan C#. Setelah menghabiskan beberapa menit dan mengikuti beberapa langkah sederhana, Anda akan memiliki Penampil Excel (XLS atau XLSX) Anda sendiri dan berjalan. Jadi mari kita mulai.

Fitur ASP.NET MVC Excel Viewer

ASP.NET Excel Viewer kami akan memiliki fitur berikut dan Anda dapat menyempurnakannya sesuai kebutuhan Anda.

  1. Telusuri dan lihat file Excel.
  2. Muat file Excel default saat memuat halaman.
  3. Tab untuk bernavigasi di antara lembar kerja Excel.

Langkah-langkah Membuat Excel Viewer di ASP.NET MVC

Berikut adalah beberapa langkah mudah untuk melihat file Excel di ASP.NET MVC.

  1. Buat aplikasi web ASP.NET MVC baru di Visual Studio.
Aplikasi Web ASP.NET MVC
  1. Buka NuGet Package Manager dan instal paket Aspose.Cells for .NET.
Lihat file Excel di ASP.NET di browser

  1. Buat folder baru “Documents” untuk menyimpan file Excel dan subfolder “Rendered” untuk menyimpan gambar yang dirender.

  2. Buat folder baru dengan nama “Helpers” di folder root.

  3. Buat kelas baru dengan nama “Lembar” di folder “Pembantu” untuk menyimpan informasi lembar kerja Excel.

public class Sheet
{
	public string SheetName { get; set; }
	public string Path { get; set; }
}
  1. Buka kelas “HomeController” dan ganti kodenya dengan kode berikut. Pastikan untuk mengganti nama file Excel default dalam tindakan Indeks.
public class HomeController : Controller
{
	public List<Sheet> sheets;

	[HttpGet]
	public ActionResult Index(string fileName)
	{
		sheets = new List<Sheet>();
		if (fileName == null)
		{
			// Tampilkan Lembar Kerja default saat memuat halaman
			sheets = RenderExcelWorksheetsAsImage("Workbook.xlsx");
		}
		else
		{
			sheets = RenderExcelWorksheetsAsImage(fileName);
		}

		return View(sheets);
	}
	public List<Sheet> RenderExcelWorksheetsAsImage(string FileName)
	{
		// Muat buku kerja Excel 
		Workbook book = new Workbook(Server.MapPath(Path.Combine("~/Documents", FileName)));
		var workSheets = new List<Sheet>();
		// Tetapkan opsi rendering gambar
		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("~/");

		// Buat penyaji buku kerja Excel
		WorkbookRender wr = new WorkbookRender(book, options);
		// Simpan dan lihat lembar kerja
		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. Buka Views/Home/index.cshtml dan ganti isinya dengan skrip berikut.
@{
    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. Bangun aplikasi dan jalankan di browser favorit Anda.

Lihat File Excel di ASP.NET MVC Viewer - Demo

File Excel default akan ditampilkan saat Anda akan memulai aplikasi untuk pertama kalinya.

Penampil Excel di ASP.NET C#

Buka Berkas Excel

Untuk membuka file Excel, klik tombol telusuri dan pilih file dari daftar.

Telusuri File Excel
Buka file Excel di ASP.NET C#

Menavigasi Antara Lembar Kerja Excel menggunakan Tab

Semua lembar kerja di buku kerja Excel akan ditampilkan dalam bentuk tab. Anda bisa mengklik tab untuk menavigasi di antara lembar kerja.

Tampilkan File Excel di ASP.NET

Unduh Kode Sumber

Aplikasi ini open source dan kode sumbernya tersedia di GitHub.

Dapatkan Lisensi Sementara untuk Aspose.Cells for .NET

Anda bisa mendapatkan lisensi sementara dari Aspose.Cells for .NET API untuk menghindari batasan evaluasi/percobaan.