想在網站上展示 Excel 數據時，將Excel 轉換為 HTML 是最佳選擇。Excel 非常適合組織數據，而 HTML 表格則非常適合網頁。因此，我們將在本篇文章中講解如何將 Excel 電子表格轉換為 HTML 表格，此外，我們還將討論具有內置人工智能功能的轉換器工具。

第 1 部分：如何在 Windows 和 Mac 上將 Excel 轉換為 HTML？

市面上有兩種可以信賴的流行工具，包括 UPDF PDF 編輯器和 MS Excel，這兩種工具都為 Windows 和 Mac 平臺上的用戶提供了有效的轉換功能。我們在下面更詳細地解釋了這些工具。

方式 1. 通過 UPDF 將 Excel 導出為 HTML

UPDF是將 Excel 導出為 HTML 的首選，因為它非常可靠，不僅可以轉換 PDF，還可以轉換各種其他文件類型，包括 Excel 到 HTML。

UPDF 的突出功能之一是它能夠保持原始文檔的質量和格式。它甚至能夠識別掃描文檔， 即用OCR 功能將文檔轉換為可編輯文本。用它將 Excel 轉換為 HTML 文件的步驟如下：

第1步：打開UPDF工具并創建PDF

首先，啟動 UPDF 程序，然后，在左上角找到“文件”選項卡并單擊它。然后，向下移動到“創建”選項并將光標置于打開“創建”選項。從列表中選擇“從Excel 創建 PDF”，找到電子表格并將其打開。

第 2 步：導出轉換后的電子表格并保存

導入 Excel 文件后它將轉換為 PDF 格式。然后，前往右側面板并點擊“導出 PDF”按鈕。接下來，從提供的列表中選擇“HTML”，然后根據需要繼續自定義“文檔語言”、“頁面范圍”和文本識別設置。最后，按“導出”按鈕將轉換后的 HTML 文件存儲在 Windows 或 Mac 上。

方式 2. 通過 Microsoft Excel 將 Excel 轉換為HTML

使用 Microsoft Excel 將 Excel轉換為 HTML 非常方便，只需幾個簡單的步驟，并且這個方法會保留電子表格的結構、格式和公式，其他人可以輕松查看數據并與之交互。請按照以下步驟進行簡單的 Excel 到 HTML 轉換：

第 1 步：使用 MS Excel 打開文件

首先，在 Windows 或 Mac 上瀏覽所需的電子表格，然后使用 MS Excel 打開它。接下來，點擊 Excel 界面左上角的“文件”選項卡，從給定的選項中選擇“另存為”，然后雙擊“此電腦”選項。

第 2 步：另存文件

上述步驟將打開“另存為”對話框，輸入所需的“文件名”，然后從“另存為類型”下拉列表中選擇“HTML”，然后點擊對話框中的“保存”按鈕。

第 2 部分：如何免費在線將 Excel 轉換為 HTML？

這個方法可以很好地快速且高效地在線將 Excel 導出為 HTML，將用到Convertio 和 Zamzar 兩個頂級的免費工具。

方式 1. 通過 Convertio 免費在線將 Excel 導出為 HTML

Convertio 是一個超級簡單的在線工具，可以幫助轉換不同類型的文件，可以輕松轉換文檔、圖像、視頻、音頻文件和電子書，而且不需要下載或安裝任何東西。讓我們看一下在線將 Excel 轉換為 HTML 的簡單步驟：

第 1 步： 在網絡瀏覽器中訪問 Convertio 的網站

在頂部欄中查找“轉換”選項并單擊它，會出現具有擴展功能的菜單，從列表中選擇“文檔轉換器”。

第 2 步： 導入 Excel 電子表格

有兩種選擇：使用文件資源管理器從電腦上傳或直接從 Google Drive 或 Dropbox 導入。導入 Excel 文件后，找到“收件人”選項旁邊的下拉菜單，單擊它并從“文檔”旁邊的可用轉換格式中選擇“HTML”。

第 3 步： 選擇所需的輸出格式后，單擊“轉換”選項

單擊后轉換過程開始，完成后將看到“下載”按鈕，只需單擊它即可將轉換后的 HTML 文件保存到電腦。

方法 2. 通過 Zamzar 在線將 Excel 轉換為 HTML

Zamzar 是一款我強烈推薦的在線工具，它可以輕松地將 Excel 轉換為HTML。由于其簡約易上手的界面，Zamzar 是滿足所有文件轉換需求的首選，且這個軟件無需注冊就能使用。但它也存在一些限制，允許轉換的最大文件大小為 2GB，支持最多 25 個文件批量轉換。現在，讓我們深入研究下面提到的將 Excel 轉換為 HTML 的簡單步驟：

第 1 步：打開計算機的網絡瀏覽器并導航至 Zamzar 的網站

找到“選擇文件”按鈕并按下。然后，可以從計算機中選擇所需的 Excel 文件。但是，將文件拖放到指定區域會更加方便。

第 2 步： Excel 文件成功上傳后，選擇輸出格式

選擇“HTML”作為轉換格式，單擊“立即轉換”按鈕，Zamzar 將開始轉換過程。轉換完成后，將出現“下載”按鈕，單擊它即可開始下載轉換后的 HTML 文件。

第三部分:總結

