Ícone de mensagem
Ir para o conteúdo do rodapé
  1. IronWord
  2. Blog IronWord
  3. Usando IronWord
  4. Importar e exportar arquivos do Word com ASP.NET Core
USANDO IRONWORD

Importar e exportar um arquivo do Word no ASP.NET Core

Curtis Chau
Curtis Chau
Atualizado:

Este guia explora como importar documentos do Word existentes, exibir o conteúdo deles e criar documentos do zero usando a biblioteca IronWord. Ao final deste tutorial, você terá criado um aplicativo web ASP.NET Core que pode:

  1. Fazer upload e ler documentos do Word
  2. Exibir o conteúdo desses documentos em uma caixa de texto
  3. Exportar o arquivo Docx

Este projeto é perfeito para desenvolvedores que precisam integrar o processamento de documentos Word em seus aplicativos web, seja para sistemas de gerenciamento de documentos, geradores de relatórios ou qualquer outro cenário envolvendo arquivos do Microsoft Word.

Pré-requisitos

Para acompanhar este tutorial, você deve ter:

  • Conhecimento básico de C# e ASP.NET Core
  • Visual Studio 2019 ou posterior instalado (alternativamente, você pode usar o Visual Studio Code com a extensão C#)
  • SDK do .NET Core 3.1 ou posterior

Não se preocupe se você não for um especialista nessas tecnologias – nós o guiaremos em cada etapa do processo!

O que é IronWord?

IronWord é uma biblioteca .NET que permite aos desenvolvedores ler, manipular e criar documentos do Microsoft Word programaticamente. Ela fornece uma API de alto nível que simplifica o trabalho com arquivos Word, tornando-se uma excelente escolha para o nosso projeto.

Algumas características-chave do IronWord incluem:

  • Leitura e escrita de vários formatos do Word (DOCX, DOC, etc.)
  • Manipulação do conteúdo e estrutura do documento
  • Formatação de texto e parágrafos
  • Trabalho com tabelas, imagens e outros elementos do documento
  • Processo de Mail Merge para documentos
  • Conversão de um documento Word em um documento PDF com facilidade, permitindo que você transforme seus documentos Word finais em arquivos PDF fáceis de compartilhar

Agora que temos uma visão geral do que estamos construindo e das ferramentas que usaremos, vamos mergulhar na configuração do nosso projeto!

2. Configurando o projeto

Nesta seção, criaremos um novo projeto ASP.NET Core e instalaremos os pacotes necessários para trabalhar com o IronWord.

2.1 Criando um novo projeto ASP.NET Core

  1. Abra o Visual Studio 2019 ou posterior.
  2. Clique em "Criar um novo projeto".
  3. Procure "Aplicativo Web ASP.NET Core" e selecione-o.
  4. Clique em "Próximo".
  5. Dê um nome ao seu projeto "WordDocumentProcessor" (ou qualquer nome que preferir).
  6. Selecione o .NET Framework e um local para o seu projeto e clique em "Criar".

2.2 Instalando o Pacote NuGet do IronWord

Agora que temos nosso projeto configurado, vamos adicionar a biblioteca IronWord:

  1. Clique com o botão direito no seu projeto no Solution Explorer.
  2. Selecione "Gerenciar Pacotes NuGet".
  3. Na guia "Procurar", procure "IronWord".
  4. Procure o pacote oficial do IronWord.
  5. Clique em "Instalar" para adicioná-lo ao seu projeto.

2.3 Atualizando o Controlador e a Visualização Existentes

Vamos atualizar nossa estrutura existente para incorporar a funcionalidade de processamento de documentos:

  1. Usaremos o HomeController.cs existente na pasta Controllers para nossa lógica de processamento de documentos.
  2. Vamos atualizar a visualização Index.cshtml existente na pasta Views/Home para incluir a funcionalidade de upload e exibição de documentos.

Agora que configuramos nosso projeto e instalamos o pacote IronWord, estamos prontos para começar a implementar a funcionalidade de importação e exportação de documentos. Adicionaremos novos métodos ao nosso HomeController e modificaremos a visualização Index para lidar com essas funcionalidades. Na próxima seção, focaremos na importação de documentos Word e na exibição de seu conteúdo, utilizando nossa estrutura de controlador e visualização existentes.

3. Importação de Documentos Word

Nesta seção, iremos explorar como implementar um recurso para importar e processar documentos Word em uma aplicação ASP.NET MVC. Cobriremos tanto o design da interface do usuário quanto a lógica do controlador de back-end.

3.1 Design da Interface do Usuário

A interface do usuário para importação de documentos Word é projetada para ser intuitiva e visualmente atraente. Vamos dividir os principais componentes da UI:

3.1.1 Área de Upload

A área de upload é o ponto focal da interface, convidando os usuários a selecionar e fazer upload de seus documentos Word. Veja como ela está estruturada:

<div class="upload-area">
    <svg class="file-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
        <polyline points="14 2 14 8 20 8"></polyline>
        <line x1="16" y1="13" x2="8" y2="13"></line>
        <line x1="16" y1="17" x2="8" y2="17"></line>
        <polyline points="10 9 9 9 8 9"></polyline>
    </svg>
    <p>Choose a Word document</p>
    <label for="fileInput" class="choose-file">Choose File</label>
    <p class="file-info">.DOC or .DOCX (MAX. 10MB)</p>
    <button id="uploadBtn" class="upload-button">Upload and Process</button>
</div>
<div class="upload-area">
    <svg class="file-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
        <polyline points="14 2 14 8 20 8"></polyline>
        <line x1="16" y1="13" x2="8" y2="13"></line>
        <line x1="16" y1="17" x2="8" y2="17"></line>
        <polyline points="10 9 9 9 8 9"></polyline>
    </svg>
    <p>Choose a Word document</p>
    <label for="fileInput" class="choose-file">Choose File</label>
    <p class="file-info">.DOC or .DOCX (MAX. 10MB)</p>
    <button id="uploadBtn" class="upload-button">Upload and Process</button>
</div>
HTML

Este código cria uma área de upload visualmente atraente com um ícone de arquivo, uma entrada de arquivo oculta e um rótulo estilizado atuando como o botão de seleção de arquivo. Também inclui informações sobre os tipos de arquivo aceitos e um botão para iniciar o upload e processamento.

3.1.2 Área de Exibição de Conteúdo

Após processar o documento, o conteúdo é exibido em uma área dedicada:

<div class="content-wrapper">
    <h2>Document Content:</h2>
    <div id="documentContent" class="content-area">
        No content to display.
    </div>
</div>
<div class="content-wrapper">
    <h2>Document Content:</h2>
    <div id="documentContent" class="content-area">
        No content to display.
    </div>
</div>
HTML

Esta seção fornece uma área rolável para exibir o conteúdo do documento processado.

3.2 Implementação do Controlador

O HomeController lida com a lógica do lado do servidor para importar e processar documentos Word. Vamos examinar os principais métodos:

3.2.1 Método UploadAndProcess

Este método é responsável por lidar com o upload e processamento de arquivos:

[HttpPost]
public IActionResult UploadAndProcess(IFormFile file)
{
    if (file == null || file.Length == 0)
    {
        return Json(new { success = false, message = "No file uploaded." });
    }
    var fileExtension = Path.GetExtension(file.FileName).ToLowerInvariant();
    if (fileExtension != ".doc" && fileExtension != ".docx")
    {
        return Json(new { success = false, message = "Invalid file type. Please upload a .doc or .docx file." });
    }
    try
    {
        var tempFilePath = Path.GetTempFileName();
        using (var stream = new FileStream(tempFilePath, FileMode.Create))
        {
            file.CopyTo(stream);
        }
        StringBuilder contentBuilder = new StringBuilder();
        WordDocument doc = new WordDocument(tempFilePath);
        foreach (Paragraph paragraph in doc.Paragraphs)
        {
            foreach (Text textRun in paragraph.Texts)
            {
                contentBuilder.AppendLine(textRun.Text);
            }
            contentBuilder.AppendLine(); // Add an extra line between paragraphs
        }
        System.IO.File.Delete(tempFilePath); // Clean up the temporary file
        return Json(new { success = true, content = FormatContentAsHtml(contentBuilder.ToString()) });
    }
    catch (Exception ex)
    {
        _logger.LogError(ex, "Error processing document");
        return Json(new { success = false, message = "An error occurred while processing the document." });
    }
}
[HttpPost]
public IActionResult UploadAndProcess(IFormFile file)
{
    if (file == null || file.Length == 0)
    {
        return Json(new { success = false, message = "No file uploaded." });
    }
    var fileExtension = Path.GetExtension(file.FileName).ToLowerInvariant();
    if (fileExtension != ".doc" && fileExtension != ".docx")
    {
        return Json(new { success = false, message = "Invalid file type. Please upload a .doc or .docx file." });
    }
    try
    {
        var tempFilePath = Path.GetTempFileName();
        using (var stream = new FileStream(tempFilePath, FileMode.Create))
        {
            file.CopyTo(stream);
        }
        StringBuilder contentBuilder = new StringBuilder();
        WordDocument doc = new WordDocument(tempFilePath);
        foreach (Paragraph paragraph in doc.Paragraphs)
        {
            foreach (Text textRun in paragraph.Texts)
            {
                contentBuilder.AppendLine(textRun.Text);
            }
            contentBuilder.AppendLine(); // Add an extra line between paragraphs
        }
        System.IO.File.Delete(tempFilePath); // Clean up the temporary file
        return Json(new { success = true, content = FormatContentAsHtml(contentBuilder.ToString()) });
    }
    catch (Exception ex)
    {
        _logger.LogError(ex, "Error processing document");
        return Json(new { success = false, message = "An error occurred while processing the document." });
    }
}
$vbLabelText   $csharpLabel

Este método realiza as seguintes tarefas:

  1. Valida o arquivo enviado, garantindo que esteja no formato de arquivo correto (DOC ou DOCX).
  2. Processa o documento usando a biblioteca IronWord.
  3. Retorna o conteúdo formatado como JSON.

3.2.2 Método FormatContentAsHtml

Este método privado formata o conteúdo extraído em HTML:

private string FormatContentAsHtml(string content)
{
    var lines = content.Split(new[] { Environment.NewLine }, StringSplitOptions.None);
    var htmlBuilder = new StringBuilder();
    htmlBuilder.Append("<div class='document-content'>");
    foreach (var line in lines)
    {
        if (string.IsNullOrWhiteSpace(line))
        {
            htmlBuilder.Append("<p> </p>");
        }
        else
        {
            htmlBuilder.Append($"<p>{HttpUtility.HtmlEncode(line)}</p>");
        }
    }
    htmlBuilder.Append("</div>");
    return htmlBuilder.ToString();
}
private string FormatContentAsHtml(string content)
{
    var lines = content.Split(new[] { Environment.NewLine }, StringSplitOptions.None);
    var htmlBuilder = new StringBuilder();
    htmlBuilder.Append("<div class='document-content'>");
    foreach (var line in lines)
    {
        if (string.IsNullOrWhiteSpace(line))
        {
            htmlBuilder.Append("<p> </p>");
        }
        else
        {
            htmlBuilder.Append($"<p>{HttpUtility.HtmlEncode(line)}</p>");
        }
    }
    htmlBuilder.Append("</div>");
    return htmlBuilder.ToString();
}
$vbLabelText   $csharpLabel

Este método garante que o conteúdo do documento seja devidamente formatado como HTML, com cada linha envolta em tags de parágrafo e linhas em branco preservadas.

3.3 JavaScript do Lado do Cliente

Para lidar com o upload de arquivos e exibir o conteúdo processado, usamos JavaScript:

uploadBtn.addEventListener('click', () => {
    const file = fileInput.files[0];
    if (!file) {
        alert('Please select a file first.');
        return;
    }
    const formData = new FormData();
    formData.append('file', file);
    uploadBtn.disabled = true;
    uploadBtn.textContent = 'Processing...';
    documentContent.innerHTML = 'Processing document...';
    fetch('/Home/UploadAndProcess', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            documentContent.innerHTML = data.content;
        } else {
            documentContent.innerHTML = `<p>Error: ${data.message}</p>`;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        documentContent.innerHTML = '<p>An error occurred while processing the document.</p>';
    })
    .finally(() => {
        uploadBtn.disabled = false;
        uploadBtn.textContent = 'Upload and Process';
    });
});
uploadBtn.addEventListener('click', () => {
    const file = fileInput.files[0];
    if (!file) {
        alert('Please select a file first.');
        return;
    }
    const formData = new FormData();
    formData.append('file', file);
    uploadBtn.disabled = true;
    uploadBtn.textContent = 'Processing...';
    documentContent.innerHTML = 'Processing document...';
    fetch('/Home/UploadAndProcess', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            documentContent.innerHTML = data.content;
        } else {
            documentContent.innerHTML = `<p>Error: ${data.message}</p>`;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        documentContent.innerHTML = '<p>An error occurred while processing the document.</p>';
    })
    .finally(() => {
        uploadBtn.disabled = false;
        uploadBtn.textContent = 'Upload and Process';
    });
});
JAVASCRIPT

