Aspose.Words for .NET menyediakan serangkaian fitur lengkap untuk memanipulasi dan mengonversi dokumen MS Word dalam banyak aplikasi .NET. Khususnya, Anda dapat membuat baru atau mengedit dokumen Word yang ada di desktop atau aplikasi web. Dalam posting ini, saya akan menunjukkan kepada Anda bagaimana memanfaatkan kemampuan pemrosesan Word dari Aspose.Words for .NET dan membuat MS Word Editor berbasis web di ASP.NET MVC.
ASP.NET MVC Word Editor - Buat Dokumen Word
Kami akan membuat ASP.NET MVC Word Editor yang akan didasarkan pada editor HTML WYSIWYG untuk menulis dan memperbarui konten dokumen. Selanjutnya, Aspose.Words for .NET akan digunakan untuk merender konten dokumen Word ke dalam HTML untuk mengedit dan membuat dokumen Word dari konten yang diperbarui.
Langkah-langkah Membuat MS Word Editor di ASP.NET MVC
Untuk demonstrasi, saya telah menggunakan editor Suneditor WYSIWYG berbasis JavaScript di aplikasi ini. Anda dapat menggunakan yang sama atau memilih editor HTML lain yang sesuai dengan kebutuhan Anda. Berikut langkah-langkah membuat ASP.NET Word Editor.
- Pertama, buat Aplikasi Web Inti ASP.NET baru di Visual Studio.
- Pilih template Aplikasi Web (Model-View-Controller).
- Unduh file editor WYSIWYG dan simpan di direktori wwwroot.
- Buka NuGet Package Manager dan instal paket Aspose.Words for .NET.
- Tambahkan skrip berikut dalam tampilan index.cshtml.
@{
ViewData["Title"] = "Word Editor in ASP.NET";
}
<div class="row">
<div class="col-md-12">
<form asp-controller="Home" asp-action="UploadFile" method="post" class="form-inline"
enctype="multipart/form-data">
<br />
<div class="form-group">
<input type="file" name="file" accept=".doc, .docx" class="form-control custom-file-input" />
</div>
<div class="form-group">
<button type="submit" class="form-control btn btn-primary">Open</button>
</div>
<div class="form-group" style="position:relative; float :right">
<button type="button" id="download" class="form-control btn btn-success" value="Save and Download">Save and Download</button>
</div>
</form>
<br />
<form method="post" asp-action="Index" id="formDownload">
<textarea name="editor" id="editor" rows="80" cols="100">
@if (ViewBag.HtmlContent == null)
{
<p>Write something or open an existing Word document. </p>
}
else
{
@ViewBag.HtmlContent;
}
</textarea>
</form>
</div>
</div>
<!-- suneditor -->
<link href="~/suneditor/dist/css/suneditor.min.css" rel="stylesheet">
<!-- suneditor -->
<script src="~/suneditor/dist/suneditor.min.js"></script>
<script>
var suneditor = SUNEDITOR.create('editor', {
display: 'block',
width: '100%',
height: '30%',
popupDisplay: 'full',
buttonList: [
['font', 'fontSize', 'formatBlock'],
['paragraphStyle', 'blockquote'],
['bold', 'underline', 'align', 'strike', 'subscript', 'superscript', 'horizontalRule', 'list'],
['table', 'link', 'image'],
['align', 'horizontalRule', 'list', 'lineHeight'],
['codeView']
],
placeholder: 'Start typing something...'
});
</script>
<script>
$(document).ready(function () {
$("#download").click(function () {
suneditor.save();
$("#formDownload").submit();
});
});
</script>
- Tambahkan metode berikut di pengontrol HomeController.cs.
[HttpPost]
public FileResult Index(string editor)
{
try
{
// Buat nama file yang unik
string fileName = Guid.NewGuid() + ".docx";
// Mengkonversi teks HTML ke array byte
byte[] byteArray = Encoding.UTF8.GetBytes(editor.Contains("<html>") ? editor : "<html>" + editor + "</html>");
// Hasilkan dokumen Word dari HTML
MemoryStream stream = new MemoryStream(byteArray);
Document Document = new Document(stream);
// Buat aliran memori untuk file Word
var outputStream = new MemoryStream();
Document.Save(outputStream, SaveFormat.Docx);
outputStream.Position = 0;
// Kembalikan file Word yang dihasilkan
return File(outputStream, System.Net.Mime.MediaTypeNames.Application.Rtf, fileName);
}
catch (Exception exp)
{
return null;
}
}
[HttpPost]
public ViewResult UploadFile(IFormFile file)
{
// Tetapkan jalur file
var path = Path.Combine("wwwroot/uploads", file.FileName);
using (var stream = new FileStream(path, FileMode.Create))
{
file.CopyTo(stream);
}
// Muat dokumen Word
Document doc = new Document(path);
var outStream = new MemoryStream();
// Tetapkan opsi HTML
HtmlSaveOptions opt = new HtmlSaveOptions();
opt.ExportImagesAsBase64 = true;
opt.ExportFontsAsBase64 = true;
// Konversikan dokumen Word ke HTML
doc.Save(outStream, opt);
// Baca teks dari aliran
outStream.Position = 0;
using(StreamReader reader = new StreamReader(outStream))
{
ViewBag.HtmlContent = reader.ReadToEnd();
}
return View("Index");
}
- Terakhir, bangun dan jalankan aplikasi di browser favorit Anda.
Demo
Berikut ini adalah demonstrasi cara membuat atau mengedit dokumen Word di ASP.NET Word Editor.
Buat Dokumen Word di ASP.NET
Edit Dokumen Word di ASP.NET
Unduh Kode Sumber
Anda dapat mengunduh kode sumber Editor MS Word dari di sini.
Kesimpulan
Pada artikel ini, Anda telah mempelajari cara membuat dokumen MS Word di ASP.NET. Panduan langkah demi langkah bersama dengan contoh kode telah menunjukkan cara membuat editor MS Word berbasis web sederhana di ASP.NET MVC. Di samping itu, Anda dapat mempelajari lebih lanjut tentang Aspose.Words for .NET menggunakan sumber daya berikut.
Coba Aspose.Words for .NET Gratis
Anda dapat mencoba Aspose.Words for .NET secara gratis dengan meminta lisensi sementara.