プロジェクトのシナリオ:
最近プロジェクトを引き継ぎました。その要件の 1 つは、クエリされたテーブルのデータを Excel ファイルにエクスポートし、ローカルにダウンロードすることでした。
問題は、この種のものをバックエンドに実装した方が良いのではないかということです。フロントエンドで行う場合は、すべてのデータを取得して、データを解析して、Excel ファイルに変換するという一連の操作が必要になりますが、データ量が少なければ問題ありません。データ量が膨大なので、何万件も丸ごとください。ブラウザが固まってしまうのではありませんか？? （もちろん、これは初心者としての私の個人的な意見です。合格したマスターが良い提案や経験を持っている場合は、私に教えてください~~) これらのリスクをSBマネージャーに報告したとき、人々は私が怠け者であり、望んでいないと考えまし
たいろいろな理由をつけて私に反論してください。。。
わかった、あなたの言うことなら何でもするよ！仕方ない、軒下にいる人は頭を下げるしかない。
-------------------------------------------------- --でたらめな境界線----------------------------------------------- -------------------
本題に戻りますが、いくつかの情報を確認したところ、実装は実際には非常に単純であることがわかりました。コードに！
解決：
1. パッケージのインストール: npm install xlsx file-saver --save
2. はじめに: 「xlsx」から XLSX をインポートします。
3. テンプレートにボタンを記述します。doExport はエクスポート機能をトリガーするクリック イベントです。
<el-button
type="primary"
size="small"
:loading="exportLoading"
icon="el-icon-document"
@click="doExport"
>导出Excel</el-button>
インターフェイスのスタイルは次のとおりです。
4. メソッドのコードは次のとおりです。
doExport() {
// 开始生成文件时，添加一个loading让它一直转，待生成excel完毕之后再关掉
this.exportLoading = true
// 关键函数
function exportToExcel(fileName, tableData) {
const worksheet = XLSX.utils.json_to_sheet(tableData)
const workbook = {
Sheets: {
data: worksheet }, SheetNames: ['data'] }
const excelBuffer = XLSX.write(workbook, {
bookType: 'xlsx', type: 'array' })
const data = new Blob([excelBuffer], {
type: 'application/octet-stream' })
FileSaver.saveAs(data, `${
fileName}.xlsx`)
}
// fileName 为生成的 Excel 文件名称，为避免重复，这里使用时间戳作为前缀
const fileName = moment().format('YYYY-MM-DD hh:mm:ss') + ' xxx信息数据'
// perPageSize 为请求数据的数量，由于需求方想要全部的数据，而前端又要分页，所以只能把这个参数设置成很大喽，如果出问题我也没办法~
const params = {
page: this.currentPage - 1,
size: 100000,
queryCondition: {
area: this.searchForm.area,
deviceType: this.searchForm.deviceType,
hospitalName: this.searchForm.deviceCustomer,
erpMaterialDescription: this.searchForm.erpMaterialDescription,
deviceSerialNumber: this.searchForm.deviceSerialNumber,
materialNumber: this.searchForm.materialNumber,
workOrderCreatedTimeStart: this.searchForm.workOrderCreatedTime,
workOrderCreatedTimeEnd: this.searchForm.workOrderCreatedTime,
workOrderClosedTimeStart: this.searchForm.workOrderClosedTime,
workOrderClosedTimeEnd: this.searchForm.workOrderClosedTime,
workOrderNumber: this.searchForm.workOrderNumber,
engineerName: this.searchForm.engineerName,
warrantyStatus: this.searchForm.warrantyStatus,
materialReplaceTimesLow: this.searchForm.materialReplaceTimesLow,
materialReplaceTimesHigh: this.searchForm.materialReplaceTimesHigh
}
}
console.log(params)
const self = this
ibMaterialApi.getIBMaterialTableData(params).then(res => {
if (res.code === 200) {
// 解析excel文件
const excelData = []
for (let i = 0; i < res.data.length; i++) {
const excelObj = {
}
excelObj.序列号 = (i + 1).toString()
excelObj.创建时间 = res.data[i].createTime === '0' ? '暂无数据' : res.data[i].createTime
excelObj.物料号 = res.data[i].materialNumber
excelObj.物料描述 = res.data[i].erpMaterialDescription
excelObj.客户名称 = res.data[i].hospitalName
excelObj.省份 = res.data[i].area
excelObj.机型 = res.data[i].deviceType
excelObj.整机序列号 = res.data[i].deviceSerialNumber
excelObj.故障时间 = res.data[i].equipmentDowntime
excelObj.故障描述 = res.data[i].diagnose
excelObj.解决方案 = res.data[i].suggestionSolution ? res.data[i].suggestionSolution : '暂无数据'
excelObj.旧件序列号 = res.data[i].oldSerialNumber ? res.data[i].oldSerialNumber : 'N.A'
excelObj.保修状态 = res.data[i].warrantyStatus
excelObj.工单号 = res.data[i].caseId
excelData.push(excelObj)
}
console.log(excelData)
exportToExcel(fileName, excelData)
self.exportLoading = false
} else {
self.exportLoading = false
}
}).catch(() => {
self.exportLoading = false
})
}
ファイルをエクスポートするときの読み込みスタイルは次のとおりです:
ファイルは正常にダウンロードされました。
わかりました！以上です。コードは非常にシンプルです。個人的なテストや履歴書に使用できます。
もっと良い意見がある場合は、批判や修正をお願いします。