這篇文章我們講了幾種工具來快速、輕松地將 Excel 轉換為 HTML，幾種工具對比下來，我們強烈推薦 UPDF 編輯器，它能夠將 Excel 轉換為 HTML，并提供強大的 AI 功能，讓用戶可以方便快捷地查查詢自己想要的操作步驟。

言

需求場景

最近在開發項目時需要批量導入和導出Excel數據，在實現這個需求時，我們既可以在前端完成數據解析和文件生成工作，也可以通過前端發起導入以及導出請求后，后端實現解析文件流解析文件內容以及生成文件并提供下載鏈接的功能。

相較于后端處理Excel數據而言，使用前端導入導出可以提供更高的實時性，用戶可以直接在瀏覽器中觸發導出操作，無需等待后端處理。且可以在前端完成數據生成以及數據校驗處理工作，大大減輕后端服務器的壓力，大幅增強用戶體驗。

具體的技術方案選型主要看業務場景，如果對于小型數據集、實時性需求較高的導入導出操作，優先考慮前端實現。而對于大型數據集、需要業務邏輯處理、以及安全性要求高的場景，則后端處理更為合適。

技術方案

xlsx與xlsx-style組合方案：xlsx 是目前前端最常用的Excel解決方案，又叫做SheetJS，但社區版不支持修改Excel的樣式，需要購買Pro版才可以，如果需要修改導出的Excel文件樣式，需要結合xlsx-style庫一起使用。但遺憾的是xlsx庫已經兩年多不更新，而xlsx-style上一個版本更是8年前發布，目前已經不再推薦使用該方案。

exceljs與file-saver方案：exceljs是一款免費開源支持導入導出Excel 操作工具，并且可以實現樣式的修改以及 Excel 的高級功能，是非常值得推薦的一個處理 Excel 的庫，file-saver可以實現保存文件到本地。本文以exceljs與file-saver操作xlsx格式文件為例介紹如何具體上手使用。

exceljs介紹

ExcelJS是一個用于在Node.js和瀏覽器中創建、讀取和修改Excel文件的強大JavaScript庫。它提供了豐富的功能和靈活的API，使你能夠在你的應用程序中處理和操作Excel文件。

下面是一些ExcelJS庫的關鍵特性和功能：

1. 創建和修改Excel文件：ExcelJS允許你創建新的Excel工作簿，并在其中添加工作表、行和單元格。你可以設置單元格的值、樣式、數據類型以及其他屬性。
2. 讀取和解析Excel文件：ExcelJS支持讀取和解析現有的Excel文件。你可以將Excel文件加載到工作簿中，然后訪問工作表、行和單元格的數據。
3. 導出和保存Excel文件：ExcelJS可以將工作簿保存為Excel文件，支持多種格式，如XLSX、XLS和CSV。你可以將工作簿保存到本地文件系統或將其發送到客戶端以供下載。
4. 處理復雜的Excel功能：ExcelJS支持處理復雜的Excel功能，如公式、圖表、數據驗證、條件格式和保護工作表等。你可以根據需要設置和操作這些功能。
5. 支持自定義樣式和格式：ExcelJS允許你自定義單元格、行、列和工作表的樣式和格式。你可以設置字體、顏色、填充、邊框、對齊方式以及數字和日期格式等。

參考文檔

npm倉庫地址：https://www.npmjs.com/package/exceljs

官方中文文檔地址：https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md

快速上手

安裝依賴

exceljs用于Excel數據處理，file-sever用于保存到本地文件。

npm i exceljs
npm i file-saver

導出Excel

讓我們先從簡單的數據導出開始，快速體驗如何使用exceljs導出Excel文件，需要注意的是在瀏覽器環境中運行 JavaScript，瀏覽器的安全策略通常不允許直接訪問讀寫本地文件系統。在這種情況下，需要通過其他方式將文件轉換為buffer數據，在導出Excel時使用FileSaver.js庫將緩沖區數據保存到文件中。

<template>
  <el-button type="primary" @click="exportExcel">導出excel</el-button>
</template>

<script setup>
import ExcelJS from "exceljs";
import FileSaver from "file-saver";
// 導出excel文件
const exportExcel = () => {
  // 創建工作簿
  const workbook = new ExcelJS.Workbook();
  // 添加工作表，名為sheet1
  const sheet1 = workbook.addWorksheet("sheet1");
  // 導出數據列表
  const data = [
    {"姓名": "張三", "年齡": 18, "身高": 175, "體重": 74},
    {"姓名": "李四", "年齡": 22, "身高": 177, "體重": 84},
    {"姓名": "王五", "年齡": 53, "身高": 155, "體重": 64}
  ]
  // 獲取表頭所有鍵
  const headers = Object.keys(data[0])
  // 將標題寫入第一行
  sheet1.addRow(headers);
  // 將數據寫入工作表
  data.forEach((row) => {
    const values = Object.values(row)
    sheet1.addRow(values);
  });
  // 導出表格文件
  workbook.xlsx.writeBuffer().then((buffer) => {
    let file = new Blob([buffer], {type: "application/octet-stream"});
    FileSaver.saveAs(file, "ExcelJS.xlsx");
  }).catch(error => console.log('Error writing excel export', error))
}
</script>

<style scoped lang="scss">

</style>

當我們點擊導出excel按鈕時，調用exportFile函數，完成excel文件下載，下載后的文件內容如下：

導入Excel

導入excel文件時，同樣使用FileReader的readAsArrayBuffer方法，將文件轉換為二進制字符串，然后從buffer中加載數據并解析。

