信息圖標
跳過到頁腳內容
  1. IronWord
  2. IronWord 博客
  3. 使用 IronWord
  4. ASP .NET Core 匯入和匯出 Word 文件
使用 IRONWORD

ASP .NET Core 導入和導出 Word 文件

Jordi Bardia
Jordi Bardia
更新:

本指南探討如何匯入現有的 Word 文件、顯示其內容以及使用IronWord庫從頭開始建立文件。 完成本教學後，您將建立一個能夠執行以下操作的ASP.NET Core Web 應用程式：

  1. 上傳和閱讀 Word 文件
  2. 將這些文件的內容顯示在文字方塊中
  3. 匯出 Docx 文件

對於需要將 Word 文件處理整合到其 Web 應用程式中的開發人員來說，無論是文件管理系統、報表產生器，或是任何其他涉及 Microsoft Word 文件的場景，本專案都是完美的。

先決條件

要學習本教程，您應該具備以下條件：

  • 具備 C# 和ASP.NET Core的基礎知識
  • 已安裝 Visual Studio 2019 或更高版本（或者，您可以使用帶有 C# 擴充功能的 Visual Studio Code）
  • .NET Core SDK 3.1 或更高版本

即使您不熟悉這些技術也不用擔心—我們會引導您完成整個過程的每一步！

IronWord是什麼？

IronWord是一個.NET程式庫，允許開發人員以程式設計方式讀取、操作和建立 Microsoft Word 文件。 它提供了一個高級 API，簡化了 Word 文件的操作，使其成為我們專案的絕佳選擇。

IronWord的一些主要功能包括：

  • 能夠讀寫各種 Word 文件格式（DOCX、DOC 等）
  • 修改文件內容和結構
  • 設定文字和段落格式
  • 處理表格、圖像和其他文件元素
  • 文件郵件合併流程 輕鬆將 Word 文件轉換為 PDF 文檔，讓您可以輕鬆地將最終的 Word 文件轉換為易於共享的 PDF 文件。

現在我們已經對要建立的內容和要使用的工具有了大致了解，讓我們開始設定專案吧！

2. 項目設定

在本節中，我們將建立一個新的ASP.NET Core項目，並安裝使用IronWord所需的套件。

2.1 建立一個新的ASP.NET Core項目

  1. 開啟 Visual Studio 2019 或更高版本。
  2. 點選"建立新項目"。
  3. 搜尋"ASP.NET Core Web 應用程式"並選擇它。
  4. 點選"下一步"。
  5. 將你的專案命名為"WordDocumentProcessor"（或你喜歡的任何名稱）。
  6. 選擇.NET Framework和專案位置，然後按一下"建立"。

2.2 安裝IronWord NuGet套件

現在我們的專案已經設定好了，讓我們加入IronWord庫：

  1. 在解決方案資源管理器中以滑鼠右鍵按一下您的專案。
  2. 選擇"管理NuGet程式包"。
  3. 在"瀏覽"標籤中，搜尋"IronWord"。
  4. 尋找官方的IronWord軟體包。
  5. 點擊"安裝"將其新增至您的專案。

2.3 更新現有控制器與視圖

讓我們更新現有架構，使其包含文件處理功能：

  1. 我們將使用 Controllers 資料夾中現有的HomeController.cs檔案來實作文件處理邏輯。
  2. 我們將更新 Views/Home 資料夾中現有的Index.cshtml視圖，使其包含文件上傳和顯示功能。

現在我們的專案已經設定完畢， IronWord軟體套件也已安裝完畢，我們可以開始實現文件匯入和匯出功能了。 我們將向 HomeController 新增方法，並修改 Index 視圖以處理這些功能。 下一節，我們將重點介紹如何匯入 Word 文件並顯示其內容，利用我們現有的控制器和視圖結構。

3. 導入 Word 文件

在本節中，我們將探討如何在ASP.NET MVC 應用程式中實現導入和處理 Word 文件的功能。 我們將介紹使用者介面設計和後端控制器邏輯。

3.1 使用者介面設計

導入 Word 文件的使用者介面設計直覺且美觀。 讓我們來分解一下使用者介面的關鍵組成部分：

3.1.1 上傳區域

上傳區域是介面的中心，使用者可以在這裡選擇並上傳 Word 文件。 它的結構如下：

<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

這段程式碼創建了一個視覺上吸引人的上傳區域，其中包含文件圖示、隱藏的文件輸入框和用作文件選擇按鈕的樣式標籤。 它還包含有關可接受的文件類型的信息以及用於啟動上傳和處理的按鈕。

3.1.2 內容顯示區域

文件處理完畢後，其內容將顯示在指定區域：

<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

本部分提供了一個可捲動區域，用於顯示已處理文件的內容。

3.2 控制器實現

HomeController 負責處理匯入和處理 Word 文件的伺服器端邏輯。 讓我們來探討一下關鍵方法：

3.2.1 UploadAndProcess 方法

此方法負責處理文件上傳和處理：

