前端導出excel

導出Excel文件的方式多種多樣，可以前端導出，也可以后端導出，本文來分享一下如何在前端導出excel文件。以下幾點是前端導出Excel文件的好處：

• 即時性與便捷性：用戶可以在需要時立即導出當前頁面或視圖中的數(shù)據(jù)，無需等待后端處理，提高了操作的即時性和便捷性。
• 靈活性與定制化：前端導出允許開發(fā)者根據(jù)用戶需求定制Excel文件的格式、內(nèi)容和樣式，提供高度靈活性和個性化服務。
• 減輕服務器負擔：數(shù)據(jù)處理和文件生成的工作在前端完成，減少了后端服務器的負擔，提高了系統(tǒng)整體性能和響應速度。

安裝依賴 ExcelJS

ExcelJS是一個用于在JavaScript中創(chuàng)建和操作Excel文件的庫。它支持讀取、編輯和生成Excel文件，ExcelJS的主要特點包括：

• 創(chuàng)建和編輯工作簿：可以創(chuàng)建新的Excel工作簿或編輯現(xiàn)有的工作簿。
• 支持格式化：可以設置單元格的格式，包括字體、邊框、填充顏色等。
• 操作數(shù)據(jù)：可以在單元格中讀寫數(shù)據(jù)，包括文本、數(shù)字和日期。
• 支持多種Excel特性：包括合并單元格、添加圖表和插入圖片等。
• 無依賴：ExcelJS是純JavaScript實現(xiàn)，不依賴于其他庫，因此可以在瀏覽器和Node.js環(huán)境中使用。

FileSaver.js

FileSaver.js是一個適用于Web應用的客戶端文件保存解決方案，它實現(xiàn)了HTML5的saveAs()接口，使得Web應用能夠在客戶端生成文件并觸發(fā)下載，而無需將文件發(fā)送到服務器。主要功能：

• 保存文件：FileSaver.js允許開發(fā)者在客戶端創(chuàng)建Blob（二進制大對象）或File對象，并使用saveAs()方法將其保存為本地文件。
• 跨瀏覽器兼容：它提供了跨瀏覽器的兼容性，包括處理不同瀏覽器對Blob和saveAs()方法的支持差異。
• 自定義文件名：在保存文件時，開發(fā)者可以指定文件名，以滿足用戶的個性化需求。

安裝依賴庫：

npm install exceljs
npm install file-saver

ExcelJS基本使用 新建一個excel工作簿

const workbook = new ExcelJS.Workbook();

工作簿中新建一張工作表

const sheet = workbook.addWorksheet('Sheet1');

工作表中新增一行

worksheet.addRow({id: 1, name: 'yuan'})

更多可以參考官方文檔：https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md

導出excel

現(xiàn)在來測試下：

exportExcel() {
    // 創(chuàng)建工作簿
    const workbook = new ExcelJS.Workbook();
    const worksheet = workbook.addWorksheet("My Sheet");
    // 添加列標題
    worksheet.columns = [
    { header: "姓名", key: "name", width: 30 },
    { header: "年齡", key: "age", width: 10 },
    { header: "城市", key: "city", width: 20 },
    ];
    // 添加數(shù)據(jù)
    worksheet.addRow({ name: "張三", age: 25, city: "北京" });
    worksheet.addRow({ name: "李四", age: 30, city: "上海" });
    //  寫入buffer，導出Excel文件
    workbook.xlsx.writeBuffer().then((buffer) => {
    FileSaver.saveAs(
        new Blob([buffer], { type: "application/octet-stream" }),
        "表格.xlsx"
    );
    });
},

效果：

到此這篇關于在Vue中實現(xiàn)Excel導出功能(數(shù)據(jù)導出)的文章就介紹到這了,更多相關vue excel導出內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論