<template>
  <input
      type="file"
      accept=".xls,.xlsx"
      class="upload-file"
      @change="importExcel($event)"/>
</template>

<script setup>
import ExcelJS from "exceljs";
// 導出excel文件
const importExcel = (event) => {
  //獲取選擇的文件
  const files = event.target.files
  //創建Workbook實例
  const workbook = new ExcelJS.Workbook();
  // 使用FileReader對象來讀取文件內容
  const fileReader = new FileReader()
  // 二進制字符串的形式加載文件
  fileReader.readAsArrayBuffer(files[0])
  fileReader.onload = ev => {
    console.log(ev)
    // 從 buffer中加載數據解析
    workbook.xlsx.load(ev.target.result).then(workbook => {
      // 獲取第一個worksheet內容
      const worksheet = workbook.getWorksheet(1);
      // 獲取第一行的標題
      const headers = [];
      worksheet.getRow(1).eachCell((cell) => {
        headers.push(cell.value);
      });
      console.log("headers", headers)
      // 創建一個空的JavaScript對象數組，用于存儲解析后的數據
      const data = [];
      // 遍歷工作表的每一行（從第二行開始，因為第一行通常是標題行）
      for (let rowNumber = 2; rowNumber <= worksheet.rowCount; rowNumber++) {
        const rowData = {};
        const row = worksheet.getRow(rowNumber);
        // 遍歷當前行的每個單元格
        row.eachCell((cell, colNumber) => {
          // 獲取標題對應的鍵，并將當前單元格的值存儲到相應的屬性名中
          rowData[headers[colNumber - 1]] = cell.value;
        });
        // 將當前行的數據對象添加到數組中
        data.push(rowData);
      }
      console.log("data", data)
    })
  }
}
</script>

<style scoped lang="scss">

</style>

上傳文件后，解析內容如下所示：

進階操作

添加數據

我們可以通過columns方法添加列標題并定義列鍵和寬度，設置好表頭后，我們可以直接通過addRow方法，根據key值去添加每一行的數據。

參考文檔：https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md#%E5%88%97

完整代碼如下：

<template>
  <el-button type="primary" @click="exportExcel">導出excel</el-button>
</template>

<script setup>
import ExcelJS from "exceljs";
import FileSaver from "file-saver";
// 導出excel文件
const exportExcel = () => {
  // 創建工作簿
  const workbook = new ExcelJS.Workbook();
  // 添加工作表，名為sheet1
  const sheet1 = workbook.addWorksheet("sheet1");
  // 添加表頭列數據
  sheet1.columns = [
    {header: "姓名", key: "name", width: 20},
    {header: "年齡", key: "age", width: 10},
    {header: "身高", key: "height", width: 10},
    {header: "體重", key: "weight", width: 10},
  ];
  // 添加內容列數據
  sheet1.addRow({sort: 1, name: "張三", age: 18, height: 175, weight: 74});
  sheet1.addRow({sort: 2, name: "李四", age: 22, height: 177, weight: 88});
  sheet1.addRow({sort: 3, name: "王五", age: 53, height: 155, weight: 62});
  // 導出表格文件
  workbook.xlsx.writeBuffer().then((buffer) => {
    let file = new Blob([buffer], {type: "application/octet-stream"});
    FileSaver.saveAs(file, "ExcelJS.xlsx");
  }).catch(error => console.log('Error writing excel export', error))
}

</script>

<style scoped lang="scss">

</style>

添加數據后導出文件效果如下：

讀取數據

我們可以使用getRow方法，傳入指定行參數讀取行數據。

使用getColumn方法，傳入鍵、字母、id參數讀取列數據。

使用eachCell方法可以遍歷每個單元格內容。

參考文檔：https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md#%E8%A1%8C

代碼如下：

<template>
  <el-button type="primary" @click="exportExcel">導出excel</el-button>
</template>

<script setup>
import ExcelJS from "exceljs";
import FileSaver from "file-saver";
// 導出excel文件
const exportExcel = () => {
  // 創建工作簿
  const workbook = new ExcelJS.Workbook();
  // 添加工作表，名為sheet1
  const sheet1 = workbook.addWorksheet("sheet1");
  // 添加表頭列數據
  sheet1.columns = [
    {header: "姓名", key: "name", width: 20},
    {header: "年齡", key: "age", width: 10},
    {header: "身高", key: "height", width: 10},
    {header: "體重", key: "weight", width: 10},
  ];
  // 添加內容列數據
  sheet1.addRow({sort: 1, name: "張三", age: 18, height: 175, weight: 74});
  sheet1.addRow({sort: 2, name: "李四", age: 22, height: 177, weight: 88});
  sheet1.addRow({sort: 3, name: "王五", age: 53, height: 155, weight: 62});
  // 讀取行數據
  sheet1.getRow(1).eachCell((cell, rowIdx) => {
    console.log("行數據", cell.value, rowIdx);
  });
  // 讀取列數據,可以通過鍵(name)，字母(B)和基于id(1)的列號訪問單個列
  sheet1.getColumn("name").eachCell((cell, rowIdx) => {
    console.log("列數據", cell.value, rowIdx);
  });
}

</script>

<style scoped lang="scss">

</style>

效果

樣式

在導出excel文件時，默認沒有任何樣式的，為了美觀我們需要添加樣式，而exceljs支持修改表格樣式，具體內容可參考文檔https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md#%E6%A0%B7%E5%BC%8F