Este código JavaScript lida com o processo de upload de arquivos, envia o arquivo para o servidor para processamento e atualiza a UI com o conteúdo processado ou mensagens de erro.

3.4 Estilizando a Interface do Usuário

A aplicação usa CSS personalizado para criar uma interface atraente e fácil de usar.

<style>
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #f7f7f7;
        color: #333;
    }
    .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 2rem;
        padding-top: 0.5rem;
    }
    h1 {
        font-weight: 300;
        color: #2c3e50;
        text-align: center;
        margin-bottom: 1rem;
    }
    .lead {
        text-align: center;
        color: #7f8c8d;
        margin-bottom: 2rem;
    }
    .upload-area {
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        padding: 2rem;
        text-align: center;
        margin-bottom: 2rem;
        transition: all 0.3s ease;
    }
    .upload-area:hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }
    .file-icon {
        width: 64px;
        height: 64px;
        margin-bottom: 1rem;
        color: #3498db;
    }
    .choose-file {
        background-color: #ecf0f1;
        color: #2c3e50;
        border: none;
        padding: 0.5rem 1rem;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    .choose-file:hover {
        background-color: #d5dbdb;
    }
    .file-info {
        font-size: 0.9em;
        color: #95a5a6;
        margin-top: 0.5rem;
    }
    .upload-button {
        background-color: #3498db;
        color: white;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        margin-top: 1rem;
    }
    .upload-button:hover {
        background-color: #2980b9;
    }
    .content-wrapper {
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        padding: 1rem;
        margin-top: 2rem;
    }
    .content-area {
        max-height: 300px;
        overflow-y: auto;
        padding: 1rem;
        background-color: #f9f9f9;
        border-radius: 4px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 14px;
        line-height: 1.6;
    }
    .content-area::-webkit-scrollbar {
        width: 8px;
    }
    .content-area::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }
    .content-area::-webkit-scrollbar-thumb {
        background: #bdc3c7;
        border-radius: 4px;
    }
    .content-area::-webkit-scrollbar-thumb:hover {
        background: #95a5a6;
    }
    .document-content p {
        margin: 0 0 10px 0;
    }
