qian
在現代網頁開發中，能夠在前端實現資料的匯入與匯出功能是非常重要的一環。其中，使用Vue.js框架搭配exceljs庫是一種常見且有效的方式來處理Excel檔案的讀寫操作。以下將詳細介紹如何透過這兩項技術達成此目的。
Vue.js簡介
Vue.js是一個輕量級、高效能的JavaScript函式庫，專注於View層（視圖層）的邏輯。它提供了非常靈活及可組合的元件系統，讓開發者能夠以單向數據流為基礎建立複雜的UI互動。Vue.js已經發展到第三版(Vue 3)，帶來了更快的效能和更好的開發生態系統。
ExcelJS簡介
ExcelJS是一個用於創建、讀取和更新Microsoft Excel工作表的Node.js模塊。它基於ECMAScript 6模組標準，提供了一個面向對象的模型來表示工作簿、工作表和範圍，並且支援多種格式，如XLSX, XLSB, ODS 和 CSV。透過結合Vue.js的使用，我們可以在前端應用程式中直接操作這些Excel檔案。
前置作業
- 安裝Vue.js：首先需要通過npm安裝Vue.js及其相關套件。
- 安裝exceljs: 同樣地，我們也需要透過npm安裝exceljs。
npm install vue
npm install @vue/cli # 如果尚未安裝Vue CLI
# or
yarn add vue
yarn global add @vue/cli # 如果尚未全局安裝Vue CLI
npm install exceljs
# or
yarn add exceljs
在Vue項目中集成exceljs
1. 在`main.js`或`app.js`文件中導入exceljs並初始化其環境設定。
2. 在需要讀寫Excel檔案的Component內部使用exceljs API進行相應的操作。
// main.js (or app.js)
import * as Excel from 'exceljs';
const workbook = new Excel.Workbook(); // 初始化一個新的workbook物件
export default function setupExports() {
// 在此處添加任何其他的前置設定
}
導入Excel資料
當使用者上傳一個Excel檔案時，你可以使用Vue的File Input元件或者第三方套件來取得這個檔案。接著，你可以利用exceljs來解析這個檔案並將資料映射到你的資料結構中。例如：
<template>
<!-- HTML模板部分 -->
</template>
<script>
import axios from 'axios'
import * as Excel from 'exceljs';
export default {
name: 'ImportExcel',
methods: {
async handleUpload(e) {
const file = e.target.files[0];
if (file) {
try {
// 打開Excel檔案
const workbook = await Excel.readFile(file);
// 從第一張工作表擷取資料
const worksheet = workbook.getWorksheet('Sheet1'); // 假設第一張工作表名稱為"Sheet1"
const range = worksheet.getUsedRange();
const data = range.toJSON();
console.log(data); // 輸出所有資料
// 根據需求處理數據
this.$emit('uploadComplete', data); // 假設我們有一個事件來接收上傳完成的數據
} catch (error) {
console.error('Error reading Excel file:', error);
}
}
}
}
};
</script>
導出Excel資料
要從Vue應用程式中產生一份Excel報告，可以使用exceljs的WriteStream方法。首先，你需要確保你有足夠的權限來存取用戶端的硬碟，因為通常需要暫時儲存生成的Excel檔案。然後，你可以這樣做：
<script>
import * as fs from 'fs'; // 引入文件系統模塊
import * as Excel from 'exceljs';
export default {
mounted () {
this.exportData();
},
methods: {
exportData() {
let wb = new Excel.Workbook();
let ws = wb.addWorksheet('Sheet1');
ws.columns = [{header: "Name", key: "name"}, {header: "Age", key: "age"}];
for (var i = 1; i <= 5; ++i) {
let row = ws.addRow({name: `Person ${i}`, age: i});
}
wb.xlsx.writeBuffer().then((buffer) => {
fs.writeFileSync('/path/to/save/report.xlsx', buffer); // 保存Excel文件
})
}
}
}
</script>
請注意，上述程式碼中的`/path/to/save/report.xlsx`路徑應該被替換為實際的絕對路徑或者可訪問的路徑。此外，如果你是在伺服器端執行這些操作，那麼可能需要在伺服器的配置中允許這種類型的檔案寫入。
總結來說，透過Vue.js和exceljs的合作，可以輕鬆地在網頁應用程式中實現在線匯入和匯出Excel的功能，同時也提升了開發者的效率和應用程式的可用性。