例如，我們需要設置所有單元格居中對齊，并添加邊框。并分別指定標題行和內容行字體大小、背景顏色、行高屬性，代碼如下：

<template>
  <el-button type="primary" @click="exportExcel">導出excel</el-button>
</template>

<script setup>
import ExcelJS from "exceljs";
import FileSaver from "file-saver";
// 導出excel文件
const exportExcel = () => {
  // 創建工作簿
  const workbook = new ExcelJS.Workbook();
  // 添加工作表，名為sheet1
  const sheet1 = workbook.addWorksheet("sheet1");
  // 導出數據列表
  const data = [
    {"姓名": "張三", "年齡": 18, "身高": 175, "體重": 74},
    {"姓名": "李四", "年齡": 22, "身高": 177, "體重": 84},
    {"姓名": "王五", "年齡": 53, "身高": 155, "體重": 64}
  ]
  // 獲取表頭所有鍵
  const headers = Object.keys(data[0])
  // 將標題寫入第一行
  sheet1.addRow(headers);
  // 將數據寫入工作表
  data.forEach((row) => {
    const values = Object.values(row)
    sheet1.addRow(values);
  });
  // 修改所有單元格樣式
  // 遍歷每一行
  sheet1.eachRow((row, rowNumber) => {
    // 遍歷每個單元格
    row.eachCell((cell) => {
      // 設置邊框樣式
      cell.border = {
        top: {style: 'thin'},
        left: {style: 'thin'},
        bottom: {style: 'thin'},
        right: {style: 'thin'}
      };
      // 設置居中對齊
      cell.alignment = {
        vertical: 'middle',
        horizontal: 'center'
      };
    });
  });
  // 獲取標題行數據
  const titleCell = sheet1.getRow(1);
  // 設置行高為30
  titleCell.height = 30
  // 設置標題行單元格樣式
  titleCell.eachCell((cell) => {
    // 設置標題行背景顏色為黃色
    cell.fill = {
      type: 'pattern',
      pattern: 'solid',
      fgColor: {argb: 'FFFF00'}
    };
    // 設置標題行字體
    cell.font = {
      color: {argb: 'FF0000'}, //顏色為紅色
      bold: true,// 字體粗體
      size: 18 // 設置字體大小為18
    };
  })
  // 獲取第二行到最后一行的內容數據
  const bodyRows = sheet1.getRows(2, sheet1.rowCount);
  // 處理內容行的數據
  bodyRows.forEach((bodyRow) => {
    // 設置行高為20
    bodyRow.height = 20
    bodyRow.eachCell((cell) => {
      cell.font = {
        size: 16 // 設置內容行字體大小為16
      };
    });
  });
  // 導出表格文件
  workbook.xlsx.writeBuffer().then((buffer) => {
    let file = new Blob([buffer], {type: "application/octet-stream"});
    FileSaver.saveAs(file, "ExcelJS.xlsx");
  }).catch(error => console.log('Error writing excel export', error))
}

</script>

<style scoped lang="scss">

</style>

導出Excel樣式效果如下所示，已經成功按我們指定的樣式導出了文件：

篩選

在很多的時候我們需要對表格中每一列的數據進行篩選，比如直接篩選姓名等列信息，我們可以通過 autoFilter 來添加篩選。參考文檔：https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md#%E8%87%AA%E5%8A%A8%E7%AD%9B%E9%80%89%E5%99%A8

代碼如下：

<template>
  <el-button type="primary" @click="exportExcel">導出excel</el-button>
</template>

<script setup>
import ExcelJS from "exceljs";
import FileSaver from "file-saver";
// 導出excel文件
const exportExcel = () => {
  // 創建工作簿
  const workbook = new ExcelJS.Workbook();
  // 添加工作表，名為sheet1
  const sheet1 = workbook.addWorksheet("sheet1");
  // 導出數據列表
  const data = [
    {"姓名": "張三", "年齡": 18, "身高": 175, "體重": 74},
    {"姓名": "李四", "年齡": 22, "身高": 177, "體重": 84},
    {"姓名": "王五", "年齡": 53, "身高": 155, "體重": 64}
  ]
  // 獲取表頭所有鍵
  const headers = Object.keys(data[0])
  // 將標題寫入第一行
  sheet1.addRow(headers);
  // 將數據寫入工作表
  data.forEach((row) => {
    const values = Object.values(row)
    sheet1.addRow(values);
  });
  // 單列篩選
  // sheet1.autoFilter = "A1";
  // 多個列篩選
  sheet1.autoFilter = "A1:C1";
  // 導出表格文件
  workbook.xlsx.writeBuffer().then((buffer) => {
    let file = new Blob([buffer], {type: "application/octet-stream"});
    FileSaver.saveAs(file, "ExcelJS.xlsx");
  }).catch(error => console.log('Error writing excel export', error))
}

</script>

<style scoped lang="scss">

</style>

導入后的效果如下，在姓名、年齡、身高列添加了篩選按鈕：

公式值

參考文檔：exceljs/README_zh.md at 5bed18b45e824f409b08456b59b87430ded023ab · exceljs/exceljs · GitHub

我們可以直接對表格中的數據進行公式計算，比如 求和(SUM)，平均數(AVERAGE) 等。

例如我們需要計算平均值、最大值、指定公式時，代碼如下：

