Excel 是一種流行的文檔格式,常用于數據分析、財務報表、商務報告等領域。在 Vue 中,我們可以通過一些庫來實現將數據導出為 Excel 文件的功能。下面我們來介紹一種常用的 Vue 導出 Excel 文件的方式。
// 引入包 import { export_json_to_excel } from '@/vendor/Export2Excel'; // 導出 Excel 文件的方法: function exportExcel() { const sheetHeader = ['姓名', '性別', '年齡', '郵箱']; const data = [ ['Tom', '男', '18', 'tom@mail.com'], ['Jack', '女', '20', 'jack@mail.com'], ['Amy', '女', '16', 'amy@mail.com'], ['Duke', '男', '22', 'duke@mail.com'] ]; const fileName = '學生信息表'; const sheetName = 'sheet1'; export_json_to_excel(sheetHeader, data, fileName, sheetName); }
這里我們使用了一個庫 Export2Excel,可以通過 import 引入它,然后在這個 Vue 方法 exportExcel 中實現導出。首先我們需要定義一個 sheetHeader,用于設置導出 Excel 的表頭。然后我們定義一個 data 數組,其中每個元素代表一行數據。fileName 是 Excel 文件的文件名,sheetName 是 Excel 文件中 sheet 的名字。最后通過 export_json_to_excel 方法實現導出 Excel 文件。
需要注意的是,由于我們直接操作 dom,可能會被瀏覽器攔截,因此我們需要在 chrome 里手動允許下載,或者使用下載框架實現下載的功能。針對不同的瀏覽器,我們需要進行相應的設置。
// Chrome 瀏覽器需要手動允許下載: chromeOptions: { prefs: { download: { prompt_for_download: false, directory_upgrade: true, default_directory: '/tmp' } } } // 其他瀏覽器可以使用下載框架,例如 js-xlsx xlsx.writeFile(workbook, `${fileName}.xlsx`);
上述代碼實現了 Chrome 瀏覽器的下載設置,其中 default_directory 是指定下載的文件夾。如果使用下載框架 js-xlsx,我們需要將導出的數據寫入 workbook 中,然后通過 xlsx.writeFile 方法將 workbook 寫入文件并存儲到本地。
總的來說,Vue 導出 Excel 文件的功能是非常常用的,它可以將前端所需的數據導出為 Excel 文件,方便用戶離線查看和使用。當需要導出更復雜的 Excel 表格時,我們可以使用一些其他的庫,例如 xlsx-style。