ASP.NET MVC Word Editor

Aspose.Words for .NET مجموعه کاملی از ویژگی‌ها را برای دستکاری و تبدیل اسناد MS Word در بسیاری از برنامه‌های NET فراهم می‌کند. به ویژه، می توانید اسناد Word موجود را در دسکتاپ یا برنامه های وب ایجاد کنید یا ویرایش کنید. در این پست، من به شما نشان خواهم داد که چگونه از قابلیت های پردازش ورد Aspose.Words برای دات نت استفاده کنید و یک ویرایشگر MS Word مبتنی بر وب در ASP.NET MVC ایجاد کنید.

ASP.NET MVC Word Editor - ایجاد اسناد Word

ما قصد داریم یک ASP.NET MVC Word Editor ایجاد کنیم که بر اساس یک ویرایشگر HTML WYSIWYG برای نوشتن و به روز رسانی محتوای اسناد خواهد بود. علاوه بر این، Aspose.Words for .NET برای رندر کردن محتوای سند Word به HTML برای ویرایش و تولید اسناد Word از محتوای به روز شده استفاده خواهد شد.

مراحل ایجاد ویرایشگر MS Word در ASP.NET MVC

برای نمایش، من از ویرایشگر Suneditor WYSIWYG مبتنی بر جاوا اسکریپت در این برنامه استفاده کرده ام. شما می توانید از همان استفاده کنید یا هر ویرایشگر HTML دیگری را که مطابق با نیاز شما باشد انتخاب کنید. مراحل زیر برای ایجاد ASP.NET Word Editor آورده شده است.

  • ابتدا یک ASP.NET Core Web Application در ویژوال استودیو ایجاد کنید.
  • الگوی Web Application (Model-View-Controller) را انتخاب کنید.
  • فایل های ویرایشگر WYSIWYG را دانلود کرده و در پوشه wwwroot نگه دارید.
  • NuGet Package Manager را باز کنید و بسته Aspose.Words را برای دات نت نصب کنید.
  • اسکریپت زیر را در نمای 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>
  • روش های زیر را در کنترلر HomeController.cs اضافه کنید.
[HttpPost]
public FileResult Index(string editor)
{
	try
	{
		// یک نام فایل منحصر به فرد ایجاد کنید
		string fileName = Guid.NewGuid() + ".docx";
		// تبدیل متن HTML به آرایه بایت
		byte[] byteArray = Encoding.UTF8.GetBytes(editor.Contains("<html>") ? editor : "<html>" + editor + "</html>");
		// سند Word را از HTML ایجاد کنید
		MemoryStream stream = new MemoryStream(byteArray);
		Document Document = new Document(stream);
		// ایجاد جریان حافظه برای فایل Word
		var outputStream = new MemoryStream();
		Document.Save(outputStream, SaveFormat.Docx);
		outputStream.Position = 0;
		// فایل Word تولید شده را برگردانید
		return File(outputStream, System.Net.Mime.MediaTypeNames.Application.Rtf, fileName);
	}
	catch (Exception exp)
	{
		return null;
	}
}
[HttpPost]
public ViewResult UploadFile(IFormFile file)
{
	// مسیر فایل را تنظیم کنید
	var path = Path.Combine("wwwroot/uploads", file.FileName);
	using (var stream = new FileStream(path, FileMode.Create))
	{
		file.CopyTo(stream);
	}
	// سند Word را بارگیری کنید
	Document doc = new Document(path);
	var outStream = new MemoryStream();
	// گزینه های HTML را تنظیم کنید
	HtmlSaveOptions opt = new HtmlSaveOptions();
	opt.ExportImagesAsBase64 = true;
	opt.ExportFontsAsBase64 = true; 
	// تبدیل سند Word به HTML
	doc.Save(outStream, opt);
	// خواندن متن از جریان
	outStream.Position = 0;
	using(StreamReader reader = new StreamReader(outStream))
	{
		ViewBag.HtmlContent = reader.ReadToEnd();
	}
	return View("Index");
}
  • در نهایت اپلیکیشن را در مرورگر مورد علاقه خود بسازید و اجرا کنید.

نسخه ی نمایشی

در ادامه نحوه ایجاد یا ویرایش اسناد Word در ASP.NET Word Editor نمایش داده شده است.

یک سند Word در ASP.NET ایجاد کنید

ویرایش یک سند Word در ASP.NET

کد منبع را دانلود کنید

می توانید کد منبع MS Word Editor را از اینجا دانلود کنید.

نتیجه

در این مقاله نحوه ایجاد اسناد MS Word در ASP.NET را یاد گرفتید. راهنمای گام به گام همراه با نمونه کد نحوه ایجاد یک ویرایشگر ساده MS Word مبتنی بر وب را در ASP.NET MVC نشان داده است. علاوه بر این، می‌توانید با استفاده از منابع زیر درباره Aspose.Words برای دات‌نت بیشتر کاوش کنید.

Aspose.Words را برای دات نت به صورت رایگان امتحان کنید

می توانید Aspose.Words را برای دات نت با درخواست [مجوز موقت] به صورت رایگان امتحان کنید.

مقالات مرتبط