<template>
  <el-button type="primary" @click="exportExcel">導出excel</el-button>
</template>

<script setup>
import ExcelJS from "exceljs";
import FileSaver from "file-saver";
// 導出excel文件
const exportExcel = () => {
  // 創建工作簿
  const workbook = new ExcelJS.Workbook();
  // 添加工作表，名為sheet1
  const sheet1 = workbook.addWorksheet("sheet1");
  // 導出數據列表
  const data = [
    {"姓名": "張三", "年齡": 18, "身高": 1.75, "體重": 74},
    {"姓名": "李四", "年齡": 22, "身高": 1.77, "體重": 84},
    {"姓名": "王五", "年齡": 53, "身高": 1.55, "體重": 64}
  ]
  // 獲取表頭所有鍵
  const headers = Object.keys(data[0])
  // 將標題寫入第一行
  sheet1.addRow(headers);
  // 將數據寫入工作表
  data.forEach((row) => {
    const values = Object.values(row)
    sheet1.addRow(values);
  });
  // 添加單元格
  sheet1.getCell("E1").value = "BMI指數";
  sheet1.getCell("F1").value = "平均身高";
  sheet1.getCell("G1").value = "最大體重";
  // 計算平均身高
  sheet1.getCell("F2").value = {formula: "=AVERAGE(C2:C4)"};
  // 計算最大體重
  sheet1.getCell("G2").value = {formula: "=MAX(D2:D4)"};
  // 計算BMI指數
  // 獲取第5列對象
  const BMIRange = sheet1.getColumn(5)
  BMIRange.eachCell((cell) => {
    console.log("cell", cell)
    console.log(cell.row)
    // 從第二列開始添加計算公式
    if (cell.row >= 2) {
      sheet1.getCell("E" + cell.row).value = {formula: "D" + cell.row + "/" + "(C" + cell.row + "*" + "C" + cell.row + ")"};
    }
  })
  // 導出表格文件
  workbook.xlsx.writeBuffer().then((buffer) => {
    let file = new Blob([buffer], {type: "application/octet-stream"});
    FileSaver.saveAs(file, "ExcelJS.xlsx");
  }).catch(error => console.log('Error writing excel export', error))
}

</script>

<style scoped lang="scss">

</style>

導出Excel文件效果如下，E列已經自動替換為公式計算。

合并單元格

表格的合并應該是業務需求中最頻繁的功能。當然這一功能使用 xlsx 也可以實現，我們只需要使用mergeCells方法，傳入合并單元格范圍參數即可。

參考文檔：https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md#%E5%90%88%E5%B9%B6%E5%8D%95%E5%85%83%E6%A0%BC

具體代碼實現如下所示：

<template>
  <el-button type="primary" @click="exportExcel">導出excel</el-button>
</template>

<script setup>
import ExcelJS from "exceljs";
import FileSaver from "file-saver";
// 導出excel文件
const exportExcel = () => {
  // 創建工作簿
  const workbook = new ExcelJS.Workbook();
  // 添加工作表，名為sheet1
  const sheet1 = workbook.addWorksheet("sheet1");
  // 導出數據列表
  const data = [
    {"姓名": "張三", "年齡": 18, "身高": 175, "體重": 74},
    {"姓名": "李四", "年齡": 18, "身高": '未知', "體重": '未知'},
    {"姓名": "王五", "年齡": 53, "身高": '未知', "體重": '未知'},
    {"姓名": "趙六", "年齡": 12, "身高": '未知', "體重": '未知'}
  ]
  // 獲取表頭所有鍵
  const headers = Object.keys(data[0])
  // 將標題寫入第一行
  sheet1.addRow(headers);
  // 將數據寫入工作表
  data.forEach((row) => {
    const values = Object.values(row)
    sheet1.addRow(values);
  });
  // 上下合并單元格
  sheet1.mergeCells("B2:B3");
  // 左右合并單元格
  sheet1.mergeCells("C3:D3");
  // 范圍合并單元格
  sheet1.mergeCells("C4:D5");
  // 導出表格文件
  workbook.xlsx.writeBuffer().then((buffer) => {
    let file = new Blob([buffer], {type: "application/octet-stream"});
    FileSaver.saveAs(file, "ExcelJS.xlsx");
  }).catch(error => console.log('Error writing excel export', error))
}

</script>

<style scoped lang="scss">

</style>

單元格合并后導出文件效果如下：

數據驗證

有時候我們需要為某個單元格添加數據可以方便直接下拉選擇指定的值，此時就需要使用數據驗證功能，傳入可填寫的選項列表。

參考文檔：https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md#%E6%95%B0%E6%8D%AE%E9%AA%8C%E8%AF%81

例如我們對是否注冊列添加數據驗證，可填值為"是、否、未知"，具體代碼如下：

<template>
  <el-button type="primary" @click="exportExcel">導出excel</el-button>
</template>

