vue2导出表格，导入表格 (excel)

目录

定义下载方法

封装组件携带参数

在子组件(不需要动，直接复制)

在使用页面---

1、引入组件

2、功能

---

定义下载方法js

let validList = [
    {
        key: 'bet-1',
        label: '<',
    },
    {
        key: 'bet-2',
        label: '<=',
    },
]

let after_condition = false //判断当前之前所有的条件分支是否有条件

export default {
    //svg矢量图
    isExternal (path) {
        return /^(https?:|mailto:|tel:)/.test(path)
    },

    //将数组转换成字符串
    arrToStr (arr) {
        return arr.map(item => { return item.name }).join(", ")
    },

    toggleClass (arr, elem, key) {
        return arr.some(item => {
            return (item[key] ?? undefined) === (elem[key] ?? null)
        });
    },

    removeEle (arr, elem, key) {
        let arrNew = _.cloneDeep(arr)
        let includesIndex;
        arrNew.map((item, index) => {
            if (item[key] == elem[key]) {
                includesIndex = index
            }
        });
        arrNew.splice(includesIndex, 1);
        return arrNew
    },

    toChecked (arr, elem, key) {
        let arrNew = _.cloneDeep(arr)
        let isIncludes = this.toggleClass(arr, elem, key);
        let arrNewRemove = this.removeEle(arr, elem, key);
        !isIncludes ? arrNew.push(elem) : (arrNew = _.cloneDeep(arrNewRemove));
        return arrNew
    },

    toRadioed (arr, elem, key) {
        let arrNew = []
        let isIncludes = this.toggleClass(arr, elem, key);
        let arrNewRemove = this.removeEle(arr, elem, key);
        !isIncludes ? arrNew.push(elem) : (arrNew = _.cloneDeep(arrNewRemove));
        return arrNew
    },

    excel (data, fileName) {
        this.download(data, fileName, 'application/vnd.ms-excel')
    },

    download (data, fileName, mineType) {
        let blob = new Blob([data], {
            type: mineType,
        })
        let href = window.URL.createObjectURL(blob) //创建下载的链接
        let downloadElement = document.createElement('a')
        downloadElement.setAttribute('download', fileName)
        downloadElement.href = href
        document.body.appendChild(downloadElement)
        downloadElement.click() //点击下载
        document.body.removeChild(downloadElement) //下载完成移除元素
        window.URL.revokeObjectURL(href) //释放掉blob对象
    },

}

在main.js里面全局引入

import func from '@/utils/export'

Vue.prototype.$func = func; 

封装组件携带参数

    supplierExport (params) {
        return request({ url: '/archives/api/provider/export', method: 'get', responseType: 'blob', params })
    },

在子组件(不需要动，直接复制)

<template>
    <div class="ImportExport">
        <el-upload class="uploadButton" :action="actionUrl.importUrl" :limit="1" :on-error="handleError" :on-success="handleUpload" :before-upload="beforeUpload" :show-file-list="false">
            <el-button icon="el-icon-download" type="success">导入</el-button>
        </el-upload>
        <el-button icon="el-icon-download" @click="exportMoudle" type="warning">导出</el-button>
    </div>
</template>

<script>
    import { Message } from 'element-ui'
    export default {
        props: {
            postExport: Object,
            actionUrl: Object,
            brandExportForm: Object
        },
        methods: {
//导出
            async exportMoudle () {
                //导出接口 actionUrl.exportUrl 
//如果要传参，就判断一下，通常用于在搜索之后，把搜索出来的导出
                if (this.brandExportForm.exp) {
                    try {
                        await this.$httpAPI[this.actionUrl.exportUrl](this.brandExportForm).then(res => {
                            if (res.size > 0) {
                                this.$func.excel(res, this.actionUrl.name)
                            } else {
                                Message.warning('后台数据为空')
                            }
                        })
                    } catch (e) { }
                } else {
                    console.log('正常导出');
                    try {
                        await this.$httpAPI[this.actionUrl.exportUrl]().then(res => {
                            if (res.size > 0) {
                                console.log(this.$func);
                                this.$func.excel(res, this.actionUrl.name)
                            } else {
                                Message.warning('后台数据为空')
                            }
                        })
                    } catch (e) { }
                }
            },
            beforeUpload (file) {
                const FILE_NAME = file.name
                if (FILE_NAME.substring(FILE_NAME.lastIndexOf('.')) !== '.xls' && FILE_NAME.substring(FILE_NAME.lastIndexOf('.')) !== '.xlsx') {
                    Message.warning('仅支持.xls和.xlsx文件')
                    return false
                }
            },
            handleError (error, file) {
                console.log(456, error, file)
                // Message.error('导入失败，格式不正确')
            },
            handleUpload (response) {
                console.log(response);
                if (response.code != 200) {
                    Message.error(response.message)
                } else {
                    Message.success('导入成功')
                    this.$emit('getImport', '导入成功')
                }
            },
        },
    }
</script>

<style lang="scss">
.ImportExport {
    display: inline-block;
    margin-left: 10px;
    .uploadButton {
        display: inline-block;
        margin-right: 10px;
    }
}
</style>

在使用页面---

1、引入组件

html 
<import-export @getImport="getImport" :brandExportForm="supplierForm" :postExport="exportform" :actionUrl="actionUrl"></import-export>

postExport     brandExportForm    导入或导出的字段，在data中定义{}
 -------------------------------------------------------------------

js
import ImportExport from '@/components/ImportExport/index.vue'

2、功能

 // 导入
 getImport (val) {
    console.log(val);
     //更新列表
},

//导出
不需要再单独写事件，在组件中已经有了这个事件

// 下载模板
  Downloading () {
     window.location.href ='链接'
}

扫描二维码关注公众号，回复： 17017733 查看本文章