</style>

Este CSS cria um visual limpo e moderno com um esquema de cores claro. A área de upload apresenta um fundo branco com efeitos sutis de sombra, enquanto a área de conteúdo tem um design rolável com um fundo cinza claro. Usar propriedades de border-radius e box-shadow adiciona profundidade e interesse visual aos elementos da interface.

4. Exportação de Documentos Word

À medida que continuamos a aprimorar nosso Processador de Documentos Word, vamos adicionar a capacidade de exportar documentos. Este recurso permitirá que os usuários gerem um novo documento Word a partir de nossa aplicação.

4.1 Atualizando a Interface do Usuário

Primeiro, vamos adicionar uma opção "Exportar" à nossa barra de navegação. Abra o arquivo _Layout.cshtml na pasta Views/Shared e localize o elemento

    . Vamos adicionar um novo item de lista para nossa função de exportação:

    <li class="nav-item">
    <a class="nav-link" id="exportLink" href="#" onclick="exportDocument(); return false;"><i class="fas fa-file-export"></i> Export</a>
</li>
    <li class="nav-item">
    <a class="nav-link" id="exportLink" href="#" onclick="exportDocument(); return false;"><i class="fas fa-file-export"></i> Export</a>
</li>
    HTML

    Estamos usando o Font Awesome para o ícone, então certifique-se de que temos o link CSS na nossa seção . Este código adiciona um link "Exportar" à barra de navegação. Ele usa Font Awesome para o ícone e chama a função exportDocument() quando clicado. O href="#" e o return false evitam o comportamento padrão do link.