<script setup>
import ExcelJS from "exceljs";
import FileSaver from "file-saver";
// 導出excel文件
const exportExcel = () => {
  // 創建工作簿
  const workbook = new ExcelJS.Workbook();
  // 添加工作表，名為sheet1
  const sheet1 = workbook.addWorksheet("sheet1");
  // 導出數據列表
  const data = [
    {"姓名": "張三", "年齡": 18, "身高": 1.75, "體重": 74, "是否注冊": ''},
    {"姓名": "李四", "年齡": 22, "身高": 1.77, "體重": 84, "是否注冊": ''},
    {"姓名": "王五", "年齡": 53, "身高": 1.55, "體重": 64, "是否注冊": ''}
  ]
  // 獲取表頭所有鍵
  const headers = Object.keys(data[0])
  // 將標題寫入第一行
  sheet1.addRow(headers);
  // 將數據寫入工作表
  data.forEach((row) => {
    const values = Object.values(row)
    sheet1.addRow(values);
  });
  // 獲取第5列對象
  const VerificationRange = sheet1.getColumn(5)
  VerificationRange.eachCell((cell) => {
    // 從第二列開始添加數據驗證規則
    if (cell.row >= 2) {
      sheet1.getCell("E" + cell.row).dataValidation = {
        type: "list",
        allowBlank: true,
        formulae: ['"是,否,未知"']
      };
    }
  })
  // 導出表格文件
  workbook.xlsx.writeBuffer().then((buffer) => {
    let file = new Blob([buffer], {type: "application/octet-stream"});
    FileSaver.saveAs(file, "ExcelJS.xlsx");
  }).catch(error => console.log('Error writing excel export', error))
}

</script>

<style scoped lang="scss">

</style>

導出的excel文件效果如下：

條件格式化

我們可以為指定單元格添加條件格式，對滿足條件的單元格設置指定的樣式。

參考文檔：exceljs/README_zh.md at 5bed18b45e824f409b08456b59b87430ded023ab · exceljs/exceljs · GitHub

例如為年齡大于18歲單元格進行紅色標注，代碼如下：

<template>
  <el-button type="primary" @click="exportExcel">導出excel</el-button>
</template>

<script setup>
import ExcelJS from "exceljs";
import FileSaver from "file-saver";
// 導出excel文件
const exportExcel = () => {
  // 創建工作簿
  const workbook = new ExcelJS.Workbook();
  // 添加工作表，名為sheet1
  const sheet1 = workbook.addWorksheet("sheet1");
  // 導出數據列表
  const data = [
    {"姓名": "張三", "年齡": 18, "身高": 1.75, "體重": 74},
    {"姓名": "李四", "年齡": 22, "身高": 1.77, "體重": 84},
    {"姓名": "王五", "年齡": 53, "身高": 1.55, "體重": 64}
  ]
  // 獲取表頭所有鍵
  const headers = Object.keys(data[0])
  // 將標題寫入第一行
  sheet1.addRow(headers);
  // 將數據寫入工作表
  data.forEach((row) => {
    const values = Object.values(row)
    sheet1.addRow(values);
  });
  // 年齡大于18歲紅色標注
  sheet1.addConditionalFormatting({
    ref: "B2:B4",
    rules: [
      {
        type: "cellIs",
        operator: "greaterThan",
        priority: 1,
        formulae: [18],
        style: {
          fill: {
            type: "pattern",
            pattern: "solid",
            bgColor: { argb: "FFFFC0CB" },
          },
        },
      },
    ],
  });
  // 導出表格文件
  workbook.xlsx.writeBuffer().then((buffer) => {
    let file = new Blob([buffer], {type: "application/octet-stream"});
    FileSaver.saveAs(file, "ExcelJS.xlsx");
  }).catch(error => console.log('Error writing excel export', error))
}

</script>

<style scoped lang="scss">

</style>

導出后的文件效果如下：

封裝exceljs

封裝導入導出函數

為了提高項目代碼的復用性，通常會將excel導入導出功能封裝到單獨的函數中方便調用，封裝后的函數如下：

import ExcelJS from "exceljs";
import FileSaver from "file-saver";
import {timeFile} from "@/utils/timeFormat";
// 導出excel文件
export function exportFile(export_data, filename) {
    // 創建工作簿
    const workbook = new ExcelJS.Workbook();
    // 添加工作表，名為sheet1
    const sheet1 = workbook.addWorksheet("sheet1");
    // 獲取表頭所有鍵
    const headers = Object.keys(export_data[0])
    // 將標題寫入第一行
    sheet1.addRow(headers);
    // 將數據寫入工作表
    export_data.forEach((row) => {
        const values = Object.values(row)
        sheet1.addRow(values);
    });
    // 設置默認寬高屬性
    sheet1.properties.defaultColWidth = 20
    sheet1.properties.defaultRowHeight = 20
    // 修改所有單元格樣式
    // 遍歷每一行
    sheet1.eachRow((row, rowNumber) => {
        // 遍歷每個單元格
        row.eachCell((cell) => {
            // 設置邊框樣式
            cell.border = {
                top: {style: 'thin'},
                left: {style: 'thin'},
                bottom: {style: 'thin'},
                right: {style: 'thin'}
            };
            // 設置居中對齊
            cell.alignment = {
                vertical: 'middle',
                horizontal: 'center'
            };
        });
    });
    // 獲取標題行數據
    const titleCell = sheet1.getRow(1);
    // 設置標題行單元格樣式
    titleCell.eachCell((cell) => {
        // 設置標題行背景顏色
        cell.fill = {
            type: 'pattern',
            pattern: 'solid',
            fgColor: {argb: '3498db'}
        };
        // 設置標題行字體
        cell.font = {
            bold: true,// 字體粗體
        };
    })
    // 導出表格文件
    workbook.xlsx.writeBuffer().then((buffer) => {
        let file = new Blob([buffer], {type: "application/octet-stream"});
        FileSaver.saveAs(file, filename + timeFile() + ".xlsx");
    }).catch(error => console.log('Error writing excel export', error))
}

