A. 在vue中，實現純前端讀取和展示excel文件
本項目使用vue Element
使用的插件：XLSX
需要在項目猛春孝中安裝依賴 npm install XLSX
excel表格要枝稿放在src/森畝static目錄下
B. 如何上傳Excel直接讀取裡面的數據,不用保存excel文件後再讀取
最近一段時間，維護一個舊系統，其中有一個功能，是把Excel上傳，並讀取數據進行維護，然後轉插入至SQL資料庫中。
下面Insus.NET使用asp.net 標准上傳控制項:
<asp:FileUpload ID="FileUpload1" runat="server" />
Insus.NET習慣性，在每一個專案中，都會創建一個臨時目錄。
因為很多時候，我們處理一些臨時文件，或是數據均可在此臨時目錄中進行。它有點像Windows下的臨時目錄一樣。
上面代碼示例中，先是獲取上傳的文件名，此包含有路徑；
接下來還在知道上傳的擴展名；
第三行代碼是使用Guid類的方法NewGuid()與擴展名組合一個新的文件名。
第四行代碼創建上傳文件的目標路徑。
最後是保存。
下面是讀取Excel的數據，並綁定至Gridview控制項：
上面代碼示例中的#80行代碼，可以參考《Asp.net讀取Excel文件 2》http://www.cnblogs.com/insus/archive/2011/05/05/2037808.html
C. vue讀取excel內容屏蔽空行
EXCEL快速刪除中間的空白行的操作方法如下：
一、材料/工具 excel 二、方法步驟
1、第一步：我們按Ctrl+g出現定位界面，選擇空值，然後點跡塌擊定位。
2、第二步：然後電腦就會自動幫我們選擇簡改空行了！
3、第三步：右擊選中的區域點擊刪除。
4、第四步：然後選擇下方單元格上移，點擊確定！
5、第五步：於是沒用的空行就姿咐圓被刪除了。
D. VUE中使用vue-json-excel超級方便導出excel表格數據
一、安裝vue-json-excel
npm install vue-json-excel -S
二、main.js裡面引入並注冊使用
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)
三、頁面中使用
<download-excel
class = "export-excel-wrapper"
:data = "json_data"
:fields = "json_fields"
name = "filename.xls">
<!-- 上嘩臘賀面可以自定義自己的樣式，還可以引用其他組件button -->
<!-- <el-button type="primary" size="small">導出EXCEL</el-button> -->
</download-excel>
在這里說明一下組件的各個屬性
json_data：需要導出的數據
json_fields：自主選擇要導出的字亂派段，若不指定，默認導出全部數據中心局並全部欄位
E. vue 導入xlsx
npm install xlsx --s
handlePreview(file) {
// console.log(file);
this.importfile(file.raw)
this.fileList = []
},
importfile (obj) {
const _this = this
const reader = new FileReader()
reader.readAsArrayBuffer(obj)//需要傳blob類型
reader.onload = function () {
const buffer = reader.result
const bytes = new Uint8Array(buffer)
const length = bytes.byteLength
let binary = ''
for (let i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i])
好沖 }
const XLSX = require('xlsx')//引用
const wb = XLSX.read(binary, {
type: 'binary'
})
let tableList = ['業務類型','用戶訂單號','快遞單號']
for( let i = 0; i<tableList.length; i++ ) {
if ( wb.Strings[i].t != tableList[i] ) {
_this.$message.error('格式錯誤，請重新上傳');
return false
}
}
const outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
// console.log(outdata) // 此為取到的excel中內容，然後就可以自己改數據，畫頁面啦~
_this.allVisible = 塌襪侍true
let dataStr = []
for ( let i = 0; i<outdata.length; i++ ) {
dataStr.push({
團吵expressName: outdata[i].業務類型 == undefined ? '':outdata[i].業務類型,
expressNumber: outdata[i].用戶訂單號 == undefined ? '':outdata[i].用戶訂單號,
orderId: outdata[i].快遞單號 == undefined ? '':outdata[i].快遞單號.toString(),
});
}
_this.allTableData = dataStr
}
},
F. vue項目中如何把表格導出excel表格
有一個項目需求，要求在前端項目中導出Excel表格，經過查找代碼,Vue.js確實可以實現，具體實現步驟為：
1. 安裝依賴
//npm npm install -S file-saver xlsx
npm install -D script-loader
或者
//yarnyarn add file-saver
yarn add xlsx
yarn add script-loader --dev
2.導入兩個JS
下載Blob.js和Export2Excel.js，在src目錄下新建Excel文件夾，裡面放入Blob.js和Export2Excel.js兩個JS文件
image
**3.在main.js引入這兩個JS文件 **
import Blob from './excel/Blob'import Export2Excel from './excel/Export2Excel.js'
4.在組件中使用
//導出的方法exportExcel() {
require.ensure([], () => {
const { export_json_to_excel } = require('../excel/Export2Excel');
const tHeader = ['序號', '昵稱', '姓名'];
// 上面設置Excel的表格第一行的標題
const filterVal = ['index', 'nickName', 'name'];
// 上面的index、nickName、name是tableData里對象的屬性
const list = this.tableData; //把data里的tableData存到list
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '列表excel');
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
tHeader是表頭，filterVal 中的數據是表格的欄位，tableData中存放表格里的數據，類型為數組，裡面存放對象，表格的每一行為一個對象。
tableData 中的值為：
data () {
return {
tableData: [
{'index':'0',"nickName": "沙灘擱淺我們的舊時光", "name": "小明"},
{'index':'1',"nickName": "女人天生高貴", "name": "小紅"},
{'index':'2',"nickName": "海是彩色的灰塵", "name": "小蘭"}
]
}
}
最後實現的效果圖：
image
如果運行時，報如下所示的錯誤：
image
這是因為Export2Excel.js的設置需要改下：
image
註： 把require('script-loader!vendor/Blob')改為 require('./Blob.js')
demo 地址：https://github.com/dt8888/exportExcel
G. vue項目實現導入/導出Excel
首先安裝依賴包
前端通過位元組流或者url實現導出，位元組流方式導出的文件方式可讓磨敏以通過前端實現文件游缺名稱的修改，url導出方式則不能修改導坦枝出的文件名（文件名由後端提供）。
H. vue實戰(15)——基於Element上傳Excel讀取內容
大多數管理後台很多情況會有批量上傳數據的業務，用的最多的要數Excel上傳，根據不同的業務場景有兩種上傳方式：
I. Vue + SpringBoot 上傳 Excel 文件
Step2： 引用組件，指定上傳方法
這里對 axios 做了封裝含斗老，可以直接調談升用 api 中對應的方法：
Controller 層接收請求：
Service 層處理 Excel 文件，取出數據做銷正相應的業務處理。
到此，Vue 上傳文件到後端完成，效果如下：