4.2 Implementando Lógica de Exportação do Lado do Cliente

Agora, vamos adicionar a função JavaScript que irá lidar com o processo de exportação. No final do nosso arquivo _Layout.cshtml, logo antes da tag de fechamento, adicionaremos o seguinte script:

<script>
function exportDocument() {
    $.ajax({
        url: '/Home/ExportWordDocument',
        type: 'POST',
        success: function (response) {
            if (response.success) {
                var fileName = prompt("Enter a name for the document (without extension):", "ExportedDocument");
                if (fileName === null) {
                    return;
                }
                fileName = (fileName.trim() || "ExportedDocument").replace(/\.[^/.]+$/, "") + ".docx";
                var a = document.createElement('a');
                a.style.display = 'none';
                a.href = '/Home/DownloadFile?tempFilePath=' + encodeURIComponent(response.tempFilePath) + '&userFileName=' + encodeURIComponent(fileName);
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            } else {
                alert('Failed to export document: ' + response.message);
            }
        },
        error: function () {
            alert('An error occurred while exporting the document.');
        }
    });
}
</script>
<script>
function exportDocument() {
    $.ajax({
        url: '/Home/ExportWordDocument',
        type: 'POST',
        success: function (response) {
            if (response.success) {
                var fileName = prompt("Enter a name for the document (without extension):", "ExportedDocument");
                if (fileName === null) {
                    return;
                }
                fileName = (fileName.trim() || "ExportedDocument").replace(/\.[^/.]+$/, "") + ".docx";
                var a = document.createElement('a');
                a.style.display = 'none';
                a.href = '/Home/DownloadFile?tempFilePath=' + encodeURIComponent(response.tempFilePath) + '&userFileName=' + encodeURIComponent(fileName);
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            } else {
                alert('Failed to export document: ' + response.message);
            }
        },
        error: function () {
            alert('An error occurred while exporting the document.');
        }
    });
}
</script>
HTML