// 導入excel文件
export function importFile(content) {
    return new Promise((resolve, reject) => {
        // 創建一個空的JavaScript對象數組，用于存儲解析后的數據
        const data = [];
        //創建Workbook實例
        const workbook = new ExcelJS.Workbook();
        workbook.xlsx.load(content).then(workbook => {
            // 獲取第一個worksheet內容
            const worksheet = workbook.getWorksheet(1);
            // 獲取第一行的標題
            const headers = [];
            worksheet.getRow(1).eachCell((cell) => {
                headers.push(cell.value);
            });
            // console.log("headers", headers)
            // 遍歷工作表的每一行（從第二行開始，因為第一行通常是標題行）
            for (let rowNumber = 2; rowNumber <= worksheet.rowCount; rowNumber++) {
                const rowData = {};
                const row = worksheet.getRow(rowNumber);
                // 遍歷當前行的每個單元格
                row.eachCell((cell, colNumber) => {
                    // 獲取標題對應的鍵，并將當前單元格的值存儲到相應的屬性名中
                    rowData[headers[colNumber - 1]] = cell.value;
                });
                // 將當前行的數據對象添加到數組中
                data.push(rowData);
            }
            // console.log("data", data)
            resolve(data);
        }).catch(error => {
            reject(error);
        });
    })
}

vue組件調用

以element plus為例，調用函數完成Excel文件導入與導出，代碼如下：

<template>
  <el-button type="primary" @click="exportExcel">導出excel</el-button>
  <el-button type="success" @click="importExcel">導入excel</el-button>
  <p>導入數據預覽</p>
  {{ uploadData}}
  <el-dialog
      v-model="uploadDialogVisible"
      title="批量添加數據"
      width="40%"
  >
    <el-form label-width="120px">
      <el-form-item label="模板下載：">
        <el-button type="info" @click="downloadTemplate">
          <el-icon>
            <Download/>
          </el-icon>
          點擊下載
        </el-button>
      </el-form-item>
      <el-form-item label="文件上傳：">
        <el-upload drag accept=".xls,.xlsx" :auto-upload="false" :on-change="handleChange">
          <el-icon class="el-icon--upload">
            <upload-filled/>
          </el-icon>
          <div class="el-upload__text">
            將文件拖到此處，或<em>點擊上傳</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              請上傳.xls,.xlsx格式文件，文件最大為500kb
            </div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="uploadDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitUpload">
          導入
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {Download, UploadFilled} from "@element-plus/icons-vue"
import {getDemo} from "@/api/home";
import {timeFormatConversion} from "@/utils/timeFormat";
import {exportFile, importFile} from "@/utils/excel";
// 表格字段配置
const fieldConfig = ref([
  {
    'label': 'ID', // 標簽
    'model': 'id',// 字段名
    'is_export': true,// 是否導出該字段
  },
  {
    'label': '用戶名', // 標簽
    'model': 'username',// 字段名
    'is_export': true, // 是否導出該字段
  },
  {
    'label': '省份', // 標簽
    'model': 'province',// 字段名
    'is_export': true // 是否導出該字段
  },
  {
    'label': '性別', // 標簽
    'model': 'sex_name',// 字段名
    'is_export': true // 是否導出該字段
  },
  {
    'label': '生日', // 標簽
    'model': 'birthday',// 字段名
    'is_export': true, // 是否導出該字段
  },
  {
    'label': '身高(cm)', // 標簽
    'model': 'height',// 字段名
    'is_export': true, // 是否導出該字段
  },
  {
    'label': '體重(kg)', // 標簽
    'model': 'weight',// 字段名
    'is_export': true,// 是否導出該字段
  },
  {
    'label': '注冊時間', // 標簽
    'model': 'created_time',// 字段名
    'is_export': true, // 是否導出該字段
  },
  {
    'label': '個人介紹', // 標簽
    'model': 'introduction',// 字段名
    'is_export': true,// 是否導出該字段
  }
])
// 導出Excel事件
const exportExcel = () => {
  ElMessage({
    message: '開始導出數據，請稍候！',
    type: 'success',
  })
  // 導出數據查詢參數
  const printParams = {
    'size': 1000,
    'page': 1,
  }
  // 獲取需要導出的字段配置
  const export_fields = fieldConfig.value
      .filter(obj => obj['is_export'])
      .map(({label, model}) => ({[model]: label}))
  // 處理數據結構
  getDemo(printParams).then((response) => {
    // console.log(response.results)
    const export_data = response.results.map(obj => {
      const newObj = {};
      export_fields.forEach(field => {
        const [key, value] = Object.entries(field)[0];
        if (key === 'created_time') {
          newObj[value] = timeFormatConversion((obj[key]), 'YYYY-MM-DD HH:mm:ss');
        } else {
          newObj[value] = obj[key];
        }
      });
      return newObj;
    });
    let filename = '示例用戶'
    exportFile(export_data, filename);
  }).catch(response => {
    //發生錯誤時執行的代碼
    console.log(response)
    ElMessage.error('獲取列表數據失敗！')
  });
}
// 導入excel彈窗是否顯示
const uploadDialogVisible = ref(false)
// 點擊導入excel按鈕事件
const importExcel = () => {
  uploadDialogVisible.value = true
}
// 下載模板文件
const downloadTemplate = () => {
  window.open('https://api.cuiliangblog.cn/static/demo-template.xlsx')
}
// 文件數據
const uploadData=ref([])
// 文件上傳事件
const handleChange = (file) => {
  const reader = new FileReader();
  reader.onload = () => {
    const content = reader.result;
    importFile(content).then((data) => {
      console.log(data)
      uploadData.value = data
    }).catch(response => {
      //發生錯誤時執行的代碼
      console.log(response)
      ElMessage.error('獲取列表數據失敗！')
    });
  };
  reader.readAsBinaryString(file.raw);
};
// 點擊導入excel提交數據事件
const submitUpload = () => {
  uploadDialogVisible.value =false
}
</script>

