vue-element-admin專案匯入和匯出的實現
vue-element-admin匯入元件封裝
模板和樣式
首先封裝一個類似的元件,首先需要注意的是,類似功能,vue-element-admin已經提供了,我們只需要改造即可
excel匯入功能需要使用npm包xlsx,所以需要安裝xlsx外掛
npm i xlsx
將vue-element-admin提供的匯入功能新建一個元件,位置: src/components/UploadExcel
import CommonTools from './CommonTools' import UploadExcel from './UploadExcel' export default { install(Vue) { Vue.component('CommonTools',CommonTools) // 註冊工具欄元件 Vue.component('UploadExcel',UploadExcel) // 註冊匯入excel元件 } }
修改樣式和佈局
<template> <div class="upload-excel"> <div class="btn-upload"> <el-button :loading="loading" size="mini" type="primary" @click="handleUpload"> 點選上傳 </el-button> </div> <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx,.xls" @change="handleClick"> <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover"> <i class="el-icon-upload" /> <span>將檔案拖到此處</span> </div> </div> </template> <script> import XLSX from 'xlsx' export default { props: { beforeUpload: Function,// eslint-disable-line onSuccess: Function// eslint-disable-line },data() { return { loading: false,excelData: { header: null,results: null } } },methods: { generateData({ header,results }) { this.excelData.header = header this.excelData.results = results this.onSuccess && this.onSuccess(this.excelData) },handleDrop(e) { e.stopPropagation() e.preventDefault() if (this.loading) return const files = e.dataTransfer.files if (files.length程式設計客棧 !== 1) { this.$message.error('Only support uploading one file!') return } const rawFile = files[0] // only use files[0] if (!this.isExcel(rawFile)) { this.$message.error('Only supports upload .xlsx,.xls,.csv suffix files') return false } this.upload(rawFile) e.stopPropagation() e.preventDefault() },handleDragover(e) { e.stopPropagation() e.preventDefault() e.dataTransfer.dropEffect = 'copy' },handleUpload() { this.$refs['excel-upload-input'].click() },handleClick(e) { const files = e.target.files const rawFile = files[0] // only use files[0] http://www.cppcns.comif (!rawFile) return this.upload(rawFile) },upload(rawFile) { this.$refs['excel-upload-input'].value = null // fix can't select the same excel if (!this.beforeUpload) { this.readerData(rawFile) return } const before = this.beforeUpload(rawFile) if (before) { this.readerData(rawFile) } },readerData(rawFile) { this.loading = true return new Promise((resolve,reject) => { const reader = new FileReader() reader.onload = e => { const data = e.target.result const workbook = XLSX.read(data,{ type: 'array' }) const firstSheetName = workbook.SheetNames[0] const worksheet = workbook.Sheets[firstSheetName] const header = this.getHeaderRow(worksheet) const results = XLSX.utils.sheet_to_json(worksheet) this.generateData({ header,results }) this.loading = false resolve() } reader.readAsArrayBuffer(rawFile) }) },getHeaderRow(sheet) { const headers = [] const range = XLSX.utils.decode_range(sheet['!ref']) let C const R = range.s.r /* start in the first row */ for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */ const cell = sheet[XLSX.utils.encode_cell({ c: C,r: R })] /* find the cell in the first row */ let hdr = 'UNKNOWN ' + C // <-- replace with your desired default if (cell && cell.t) hdr = XLSX.utils.format_cell(cell) headers.push(hdr) } return headers },isExcel(file) { return /\.(xlsx|xls|csv)$/.test(file.name) } } } </script> <style scoped lang="scss"> .upload-excel { display: flex; justify-content: center; margin-top: 100px; .excel-upload-input{ display: none; z-index: -9999; } .btn-upload,.drop{ border: 1px dashed #bbb; width: 350px; height: 160px; text-align: center; line-height: 160px; } .drop{ line-height: 80px; color: #bbb; i { font-size: 60px; display: block; } } } </style>
建立路由和元件
建立公共匯入的頁面路由,新建一個公共的匯入頁面,掛載路由 src/router/index.js
path: '/import',component: Layout,hidden: true,// 隱藏在左側選單中 children: [{ path: '',// 二級路由path什麼都不寫 表示二級預設路由 component: () => import('@/views/import') }] },
建立import路由元件 src/views/import/index.vue
<template> <!-- 公共匯入元件 --> <upload-excel :on-success="success" /> </template>
實現匯入
封裝匯入使用者的api介面
export function importUser(data) { return request({ url: 'user/batch',method: 'post',data }) }
獲取匯入的excel資料,匯入excel介面
async success({ header,results }) { // 如果是匯入使用者 const userRelations = { '入職日期': 'create_time','手機號': 'mobile','使用者名稱': 'username','密碼': 'password','郵箱': 'email','部門':'部門' } const arr = [] results.forEach(item => { const userInfo = {} Object.keys(item).forEach(key => { userInfo[userRelations[key]] = item[key] }) arr.push(userInfo) }) await importUser(arr) // 呼叫匯入介面 this.$router.back() }
為了讓這個頁面可以服務更多的匯入功能,我們可以在頁面中用引數來判斷,是否是匯入使用者
data() { return { type: this.$route.query.type } },
當excel中有日期格式的時候,實際轉化的值為一個數字,我們需要一個方法進行轉化
formatDate(numb,format) { const time = new Date((numb - 1) * 24 * 3600000 + 1) time.setYear(time.getFullYear() - 70) const year = time.getFullYear() + '' const month = time.getMonth() + 1 + '' const date = time.getDate() - 1 + '' if (format && format.length === 1) { return year + format + month + format + date } return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date) }
匯入的手機號不能和之前的存在的手機號重複
邏輯判斷
async success({ header,results }) { if (this.type === 'user') { const userRelations = { '入職日期': 'create_time','部門':'部門' } const arr = [] // 遍歷所有的陣列 results.forEach(item => { // 需要將每一個條資料裡面的中文都換成英文 const userInfo = {} Object.keys(item).forEach(key => { // key是當前的中文名 找到對應的英文名 if (userRelations[key] === 'timeOfEntry' || userRelations[key] === 'correctionTime') { userInfo[userRelations[key]] = new Date(this.formatDate(item[key],'/')) // 只有這樣,才能入庫 return } userInfo[userRelations[key]] = item[key] }) // 最終userInfo變成了全是英文 arr.push(userInfo) }) await importUser(arr) this.$message.success('匯入成功') } this.$router.back() // 回到上一頁 },formatDate(numb,format) { const time = new Date((numb - 1) * 24 * 3600000 + 1) time.setYear(time.getFullYear() - 70) const year = time.getFullYear() + '' const month = time.getMonth() + 1 + '' const date = time.getDate() - 1 + '' if (format && format.length === 1) { return year + format + month + format + date } return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date) }
使用者頁面跳轉
<el-button type="warning" size="small" @click="$router.push('/import?type=user')">匯入</el-button>
使用者匯出**
日常業務中,我們經常遇到excel匯出功能, 怎麼使用呢
Excel 的匯入匯出都是依賴於js-xlsx來實現的。
在 js-xlsx的基礎上又封裝了Export2Excel.js來方便匯出資料。
安裝所需依賴
npm install xlsx file-saver -S npm install script-loader -S -D
由於js-xlsx體積還是很大的,匯出功能也不是一個非常常用的功能,所以使用的時候建議使用懶載入。使用方法如下:
import('@/vendor/Export2Excel').then(excel => { excel.export_json_to_excel({ header: tHeader,//表頭 必填 data,//具體資料 必填 filename: 'excel-list',//非必填 autoWidth: true,//非必填 bookType: 'xlsx' //非必填 }) })
excel匯出引數的介紹
vue-element-admin提供了匯出的功能模組,在課程資源/excel匯出目錄下,放置到src目錄下
excel匯出基本的結構
下面程式碼會用到 Export2Excel.js 模組,所以首先在 src 目錄下新建 vendor 目錄,其中新建 Export2Excel.js ,輸入如下程式碼
/* eslint-disable */
import { saveAs } from 'file-saver'
import XLSX from 'xlsx'
function generateArray(table) {
var out = [];
var rows = table.querySelectorAll('tr');
var ranges = [];
for (var R = 0; R < rows.length; ++R) {
var outRow = [];
var row = rows[R];
var columns = row.querySelectorAll('td');
for (var C = 0; C < columns.length; ++C) {
var cell = columns[C];
var colspan = cell.getAttribute('colspan');
var rowspan = cell.getAttribute('rowspan');
var cellValue = cell.innerText;
if (cellValue !== "" &&awww.cppcns.commp; cellValue == +cellValue) cellValue = +cellValue;
//Skip ranges
ranges.forEach(function (range) {
if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
}
});
//Handle Row Span
if (rowspan || colspan) {
rowspan = rowspan || 1;
colspan = colspan || 1;
ranges.push({
s: {
r: R,c: outRow.length
},e: {
r: R + rowspan - 1,c: outRow.length + colspan - 1
}
});
};
//Handle Value
outRow.push(cellValue !== "" ? cellValue : null);
//Handle Colspan
if (colspan)
for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
}
out.push(outRow);
}
return [out,ranges];
};
function datenum(v,date1904) {
if (date1904) v += 1462;
var epoch = Date.parse(v);
return (epoch - new Date(Date.UTC(1899,11,30))) / (24 * 60 * 60 * 1000);
}
function sheet_from_array_of_arrays(data,opts) {
var ws = {};
var range = {
s: {
c: 10000000,r: 10000000
},e: {
c: 0,r: 0
}
};
for (var R = 0; R != data.length; ++R) {
for (var C = 0; C != data[R].length; ++C) {
if (range.s.r > R) range.s.r = R;
if (range.s.c > C) range.s.c = C;
if (range.e.r < R) range.e.r = R;
if (range.e.c < C) range.e.c = C;
var cell = {
v: data[R][C]
};
if (cell.v == null) continue;
var cell_ref = XLSX.utils.encode_cell({
c: C,r: R
});
if (typeof cell.v === 'number') cell.t = 'n';
else if (typeof cell.v === 'boolean') cell.t = 'b';
else if (cell.v instanceof Date) {
cell.t = 'n';
cell.z = XLSX.SSF._table[14];
cell.v = datenum(cell.v);
} else cell.t = 's';
ws[cell_ref] = cell;
}
}
if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
return ws;
}
function Workbook() {
if (!(this instanceof Workbook)) return new Workbook();
this.SheetNames = [];
this.Sheets = {};
}
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
export function export_table_to_excel(id) {
var theTable = document.getElementById(id);
var oo = generateArray(theTable);
var ranges = oo[1];
/* original data */
var data = oo[0];
var ws_name = "SheetJS";
var wb = new Workbook(),ws = sheet_from_array_of_arrays(data);
/* add ranges to worksheet */
// ws['!cols'] = ['apple','banan'];
ws['!merges'] = ranges;
/* add worksheet to workbook */
wb.SheetNames.push(ws_name);
wb.Sheets[ws_name] = ws;
var wbout = XLSX.write(wb,{
bookType: 'xlsx',bookSST: false,type: 'binary'
});
saveAs(new Blob([s2ab(wbout)],{
type: "application/octet-stream"
}),"test.xlsx")
}
export function export_json_to_excel({
multiHeader = [],header,data,filename,merges = [],autoWidth = true,bookType = 'xlsx'
} = {}) {
/* original data */
filename = filename || 'excel-list'
data = [...data]
data.unshift(header);
for (let i = multiHeader.length - 1; i > -1; i--) {
data.unshift(multiHeader[i])
}
var ws_name = "SheetJS";
var wb = new Workbook(),ws = sheet_from_array_of_arrays(data);
if (merges.length > 0) {
if (!ws['!merges']) ws['!merges'] = [];
merges.forEach(item => {
ws['!merges'].push(XLSX.utils.decode_range(iteltfoIWHwfm))
})
}
if (autoWidth) {
/*設定worksheet每列的最大寬度*/
const colWidth = data.map(row => row.map(val => {
/*先判斷是否為null/undefined*/
if (val == null) {
return {
'wch': 10
};
}
/*再判斷是否為中文*/
else if (val.toString().charCodeAt(0) > 255) {
return {
'wch': val.toString().length * 2
};
} else {
return {
'wch': val.toString().length
};
}
}))
/*以第一行為初始值*/
let result = colWidth[0];
for (let i = 1; i < colWidth.length; i++) {
for (let j = 0; j < colWidth[i].length; j++) {
if (result[j]['wch'] < colWidth[i][j]['wch']) {
result[j]['wch'] = colWidth[i][j]['wch'];
}
}
}
ws['!cols'] = result;
}
/* add worksheet to workbook */
wb.SheetNames.push(ws_name);
wb.Sheets[ws_name] = ws;
var wbout = XLSX.write(wb,{
bookType: bookType,type: 'binary'
});
saveAs(new Blob([s2ab(wbout)],`${filename}.${bookType}`);
}
因為資料中的key是英文,想要匯出的表頭是中文的話,需要將中文和英文做對應
const headers = { '入職日期': 'create_time'www.cppcns.com,'角色': 'role_name','部門': 'department_name' }
完成匯出程式碼
import { formatDate } from '@/filters' // 匯出資料 exportData() { const headers = { '入職日期': 'create_time','部門': 'department_name' } import('@/vendor/Export2Excel').then(async excel => { const res = await getUserList({ query: '',pagenum: 1,pagesize: this.page.total }) // console.log(res) const data = this.formatJson(headers,res.users) console.log(data) excel.export_json_to_excel({ header: Object.keys(headers),filename: '使用者資訊表',autoWidth: true,bookType: 'xlsx' }) }) } }
匯出時間格式的處理
// 該方法負責將陣列轉化成二維陣列 formatJson(headers,rows) { return rows.map(item => { return Object.keys(headers).map(key => { if (headers[key] === 'create_time') { return formatDate(item[headers[key]]) // formatDate 函式是定義好的一個過濾器 } return item[headers[key]] }) })
過濾器 formatDate
import moment from 'moment' export function formatTime(value) { return moment(value * 1000).format('YYYY-MM-DD HH:mm:ss') } export function formatDate(value) { return moment(value * 1000).format('YYYY-MM-DD') }
到此這篇關於vue-element-admin專案匯入和匯出的實現的文章就介紹到這了,更多相關vue-element-admin專案匯入匯出內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!