ASP.NET MVC Word Editor

Aspose.Words for .NET מספקת סט שלם של תכונות למניפולציה והמרת מסמכי MS Word בתוך מספר רב של יישומי NET. במיוחד, אתה יכול ליצור חדשים או לערוך את מסמכי Word הקיימים בתוך שולחן העבודה או יישומי האינטרנט. בפוסט זה, אני אראה לכם כיצד למנף את יכולות עיבוד התמלילים של Aspose.Words עבור .NET וליצור עורך MS Word מבוסס אינטרנט ב-ASP.NET MVC.

ASP.NET MVC Word Editor - צור מסמכי Word

אנו הולכים ליצור ASP.NET MVC Word Editor שיתבסס על עורך HTML WYSIWYG לכתיבה ועדכון של תוכן המסמכים. יתר על כן, Aspose.Words עבור .NET ישמש לעיבוד תוכן מסמך ה-Word ל-HTML לצורך עריכה והפקה של מסמכי Word מהתוכן המעודכן.

שלבים ליצירת עורך MS Word ב-ASP.NET MVC

לצורך ההדגמה, השתמשתי בעורך WYSIWYG Suneditor מבוסס JavaScript ביישום זה. אתה יכול להשתמש באותו או לבחור כל עורך HTML אחר שמתאים לדרישות שלך. להלן השלבים ליצירת ASP.NET Word Editor.

  • ראשית, צור יישום אינטרנט חדש של ASP.NET Core ב-Visual Studio.
  • בחר את התבנית של יישום האינטרנט (Model-View-Controller).
  • הורד את הקבצים של עורך WYSIWYG ושמור אותם בספריית wwwroot.
  • פתח את NuGet Package Manager והתקן את חבילת Aspose.Words for .NET.
  • הוסף את הסקריפט הבא בתצוגת 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);
	}
	// טען מסמך וורד
	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 עבור .NET באמצעות המשאבים הבאים.

נסה את Aspose.Words עבור NET בחינם

אתה יכול לנסות את Aspose.Words עבור .NET בחינם על ידי בקשת רישיון זמני.

מאמרים קשורים