ASP.NET MVC Word Editor

Aspose.Words for .NET tillhandahåller en komplett uppsättning funktioner för att manipulera och konvertera MS Word-dokument inom en mängd .NET-applikationer. I synnerhet kan du skapa nya eller redigera befintliga Word-dokument i skrivbordet eller webbapplikationer. I det här inlägget kommer jag att visa dig hur du kan utnyttja ordbehandlingsfunktionerna i Aspose.Words för .NET och skapa en webbaserad MS Word Editor i ASP.NET MVC.

ASP.NET MVC Word Editor - Skapa Word-dokument

Vi kommer att skapa en ASP.NET MVC Word Editor som kommer att baseras på en WYSIWYG HTML-editor för att skriva och uppdatera innehållet i dokumenten. Dessutom kommer Aspose.Words för .NET att användas för att rendera Word-dokumentets innehåll till HTML för redigering och generering av Word-dokument från det uppdaterade innehållet.

Steg för att skapa MS Word Editor i ASP.NET MVC

För demonstrationen har jag använt JavaScript-baserad Suneditor WYSIWYG-redigerare i denna applikation. Du kan antingen använda samma eller välja någon annan HTML-redigerare som passar dina krav. Följande är stegen för att skapa ASP.NET Word Editor.

  • Skapa först en ny ASP.NET Core Web Application i Visual Studio.
  • Välj mallen för webbapplikation (Model-View-Controller).
  • Ladda ner WYSIWYG-redigerarens filer och spara dem i wwwrootkatalogen.
  • Öppna NuGet Package Manager och installera paketet Aspose.Words for .NET.
  • Lägg till följande skript i index.cshtml-vyn.
@{
    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>
  • Lägg till följande metoder i HomeController.cs controller.
[HttpPost]
public FileResult Index(string editor)
{
	try
	{
		// Skapa ett unikt filnamn
		string fileName = Guid.NewGuid() + ".docx";
		// Konvertera HTML-text till byte-array
		byte[] byteArray = Encoding.UTF8.GetBytes(editor.Contains("<html>") ? editor : "<html>" + editor + "</html>");
		// Skapa Word-dokument från HTML
		MemoryStream stream = new MemoryStream(byteArray);
		Document Document = new Document(stream);
		// Skapa minnesström för Word-filen
		var outputStream = new MemoryStream();
		Document.Save(outputStream, SaveFormat.Docx);
		outputStream.Position = 0;
		// Returnera genererad Word-fil
		return File(outputStream, System.Net.Mime.MediaTypeNames.Application.Rtf, fileName);
	}
	catch (Exception exp)
	{
		return null;
	}
}
[HttpPost]
public ViewResult UploadFile(IFormFile file)
{
	// Ställ in filsökväg
	var path = Path.Combine("wwwroot/uploads", file.FileName);
	using (var stream = new FileStream(path, FileMode.Create))
	{
		file.CopyTo(stream);
	}
	// Ladda Word-dokument
	Document doc = new Document(path);
	var outStream = new MemoryStream();
	// Ställ in HTML-alternativ
	HtmlSaveOptions opt = new HtmlSaveOptions();
	opt.ExportImagesAsBase64 = true;
	opt.ExportFontsAsBase64 = true; 
	// Konvertera Word-dokument till HTML
	doc.Save(outStream, opt);
	// Läs text från stream
	outStream.Position = 0;
	using(StreamReader reader = new StreamReader(outStream))
	{
		ViewBag.HtmlContent = reader.ReadToEnd();
	}
	return View("Index");
}
  • Slutligen, bygg och kör programmet i din favoritwebbläsare.

Demo

Följande är en demonstration av hur man skapar eller redigerar Word-dokument i ASP.NET Word Editor.

Skapa ett Word-dokument i ASP.NET

Redigera ett Word-dokument i ASP.NET

Ladda ner källkod

Du kan ladda ner källkoden för MS Word Editor från här.

Slutsats

I den här artikeln har du lärt dig hur du skapar MS Word-dokument i ASP.NET. Steg-för-steg-guiden tillsammans med kodexempel har visat hur man skapar en enkel webbaserad MS Word-redigerare i ASP.NET MVC. Vid sidan av kan du utforska mer om Aspose.Words för .NET med hjälp av följande resurser.

Prova Aspose.Words för .NET gratis

Du kan prova Aspose.Words för .NET gratis genom att begära en tillfällig licens.

relaterade artiklar