Esta função JavaScript envia uma solicitação AJAX POST para o servidor para criar um documento Word. Se bem-sucedida, ela solicita ao usuário um nome de arquivo e, em seguida, cria um link temporário para baixar o arquivo. O link é clicado automaticamente e depois removido do DOM. Se houver um erro em qualquer estágio, um alerta é mostrado ao usuário.

4.3 Adicionando Funcionalidade de Exportação do Lado do Servidor

Agora, vamos implementar a lógica do lado do servidor. Abra o arquivo HomeController.cs na pasta Controllers. Vamos adicionar dois novos métodos para lidar com o processo de exportação.

Primeiro, vamos adicionar o método para criar o documento Word:

[HttpPost]
public IActionResult ExportWordDocument()
{
    try
    {
        WordDocument doc = new WordDocument();
        doc.AddText("Test Word");
        string tempFileName = $"TempDoc_{Guid.NewGuid()}.docx";
        string tempFilePath = Path.Combine(_environment.WebRootPath, "TempFiles", tempFileName);
        Directory.CreateDirectory(Path.GetDirectoryName(tempFilePath));
        doc.SaveAs(tempFilePath);
        return Json(new { success = true, tempFilePath = $"/TempFiles/{tempFileName}" });
    }
    catch (Exception ex)
    {
        _logger.LogError(ex, "Error exporting Word document");
        return Json(new { success = false, message = "An error occurred while exporting the document." });
    }
}
[HttpPost]
public IActionResult ExportWordDocument()
{
    try
    {
        WordDocument doc = new WordDocument();
        doc.AddText("Test Word");
        string tempFileName = $"TempDoc_{Guid.NewGuid()}.docx";
        string tempFilePath = Path.Combine(_environment.WebRootPath, "TempFiles", tempFileName);
        Directory.CreateDirectory(Path.GetDirectoryName(tempFilePath));
        doc.SaveAs(tempFilePath);
        return Json(new { success = true, tempFilePath = $"/TempFiles/{tempFileName}" });
    }
    catch (Exception ex)
    {
        _logger.LogError(ex, "Error exporting Word document");
        return Json(new { success = false, message = "An error occurred while exporting the document." });
    }
}
$vbLabelText   $csharpLabel

