技術標籤：VueJavaScriptjavascriptvue

Excel上傳和下載

• 準備工作
• excel下載
• • • 在layui中使用
    • 非layui中使用
• excel上傳

準備工作

雖然leyui的表格自帶下載資料，但是很多格式和內容不能去處理，所以使用了layui的第三方外掛。
不僅可以在layui框架中使用，也可以在非layui框架中使用。
首先下載excel外掛：擴充套件 layui 的匯出外掛 layui.excel
如果在非layui中使用需要引入jQuery，但是直接引入jquery在vue中會引起衝突，所以需要下載：jquery.min.js
這裡注意，jquery要在vue之後引入，否則會引起衝突。

excel下載

引入外掛：

 <script defer src="/static/layui/layui_exts/excel.js"></script>

在layui中使用

layui.use([ 'jquery', 'form', 'excel'], function () {
	var $ = layui.jquery, form = layui.form, excel = layui.excel;
	// 要下載的資料
	var dataList = [{
        id: 1,
        name: 'Tom',
        sex:
 
 '男'
    }, {
        id: 2,
        name: 'Jack',
        sex: '男'
    }, {
        id: 3,
        name: 'Jary',
        sex: '女'
    }]
	 //	處理表頭
	 dataList.unshift({id:'編號',name:'姓名',sex:'男'}）
	 // 梳理資料(排序)
	 var data = excel.filterExportData(dataList,[
		'id','name','sex'
	])
	// 下載(匯出)資料
	excel.exportExcel
 
({
		sheet1: data   //sheet1是工作簿的名稱，可以自定義，字串可以不加引號
	}, '檔名.xlsx', 'xlsx'); //支援的格式有xlsx、csv、ods、xlsb、fods、biff2
	// 注意檔名後必須帶上對應的檔案字尾
})
	

非layui中使用

和在layui中使用差不多，但是必須要jQuery支援，否則無法使用.
區別就在於LAY_EXCEL

var dataList = [{
        id: 1,
        name: 'Tom',
        sex: '男'
    }, {
        id: 2,
        name: 'Jack',
        sex: '男'
    }, {
        id: 3,
        name: 'Jary',
        sex: '女'
    }]
	 //	處理表頭
	 dataList.unshift({id:'編號',name:'姓名',sex:'男'}）
	 // 梳理資料(排序)
	 var data = LAY_EXCEL.filterExportData(dataList,[
		'id','name','sex'
	])
	// 下載(匯出)資料
	LAY_EXCEL.exportExcel({
		sheet1: data   //sheet1是工作簿的名稱，可以自定義，字串可以不加引號
	}, '檔名.xlsx', 'xlsx'); //支援的格式有xlsx、csv、ods、xlsb、fods、biff2
	// 注意檔名後必須帶上對應的檔案字尾
	

excel上傳

上傳的原理主要是把檔案轉換成一個數組物件。
首先需要一個上傳檔案的表單

<input id="fileUpload" type="file" multiple="multiple"></input>

但是這只是一個原始的上傳檔案輸入框，樣式有點不好看

如果是在layui中只需要加一個class就可以美觀的顯示出來
在elementui中可以設定一個按鈕，模擬點選選擇檔案，然後選擇檔案，同時監控input上傳事件，再處理匯入的excel檔案資料。樣式如圖。選擇檔案之後檔名稱會顯示再輸入框中，但是輸入框是不可編輯的

程式碼如下：

<el-input id="fileNmae" v-model="searchForm.fileName" disabled placeholder="請選擇檔案...">
</el-input>
<input id="fileUpload" type="file" @change="handleChange" multiple="multiple" style="display: none"></input>

handleChange() { // 上傳檔案監控
	let that = this
	var files = $('#fileUpload')[0].files;
    if (files[0].name.indexOf("xls") < 0) {  //驗證檔案型別
	    this.$message.error("檔案型別錯誤，請重新選擇檔案！")
        var obj = document.getElementById('fileUpload');  //清除檔案上傳框
        obj.outerHTML = obj.outerHTML;
        return;
     }
     this.searchForm.fileName = files[0].name // 將檔名稱複製給input輸入框
     // 先讀取資料，後梳理資料
     LAY_EXCEL.importExcel(files, {}, function (data) {  //data為excel的資料
     	Object.keys(data[0]).forEach(function (key) { //data[0]表示第一個excel工作簿
			//因為上傳的檔案陣列物件的欄位名稱預設是A、B、C...
			//需要轉換以下欄位名稱
	        that.excelData = data[0][key];  
    	    	that.filterDataF()
        	})
     	});
 },
filterDataF() { //excel資料分析
	this.abnormalData = []
	let result = this.excelData
	result.forEach((eData, i) => {
		if (i !== 0) {
		let d = {}
		Object.keys(eData).forEach(keyi => {
			Object.keys(result[0]).forEach(key0 => {
				if (keyi === key0) {
					d[result[0][key0]] = eData[keyi]  // 按對應的鍵值存放
				}
			})
		})
		this.abnormalData.push(d)
		}
	})
	if (this.abnormalData.length === 0 || this.abnormalData[0].workDate === "") {
		this.$message({
        	message: '檔案中沒有資料，請重新上傳!', type: 'error', duration: 3000
		});
		obj.outerHTML = obj.outerHTML;	//清除檔案上傳框
    	that.searchForm.fileName = ""
	    return
    }
    this.$message({
    	message: '資料處理完畢，等待上傳!', type: 'success', duration: 3000
    });
	console.log(this.abnormalData)
}