<style scoped lang="scss">

</style>

頁面效果

封裝后的頁面效果如下，至此，一個簡單的vue前端實現Excel文件導入導出功能便開發完成了。

完整代碼

gitee：https://gitee.com/cuiliang0302/vue3_vite_element-plus

github：https://github.com/cuiliang0302/vue3-vite-template

查看更多

微信公眾號

微信公眾號同步更新，歡迎關注微信公眾號《崔亮的博客》第一時間獲取最近文章。

博客網站

崔亮的博客-專注devops自動化運維，傳播優秀it運維技術文章。更多原創運維開發相關文章，歡迎訪問https://www.cuiliangblog.cn

自動化##Python#

遇到的需求是這樣的，需要頻繁將htm類型的數據轉為Excel表格，這是一個重復性的工作，極大程度上浪費時間和人力，所以我找到了一個解決方案。用Python開發一個桌面的自動化的小工具，雖然實現起來簡單，但是真心好用。今天特意寫篇文章分享給大家。希望你從獲得的是這個思路，里面的功能你可以換成你工作中重復的工作。

一、背景介紹

首先 htm 數據是如下這樣的，一個網址。內容在網頁中，這里需要寫爬蟲，獲取網頁中的信息，自動保存到excel ，并輸出excel格式的文件。

1、需求結果

2、解析htm里的內容，并保存到excel

from bs4 import BeautifulSoup
import pandas as pd


class htmToExcel(object):
    def __init__(self, file_name, file_path):
        self.file_name = file_name
        self.file_path = file_path


    def htm_to_excel(self):
        print(self.file_path)
        soup = BeautifulSoup(open(self.file_path), features='html.parser')
        table = soup.find("table")
        tr_list = table.find_all("tr")
        th = tr_list.pop(0)
        title = th.find_all("th")
        lis = []
        for tr in tr_list:
            data = {}
            td = tr.find_all("td")
            for i in range(len(td)):
                data[title[i].text] = td[i].text
            lis.append(data)
        df = pd.DataFrame(lis)
        df.to_excel('{}.xlsx'.format(str(self.file_name).split('.')[0]), index=False)
        return '轉換成功！'




if __name__ == '__main__':
    file_name = input("請輸入文件名字：")
    path = 'C:/Users/cherich/Desktop/' + file_name
    pross = htmToExcel(file_name, path)
    print(pross.htm_to_excel())

二、設計窗口

創建桌面窗口，這里使用tkinter，它是Python 自帶的gui庫，安裝后即可使用。

1、安裝命令：

pip install tkinter

2、利用tkinter完成可視化窗口上傳文件功能：

from tkinter import Tk, Entry, Button, mainloop
import tkinter.filedialog
import htm_to_excel
from tkinter import messagebox



def Upload():
    try:
        selectFileName = tkinter.filedialog.askopenfilename(title='選擇文件')
        pross = htm_to_excel.htmToExcel(str(selectFileName).split('/')[-1], selectFileName)
        pross.htm_to_excel()
        messagebox.showinfo('Info', '轉換成功！')
        root.destroy()
    except Exception as e:
        print(e)
        messagebox.showinfo('Info', '轉換失敗！')




root = Tk()
root.title('HTM轉Excel小工具')
root.geometry('+500+300')


e1 = Entry(root, width=50)
e1.grid(row=0, column=0)
btn1 = Button(root, text=' 上傳 ', command=Upload).grid(row=1, column=0, pady=5)
mainloop()

三、打包exe

本功能打包成exe的好處是不需要將代碼部署到服務器，直接將打包好的exe發給對方，就能直接使用。對于這種小而輕的功能非常友好。

1、安裝命令：

pip install pyinstaller

2、 打開DOS窗口并切換到demo.py文件的目錄，注意路徑不要有中文：

在當前目錄下,會生成兩個文件夾:build和dist。dist里面就是所有可執行exe文件，發送快捷方式到桌面，點擊demo.exe就能運行了。

3、pyinstaller指令的常見可選參數：

-i 給應用程序添加圖標
-F 指定打包后只生成一個exe格式的文件
-D –onedir 創建一個目錄，包含exe文件，但會依賴很多文件（默認選項）
-c –console, –nowindowed 使用控制臺，無界面(默認)
-w –windowed, –noconsole 使用窗口，無控制臺
-p 添加搜索路徑

四、該注意的坑！

如果生成exe之后，你發現你的程序異常的慢，請檢查你的導包代碼，盡量不要出現 from ··· import * ，否則每次啟動程序，都會導入大量函數占用大量時間，親測有效。

今天的文章寫到這里，如果你覺得對你有幫助，歡迎點贊哦~