[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

此方法執行以下任務：

  1. 驗證上傳的文件，確保其文件格式正確(DOC 或 DOCX)。
  2. 使用IronWord庫處理文件。 3.以 JSON 格式傳回已格式化的內容。

3.2.2 FormatContentAsHtml 方法

此私有方法將擷取的內容格式化為 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

這種方法確保文件內容以 HTML 格式正確格式化，每一行都用段落標籤包裹，並且保留空白行。

3.3 客戶端JavaScript

為了處理檔案上傳並顯示處理後的內容，我們使用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

這段JavaScript程式碼處理檔案上傳過程，將檔案傳送到伺服器進行處理，並使用處理後的內容或錯誤訊息更新 UI。

3.4 使用者介面樣式

該應用程式使用自訂 CSS 創建了一個美觀且用戶友好的介面。

<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>

這段 CSS 程式碼採用淺色調方案，營造出簡潔現代的外觀。 上傳區域採用白色背景，並帶有微妙的陰影效果，而內容區域則採用可捲動設計，背景為淺灰色。 使用 border-radius 和 box-shadow 屬性可以為介面元素增加深度和視覺趣味性。

4. 匯出 Word 文件

為了不斷改進我們的 Word 文件處理器，讓我們加入匯出文件的功能。 此功能將允許使用者透過我們的應用程式產生新的 Word 文件。

4.1 更新使用者介面

首先，我們將在導覽列中新增"匯出"選項。 打開 Views/Shared 資料夾中的_Layout.cshtml文件，並找到以下內容：

    元素。 讓我們為匯出功能新增一個新的清單項目：

    <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

    我們使用 Font Awesome 作為圖標，所以請確保我們的程式碼中包含 CSS 連結。部分。 這段程式碼會在導覽列中新增一個"匯出"連結。 它使用 Font Awesome 作為圖標，點擊時調用exportDocument()函數。 href="#"並回傳 false 會阻止連結的預設行為。

4.2 實作客戶端導出邏輯

現在，讓我們加入處理匯出過程的JavaScript函數。 在我們的_Layout.cshtml檔案底部，就在結束語句之前在標籤中，我們將新增以下腳本：

<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

此JavaScript函數會向伺服器發送 AJAX POST 請求以建立 Word 文件。 成功後，程式會提示使用者輸入檔名，然後建立一個臨時連結供使用者下載檔案。該連結會自動點擊，之後從 DOM 移除。 如果在任何階段出現錯誤，都會向使用者顯示警報。

4.3 新增伺服器端導出功能

現在，讓我們來實作伺服器端邏輯。 打開 Controllers 資料夾中的 HomeController.cs 檔案。 我們將新增兩種方法來處理匯出過程。

首先，我們來新增建立 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

此方法使用IronWord庫建立一個新的 Word 文檔，添加一些測試文本，並將其儲存到具有唯一名稱的臨時文件中。 它會傳回一個 JSON 對象，其中包含成功狀態和臨時檔案的路徑。如果發生錯誤，它會記錄異常並傳回失敗訊息。

接下來，我們新增處理文件下載的方法：

[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

此方法會檢索 ExportWordDocument 建立的暫存文件，將其內容讀取到位元組數組中，然後刪除該暫存文件。它使用提供的使用者檔案名，如果未提供檔案名，則使用預設檔案名稱。 然後，該方法將文件內容作為可下載的 Word 文件傳回。 如果找不到檔案或發生錯誤，則會傳回對應的 HTTP 回應。

4.4 增強應用程式的視覺設計

為了提升 Word 文件處理器的整體外觀和體驗，我們直接在 _Layout.cshtml 檔案中加入了自訂 CSS。讓我們來看看我們實現的樣式：

<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>

此 CSS 程式碼區塊定義了我們應用程式的配色方案和佈局。 我們使用 CSS 變數(自訂屬性)來創建貫穿整個應用程式的一致配色方案。這些樣式針對包括主體、導覽列和頁腳在內的各種元素，從而確保設計的一致性。 我們設計了一個外觀簡潔現代的導覽欄，加入了懸停效果和圖示整合。

雖然我們的應用程式目前主要支援 Word 文檔，但我們可以使用IronPDF來添加對 PDF 文件的支持，並擴展其功能以涵蓋更廣泛的文件類型。該系統還可以進行擴展，允許使用者在現有 Word 格式選項之外，將文件匯出為 PDF 文件。

5. 運行應用程式

我們先來執行 WordDocumentProcessor 應用程式。 如圖所示，該應用程式已在瀏覽器中成功載入。 介面簡潔友好，頂部導覽列顯示"首頁"和"匯出"選項。 主要內容區域顯示標題"Word 文件處理器"和簡短描述："輕鬆上傳和處理您的 Word 文件。"

ASP.NET .NET Core匯入與匯出 Word 檔案：圖 3

現在，我們來嘗試導入一個文件。 從圖中我們可以看到，我們選擇了一個名為"Honey research synopsis.docx"的檔案。 檔案名稱將顯示在上傳區域，取代"選擇檔案"按鈕。 我們現在可以上傳並處理這份文件了。

ASP.NET .NET Core匯入與匯出 Word 檔案：圖 4

點擊"上傳並處理"後，應用程式將處理文件並顯示其內容。 "文檔內容"部分現在顯示已上傳文件的開頭部分。 我們可以看到標題"城市地區養蜂技術和蜂蜜生產品質"，後面跟著摘要。 這證明我們的應用程式已成功讀取並顯示了 Word 文件的內容。

ASP.NET .NET Core匯入與匯出 Word 檔案：圖 5

最後，我們來測試一下匯出功能。 如圖所示，點擊導覽列中的"匯出"按鈕時會出現一個提示。 提示要求我們"輸入文件名稱(不含副檔名)"。 預設名稱"ExportedDocument"已預先填寫，但我們可以根據需要更改此名稱。 此提示允許我們在下載匯出文件之前自訂其名稱。

ASP.NET .NET Core匯入與匯出 Word 檔案：圖 6

點擊"確定"後，應用程式將產生一個指定名稱的新 Word 文檔，並開始下載過程。 此匯出文件包含我們已處理的內容或我們在應用程式中所做的任何修改。

ASP.NET .NET Core匯入與匯出 Word 檔案：圖 7

在此過程中，我們可以看到該應用程式運作正常。 我們可以使用此應用程式輕鬆匯入 Word 文件、建立文件和匯出文件。 使用者介面直覺且反應迅速。

結論

總而言之，我們的 WordDocumentProcessor 應用程式成功地展示了將 Word 文件處理整合到ASP.NET Core Web 應用程式中的強大功能和靈活性。 透過利用IronWord庫，我們創建了一個強大的解決方案，可以輕鬆地匯入、顯示和匯出 Word 文件。 該應用程式為更複雜的文件管理系統或報表產生器奠定了堅實的基礎。 對於有興趣探索 IronWords 功能的開發者，此程式庫提供免費試用。 試用期結束後，授權價格從 $799 起，對於需要在 Web 應用程式中使用高級 Word 文件處理功能的企業來說，這是一個經濟高效的解決方案。

常見問題解答

我如何在 ASP.NET Core 應用中匯入 Word 文件？

您可以在 ASP.NET Core 應用中使用 IronWord 匯入 Word 文件。它允許您在用戶界面中提供上傳區，然後使用 IronWord 庫來處理文件，從而在應用程序中提取並顯示其內容。

在 ASP.NET Core 中匯出 Word 文件的步驟是什麼？

要在 ASP.NET Core 中匯出 Word 文件，使用 IronWord 創建一個新文件，並為用戶提供下載功能。您可以指定文件名，並使用 IronWord 的方法將內容寫入 Word 文件。

我可以在 ASP.NET Core 應用程序中將 Word 文件轉換為 PDF 嗎？

可以，您可以在 ASP.NET Core 應用程序中使用 IronWord 將 Word 文件轉換為 PDF。IronWord 提供了將 Word 文件輕鬆轉換為 PDF 格式的方法，便於共享和訪問。

應用程序支持哪些文件格式來匯入 Word 文件？

應用程序支持使用 IronWord 庫匯入 .DOC 和 .DOCX 文件格式，允許您在 ASP.NET Core 應用程序中處理和顯示這些文件。

JavaScript 如何用於增強文件處理應用程序？

JavaScript 用於處理文件上傳、向服務器發送 AJAX 請求以使用 IronWord 處理文件並更新用戶界面以顯示處理後的內容或錯誤消息，確保流暢的用戶體驗。

開發 ASP.NET Core Word 處理應用程序有哪些必要條件？

要開發 ASP.NET Core 的 Word 處理應用程序，您需要具備 C# 和 ASP.NET Core 的基本知識，以及安裝 Visual Studio 2019 或更高版本，或帶有 C# 擴展的 Visual Studio Code，和 .NET Core SDK 3.1 或更高版本。

如何設計用戶界面以提高文件處理的效果？

用戶界面可以設計上一個用於選擇 Word 文件的上傳區和顯示處理後內容的顯示區。自定義 CSS 可以用於美化設計，以提供吸引人的、易於使用的體驗。

在 Web 應用中整合 Word 處理的潛在用途有哪些？

潛在用途包括文檔管理系統和報告生成器，通過使用 IronWord 整合 Word 處理功能可以在 Web 應用中精簡文檔處理、編輯和轉換過程。

Jordi Bardia
Jordi Bardia
  立即與工程團隊聊天
軟體工程師
Jordi 在 Python、C# 和 C++ 上最得心應手，當他不在 Iron Software 展現技術時，便在做遊戲編程。在分担產品测测试，產品開發和研究的责任時，Jordi 為持续的產品改進增值。他说这种多样化的经验使他受到挑战并保持参与, 而这也是他与 Iron Software 中工作一大乐趣。Jordi 在佛罗里达州迈阿密长大，曾在佛罗里达大学学习计算机科学和统计学。

相關文章

30 天試用→完整產品。無限制。無需信用卡。 開始免費試用

Iron Support Team

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