Editor de texto ASP.NET MVC

Aspose.Words for .NET fornece um conjunto completo de recursos para manipular e converter documentos do MS Word em uma infinidade de aplicativos .NET. Particularmente, você pode criar novos ou editar os documentos do Word existentes nos aplicativos da área de trabalho ou da Web. Neste post, mostrarei como aproveitar os recursos de processamento de texto do Aspose.Words for .NET e criar um editor de MS Word baseado na Web no ASP.NET MVC.

Editor de Word ASP.NET MVC - Criar documentos do Word

Vamos criar um editor de palavras ASP.NET MVC que será baseado em um editor HTML WYSIWYG para escrever e atualizar o conteúdo dos documentos. Além disso, o Aspose.Words for .NET será usado para renderizar o conteúdo do documento do Word em HTML para editar e gerar documentos do Word a partir do conteúdo atualizado.

Etapas para criar o MS Word Editor no ASP.NET MVC

Para a demonstração, usei o editor Suneditor WYSIWYG baseado em JavaScript neste aplicativo. Você pode usar o mesmo ou selecionar qualquer outro editor de HTML que atenda às suas necessidades. A seguir estão as etapas para criar o ASP.NET Word Editor.

  • Primeiro, crie um novo aplicativo Web ASP.NET Core no Visual Studio.
  • Selecione o modelo de aplicativo da Web (Model-View-Controller).
  • Baixe os arquivos do editor WYSIWYG e mantenha-os no diretório wwwroot.
  • Abra o Gerenciador de Pacotes NuGet e instale o pacote Aspose.Words for .NET.
  • Adicione o script a seguir na visualização 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>
  • Adicione os seguintes métodos no controlador HomeController.cs.
[HttpPost]
public FileResult Index(string editor)
{
	try
	{
		// Crie um nome de arquivo exclusivo
		string fileName = Guid.NewGuid() + ".docx";
		// Converter texto HTML em matriz de bytes
		byte[] byteArray = Encoding.UTF8.GetBytes(editor.Contains("<html>") ? editor : "<html>" + editor + "</html>");
		// Gerar documento do Word a partir do HTML
		MemoryStream stream = new MemoryStream(byteArray);
		Document Document = new Document(stream);
		// Criar fluxo de memória para o arquivo do Word
		var outputStream = new MemoryStream();
		Document.Save(outputStream, SaveFormat.Docx);
		outputStream.Position = 0;
		// Retornar arquivo do Word gerado
		return File(outputStream, System.Net.Mime.MediaTypeNames.Application.Rtf, fileName);
	}
	catch (Exception exp)
	{
		return null;
	}
}
[HttpPost]
public ViewResult UploadFile(IFormFile file)
{
	// Definir caminho do arquivo
	var path = Path.Combine("wwwroot/uploads", file.FileName);
	using (var stream = new FileStream(path, FileMode.Create))
	{
		file.CopyTo(stream);
	}
	// Carregar documento do Word
	Document doc = new Document(path);
	var outStream = new MemoryStream();
	// Definir opções de HTML
	HtmlSaveOptions opt = new HtmlSaveOptions();
	opt.ExportImagesAsBase64 = true;
	opt.ExportFontsAsBase64 = true; 
	// Converter documento do Word para HTML
	doc.Save(outStream, opt);
	// Ler texto do stream
	outStream.Position = 0;
	using(StreamReader reader = new StreamReader(outStream))
	{
		ViewBag.HtmlContent = reader.ReadToEnd();
	}
	return View("Index");
}
  • Por fim, crie e execute o aplicativo em seu navegador favorito.

Demonstração

A seguir está a demonstração de como criar ou editar documentos do Word no ASP.NET Word Editor.

Criar um documento do Word no ASP.NET

Editar um documento do Word no ASP.NET

Baixar código fonte

Você pode baixar o código fonte do MS Word Editor de aqui.

Conclusão

Neste artigo, você aprendeu como criar documentos do MS Word no ASP.NET. O guia passo a passo, juntamente com exemplos de código, mostrou como criar um editor MS Word simples baseado na Web no ASP.NET MVC. Além disso, você pode explorar mais sobre o Aspose.Words for .NET usando os seguintes recursos.

Experimente o Aspose.Words for .NET gratuitamente

Você pode experimentar o Aspose.Words for .NET gratuitamente solicitando uma licença temporária.

Artigos relacionados