快捷導航

iview+vue實現(xiàn)導入EXCEL預(yù)覽功能

更新時間：2022年07月06日 08:32:26 作者：LBJsagiri

這篇文章主要為大家詳細介紹了iview+vue實現(xiàn)導入EXCEL預(yù)覽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了iview+vue實現(xiàn)導入EXCEL預(yù)覽的具體代碼，供大家參考，具體內(nèi)容如下

Xboot中，前端實現(xiàn)導入EXCEL預(yù)覽功能

HTML部分

<!-- 導入數(shù)據(jù) -->
? <Drawer title="導入數(shù)據(jù)" closable v-model="importModalVisible" width="1000">
? ? ? <div
? ? ? ? style="
? ? ? ? ? display: flex;
? ? ? ? ? justify-content: space-between;
? ? ? ? ? align-items: center;
? ? ? ? "
? ? ? >
? ? ? ? <Upload ref="upload"
? ? ? ? ? :action="importFile"
? ? ? ? ? :before-upload="beforeUploadImport"
? ? ? ? ? accept=".xls, .xlsx"
? ? ? ? ? :on-success="uploadSucess"
? ? ? ? ? :headers="accessToken">
? ? ? ? ? <Button
? ? ? ? ? ? :loading="reading"
? ? ? ? ? ? icon="ios-cloud-upload-outline"
? ? ? ? ? ? style="margin-right: 10px"
? ? ? ? ? ? >上傳Excel文件</Button
? ? ? ? ? >
? ? ? ? ? <span v-if="uploadfile.name"
? ? ? ? ? ? >當前選擇文件：{{ uploadfile.name }}</span
? ? ? ? ? >
? ? ? ? </Upload>
? ? ? ? <Button @click="clearImportData" icon="md-trash">清空數(shù)據(jù)</Button>
? ? ? </div>
? ? ? <Alert type="warning" show-icon
? ? ? ? >導入前請下載查看導入模版數(shù)據(jù)文件查看所需字段及說明，確保數(shù)據(jù)格式正確，不得修改列英文名稱</Alert
? ? ? >
? ? ? <Table
? ? ? ? :columns="importColumns"
? ? ? ? border
? ? ? ? :data="importTableData"
? ? ? ? ref="importTable"
? ? ? ></Table>
? ? ? <!-- <div class="drawer-footer"> -->
? ? ? ? <div style="position: absolute; right: 15px; display: inline-block">
? ? ? ? ? <Button @click="importModalVisible = false">關(guān)閉</Button>
? ? ? ? ? <Button
? ? ? ? ? ? :loading="importLoading"
? ? ? ? ? ? :disabled="importTableData.length <= 0"
? ? ? ? ? ? @click="importData"
? ? ? ? ? ? style="margin-left: 8px"
? ? ? ? ? ? type="primary"
? ? ? ? ? >
? ? ? ? ? ? 確認導入
? ? ? ? ? ? <span v-if="importTableData.length > 0"
? ? ? ? ? ? ? >{{ importTableData.length }} 條數(shù)據(jù)</span
? ? ? ? ? ? >
? ? ? ? ? </Button>
? ? ? ? </div>
? ? ? <!-- </div> -->
</Drawer>

需要引入

1、安裝插件

npm i xlsx

2、引入

import XLSX from "xlsx";

data中定義

importFile: importEquipment,//接口
accessToken: {},
uploadfile: {
??? ?name: ''
},
importColumns: [],
importTableData: [],

js代碼

//導入數(shù)據(jù)
? ? beforeUploadImport(file) {
? ? ? this.uploadfile = file
? ? ? const fileExt = file.name
? ? ? ? .split('.')
? ? ? ? .pop()
? ? ? ? .toLocaleLowerCase()
? ? ? if (fileExt == 'xlsx' || fileExt == 'xls') {
? ? ? ? this.readFile(file)
? ? ? ? this.file = file
? ? ? } else {
? ? ? ? this.$Notice.warning({
? ? ? ? ? title: '文件類型錯誤',
? ? ? ? ? desc:
? ? ? ? ? ? '所選文件‘ ' +
? ? ? ? ? ? file.name +
? ? ? ? ? ? ' '不是EXCEL文件，請選擇后綴為.xlsx或者.xls的EXCEL文件。'
? ? ? ? })
? ? ? }
? ? ? return false
? ? },
? ? // 讀取文件
? ? readFile(file) {
? ? ? this.reading = true
? ? ? const reader = new FileReader()
? ? ? reader.readAsArrayBuffer(file)
? ? ? reader.onerror = (e) => {
? ? ? ? this.reading = false
? ? ? ? this.$Message.error('文件讀取出錯')
? ? ? }
? ? ? reader.onload = (e) => {
? ? ? ? console.log(e.target.result)
? ? ? ? const data = e.target.result
? ? ? ? const { header, results } = excel.read(data, 'array')
? ? ? ? const tableTitle = header.map((item) => {
? ? ? ? ? return { title: item, key: item, minWidth: 130, align: 'center' }
? ? ? ? })
? ? ? ? this.importTableData = results
? ? ? ? this.importColumns = tableTitle
? ? ? ? this.reading = false
? ? ? ? this.$Message.success('讀取數(shù)據(jù)成功')
? ? ? }
? ? },
? ? uploadSucess(response) {
? ? ? if (response.code == 200) {
? ? ? ? this.$Message.success('導入成功')
? ? ? ? this.importModalVisible = false
? ? ? ? this.clearImportData()
? ? ? ? this.getDataList()
? ? ? } else {
? ? ? ? this.$Message.error(response.message)
? ? ? }
? ? ? this.uploadfile = {}
? ? },
? ? clearImportData() {
? ? ? this.importTableData = []
? ? ? this.importColumns = []
? ? ? this.uploadfile = {}
? ? ? this.$refs.upload.clearFiles();
? ? },

導入模板