Editor de palabras ASP.NET MVC

Aspose.Words for .NET proporciona un conjunto completo de funciones para manipular y convertir documentos de MS Word dentro de una multitud de aplicaciones .NET. En particular, puede crear documentos de Word nuevos o editar los existentes dentro de las aplicaciones web o de escritorio. En esta publicación, le mostraré cómo aprovechar las capacidades de procesamiento de textos de Aspose.Words for .NET y crear un editor de MS Word basado en la web en ASP.NET MVC.

ASP.NET MVC Word Editor - Crear documentos de Word

Vamos a crear un editor de Word ASP.NET MVC que se basará en un editor HTML WYSIWYG para escribir y actualizar el contenido de los documentos. Además, se utilizará Aspose.Words for .NET para convertir el contenido del documento de Word en HTML para editar y generar documentos de Word a partir del contenido actualizado.

Pasos para crear el editor de MS Word en ASP.NET MVC

Para la demostración, he utilizado Suneditor editor WYSIWYG basado en JavaScript en esta aplicación. Puede usar el mismo o seleccionar cualquier otro editor HTML que se adapte a sus necesidades. Los siguientes son los pasos para crear el Editor de Word ASP.NET.

  • Primero, cree una nueva aplicación web ASP.NET Core en Visual Studio.
  • Seleccione la plantilla Aplicación web (Modelo-Vista-Controlador).
  • Descargue los archivos del editor WYSIWYG y guárdelos en el directorio wwwroot.
  • Abra NuGet Package Manager e instale el paquete Aspose.Words for .NET.
  • Agregue el siguiente script en la vista 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>
  • Agregue los siguientes métodos en el controlador HomeController.cs.
[HttpPost]
public FileResult Index(string editor)
{
	try
	{
		// Crear un nombre de archivo único
		string fileName = Guid.NewGuid() + ".docx";
		// Convertir texto HTML en matriz de bytes
		byte[] byteArray = Encoding.UTF8.GetBytes(editor.Contains("<html>") ? editor : "<html>" + editor + "</html>");
		// Generar documento de Word desde el HTML
		MemoryStream stream = new MemoryStream(byteArray);
		Document Document = new Document(stream);
		// Crear flujo de memoria para el archivo de Word
		var outputStream = new MemoryStream();
		Document.Save(outputStream, SaveFormat.Docx);
		outputStream.Position = 0;
		// Devolver el archivo de Word generado
		return File(outputStream, System.Net.Mime.MediaTypeNames.Application.Rtf, fileName);
	}
	catch (Exception exp)
	{
		return null;
	}
}
[HttpPost]
public ViewResult UploadFile(IFormFile file)
{
	// Establecer ruta de archivo
	var path = Path.Combine("wwwroot/uploads", file.FileName);
	using (var stream = new FileStream(path, FileMode.Create))
	{
		file.CopyTo(stream);
	}
	// Cargar documento de Word
	Document doc = new Document(path);
	var outStream = new MemoryStream();
	// Establecer opciones de HTML
	HtmlSaveOptions opt = new HtmlSaveOptions();
	opt.ExportImagesAsBase64 = true;
	opt.ExportFontsAsBase64 = true; 
	// Convertir documento de Word a HTML
	doc.Save(outStream, opt);
	// Leer texto de la transmisión
	outStream.Position = 0;
	using(StreamReader reader = new StreamReader(outStream))
	{
		ViewBag.HtmlContent = reader.ReadToEnd();
	}
	return View("Index");
}
  • Finalmente, crea y ejecuta la aplicación en tu navegador favorito.

Manifestación

La siguiente es la demostración de cómo crear o editar documentos de Word en ASP.NET Word Editor.

Crear un documento de Word en ASP.NET

Editar un documento de Word en ASP.NET

Descargar código fuente

Puede descargar el código fuente de MS Word Editor desde aquí.

Conclusión

En este artículo, ha aprendido a crear documentos de MS Word en ASP.NET. La guía paso a paso junto con ejemplos de código ha mostrado cómo crear un editor de MS Word simple basado en la web en ASP.NET MVC. Además, puede explorar más sobre Aspose.Words for .NET utilizando los siguientes recursos.

Pruebe Aspose.Words for .NET gratis

Puede probar Aspose.Words for .NET de forma gratuita solicitando una licencia temporal.

Artículos relacionados