Este método cria um novo documento Word usando a biblioteca IronWord, adiciona algum texto de teste e o salva em um arquivo temporário com um nome único. Ele retorna um objeto JSON com o status de sucesso e o caminho para o arquivo temporário. Se ocorrer um erro, ele registra a exceção e retorna uma mensagem de falha.

Em seguida, vamos adicionar o método para lidar com o download do arquivo:

[HttpGet]
public IActionResult DownloadFile(string tempFilePath, string userFileName)
{
    try
    {
        string fullPath = Path.Combine(_environment.WebRootPath, tempFilePath.TrimStart('/'));
        if (!System.IO.File.Exists(fullPath))
        {
            return NotFound();
        }
        byte[] fileBytes = System.IO.File.ReadAllBytes(fullPath);
        System.IO.File.Delete(fullPath);
        string fileName = !string.IsNullOrEmpty(userFileName) ? userFileName : "ExportedDocument.docx";
        return File(fileBytes, "application/vnd.openxmlformats-officedocument.wordprocessingml.document", fileName);
    }
    catch (Exception ex)
    {
        _logger.LogError(ex, "Error downloading file");
        return BadRequest("An error occurred while downloading the file.");
    }
}
[HttpGet]
public IActionResult DownloadFile(string tempFilePath, string userFileName)
{
    try
    {
        string fullPath = Path.Combine(_environment.WebRootPath, tempFilePath.TrimStart('/'));
        if (!System.IO.File.Exists(fullPath))
        {
            return NotFound();
        }
        byte[] fileBytes = System.IO.File.ReadAllBytes(fullPath);
        System.IO.File.Delete(fullPath);
        string fileName = !string.IsNullOrEmpty(userFileName) ? userFileName : "ExportedDocument.docx";
        return File(fileBytes, "application/vnd.openxmlformats-officedocument.wordprocessingml.document", fileName);
    }
    catch (Exception ex)
    {
        _logger.LogError(ex, "Error downloading file");
        return BadRequest("An error occurred while downloading the file.");
    }
}
$vbLabelText   $csharpLabel

Este método recupera o arquivo temporário criado pelo ExportWordDocument, lê seu conteúdo em um array de bytes e, em seguida, exclui o arquivo temporário. Ele usa o nome de arquivo do usuário fornecido ou um nome padrão se nenhum for fornecido. O método então retorna o conteúdo do arquivo como um documento Word para download. Se o arquivo não for encontrado ou ocorrer um erro, respostas HTTP apropriadas são retornadas.

4.4 Aprimorando o Design Visual do Aplicativo

Para melhorar o visual geral de nosso Processador de Documentos Word, adicionamos CSS personalizado diretamente no arquivo _Layout.cshtml. Vamos examinar o estilo que implementamos:

<style>
    :root {
        --primary-color: #3498db;
        --text-color: #333;
        --bg-color: #f8f9fa;
        --nav-bg: #fff;
        --nav-text: #2c3e50;
        --nav-hover: #3498db;
    }
    body {
        font-family: 'Segoe UI', sans-serif;
        background-color: var(--bg-color);
        color: var(--text-color);
        line-height: 1.6;
    }
    .navbar { background-color: var(--nav-bg); }
    .navbar-brand {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-right: 2rem;
    }
    .navbar-nav { margin-left: auto; }
    .navbar-nav .nav-item { margin-left: 1rem; }
    .navbar-nav .nav-link {
        color: var(--nav-text);
        font-weight: 500;
        transition: all 0.3s ease;
        padding: 0.5rem 1rem;
        border-radius: 4px;
    }
    .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {
        color: var(--primary-color);
        background-color: rgba(52, 152, 219, 0.1);
    }
    .navbar-nav .nav-link i {
        margin-right: 0.5rem;
        font-size: 1.1em;
    }
    .centered-container {
        max-width: 800px;
        margin: 0 auto;
        padding: 2rem;
    }
    .footer {
        background-color: var(--nav-bg);
        border-top: 1px solid #ecf0f1;
        font-size: 0.9em;
        color: var(--nav-text);
    }
    .footer a {
        color: var(--primary-color);
        text-decoration: none;
        transition: color 0.3s ease;
    }
    .footer a:hover { color: var(--nav-hover); }
    @media (max-width: 576px) {
        .navbar-nav {
            margin-left: 0;
            margin-top: 1rem;
        }
        .navbar-nav .nav-item {
            margin-left: 0;
            margin-bottom: 0.5rem;
        }
    }
</style>

Este bloco de CSS define o esquema de cores e o layout de nosso aplicativo. Estamos usando variáveis CSS (propriedades personalizadas) para criar uma paleta de cores consistente em todo o aplicativo. Os estilos visam vários elementos, incluindo o corpo, a barra de navegação e o rodapé, garantindo um design coeso. Configuramos a barra de navegação com um visual limpo e moderno, apresentando efeitos de hover e integração de ícones.

Enquanto nossa aplicação atualmente foca em documentos Word, podemos usar IronPDF para incluir suporte para documentos PDF e expandir sua funcionalidade para cobrir uma gama mais ampla de tipos de arquivo. O sistema poderia ser estendido para permitir que os usuários exportassem seus documentos como um arquivo PDF além das opções de formato Word atuais.

5. Executando a Aplicação

Vamos começar executando nossa aplicação WordDocumentProcessor. Como podemos ver na imagem, a aplicação foi carregada com sucesso no navegador. A interface é limpa e de fácil uso, com uma barra de navegação no topo mostrando as opções "Início" e "Exportar". A área de conteúdo principal exibe o título "Processador de Documentos Word" e uma breve descrição: "Carregue e processe seus documentos Word com facilidade."

ASP .NET Core Import & Export A Word File: Figura 3

Agora, vamos tentar importar um documento. Na imagem, podemos ver que selecionamos um arquivo chamado "Honey research synopsis.docx". O nome do arquivo é exibido na área de upload, substituindo o botão "Escolher Arquivo". Agora estamos prontos para carregar e processar este documento.

ASP .NET Core Import & Export A Word File: Figura 4

Após clicar em "Carregar e Processar", a aplicação processa o documento e exibe seu conteúdo. A seção "Conteúdo do Documento" agora mostra o início do documento carregado. Podemos ver o título "Tecnologias de Apicultura e Qualidade da Produção de Mel em Áreas Urbanas" seguido de um resumo. Isso demonstra que nossa aplicação leu e exibiu com sucesso o conteúdo do documento Word.

ASP .NET Core Import & Export A Word File: Figura 5

Finalmente, vamos testar a funcionalidade de exportação. Na imagem, vemos um prompt que aparece quando clicamos no botão "Exportar" na barra de navegação. O prompt nos pede para "Insira um nome para o documento (sem extensão)". O nome padrão "ExportedDocument" está pré-preenchido, mas podemos alterar isso se desejarmos. Este prompt nos permite personalizar o nome de nosso documento exportado antes de baixá-lo.

ASP .NET Core Import & Export A Word File: Figura 6

Após clicar em "OK", a aplicação gera um novo documento Word com o nome especificado e inicia o processo de download. Este documento exportado contém o conteúdo que processamos ou quaisquer modificações que fizemos dentro da aplicação.

ASP .NET Core Import & Export A Word File: Figura 7

Ao longo deste processo, podemos ver que o aplicativo está funcionando conforme o esperado. Podemos usar este aplicativo para importar documentos Word, criar documentos e exportá-los com facilidade. A interface do usuário é intuitiva e responsiva.

Conclusão

Em conclusão, nosso aplicativo WordDocumentProcessor demonstra com sucesso o poder e a flexibilidade de integrar o processamento de documentos Word em um aplicativo web ASP.NET Core. Aproveitando a biblioteca IronWord, criamos uma solução robusta para importar, exibir e exportar documentos Word com facilidade. Este aplicativo serve como uma base sólida para sistemas de gerenciamento de documentos mais complexos ou geradores de relatórios. Para desenvolvedores interessados em explorar as capacidades do IronWord, a biblioteca oferece uma avaliação gratuita. Após o teste, o licenciamento começa em $799, tornando-se uma solução econômica para empresas que precisam de funcionalidades avançadas de processamento de documentos do Word em suas aplicações web.

Perguntas frequentes

Como posso importar documentos do Word em uma aplicação ASP.NET Core?

Você pode importar documentos do Word em uma aplicação ASP.NET Core usando o IronWord. Ele permite que você forneça uma área de upload na interface do usuário e, em seguida, use a biblioteca IronWord para processar o documento, extraindo e exibindo seu conteúdo na sua aplicação.

Quais são os passos para exportar um documento do Word no ASP.NET Core?

Para exportar um documento do Word no ASP.NET Core, use o IronWord para criar um novo documento e forneça a funcionalidade para que os usuários o baixem. Você pode especificar um nome de arquivo e usar os métodos do IronWord para gravar o conteúdo no arquivo do Word.

É possível converter documentos do Word para PDF em aplicações ASP.NET Core?

Sim, você pode converter documentos do Word para PDF usando o IronWord em aplicações ASP.NET Core. O IronWord oferece métodos para transformar facilmente documentos do Word em formato PDF, facilitando o compartilhamento e o acesso.

Quais formatos de arquivo o aplicativo suporta para importar documentos do Word?

O aplicativo suporta a importação de arquivos nos formatos .DOC e .DOCX usando a biblioteca IronWord, permitindo que você processe e exiba esses documentos em seu aplicativo ASP.NET Core.

Como o JavaScript é usado para aprimorar o aplicativo de processamento de documentos?

O JavaScript é utilizado para gerenciar o envio de arquivos, enviar solicitações AJAX ao servidor para processamento de documentos com o IronWord e atualizar a interface do usuário com o conteúdo processado ou mensagens de erro, garantindo uma experiência de usuário perfeita.

Quais são os pré-requisitos para desenvolver um aplicativo de processamento de texto em ASP.NET Core?

Para desenvolver um aplicativo de processamento de texto em ASP.NET Core, você precisa de conhecimento básico de C# e ASP.NET Core, Visual Studio 2019 ou posterior, ou Visual Studio Code com a extensão C#, e o SDK do .NET Core 3.1 ou posterior instalado.

Como a interface do usuário pode ser projetada para um melhor processamento de documentos?

A interface do usuário pode ser projetada com uma área de upload para seleção de documentos do Word e uma área de exibição de conteúdo para mostrar o conteúdo processado. CSS personalizado pode ser usado para aprimorar o design e proporcionar uma experiência atraente e amigável ao usuário.

Quais são alguns casos de uso potenciais para a integração do processamento de texto em aplicações web?

Os possíveis casos de uso incluem sistemas de gerenciamento de documentos e geradores de relatórios, onde a integração de recursos de processamento de texto usando o IronWord pode agilizar os processos de manipulação, edição e conversão de documentos dentro do aplicativo web.

Curtis Chau
Curtis Chau
  Converse agora mesmo com a equipe de engenharia.
Redator Técnico

Curtis Chau é bacharel em Ciência da Computação (Universidade Carleton) e se especializa em desenvolvimento front-end, com experiência em Node.js, TypeScript, JavaScript e React. Apaixonado por criar interfaces de usuário intuitivas e esteticamente agradáveis, Curtis gosta de trabalhar com frameworks modernos e criar manuais ...

Leia mais

Artigos relacionados

Teste grátis por 30 dias → Produto completo. Sem limites. Sem cartão. Comece seu teste gratuito

Iron Support Team

We're online 24 hours, 5 days a week.
Chat
Email
Call Me