VUE和GO实现Excel表的批量导出

VUE和GO实现Excel表的批量导出

---

前言

之前学的java,最近刚进公司,因为项目要求,学习了vue和go语言,最近有个模块,关于Excel表的批量导入和导出,自己也是试了很多方法,我就把成功的给大家分享下也记录一下自己走过的坑

 

一、批量导入的方式

批量导出Excel数据一般也就是,要么在前端处理处理好,后端只需要传数据给前端就行,把工作交给前端,这样可以缓解后端的压力;或者是把这个工作交给后端去完成,本次就分享下使用前端处理数据的方法

基础工作:

1:安装依赖包

npm install -S file-saver xlsx
 
npm install -D script-loader

2:在项目中新建一个文件夹

二、纯前台导出

1.导出分两种,一种是纯前端导出,不需要连接后端的,但是只能导出当前页数据,比如分页数据,10条为一页,那么这种方法只能导出这十条数据,想看导出数据库全部数据的请直接往下看

这里用的Button按钮：

<Button @click="outExe" type="primary">导出当前页</Button>

 data可能会有所遗漏,这里不太重要,都是很简单的

data () {
      return {
            excelData: [],

             }
        }

outExe () {
                this.$confirm('此操作将导出excel文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.excelData = this.data; //你要导出的数据list。
                    this.export2Excel();
                }).catch(() => {
                });
            },
            export2Excel () {
                var that = this;
                require.ensure([], () => {
                    //别忘记下载这两个文件,路径写对
                    const {export_json_to_excel} = require('../../vendor/Export2Excel');
                    const tHeader = [
                        '商户/企业名称',
                        '登录名称',
                        '位置',
                        '联系人',
                    ]; // 导出的表头名
                    const filterVal = [
                        'name',
                        'loginName',
                        'location',
                        'contact',
                    ]; // 导出的表头字段名
                    const list = that.excelData;
                    // that.excelData为传入的数据
                    const data = that.formatJson(filterVal, list);
                    export_json_to_excel(tHeader, data, `XXXXXXXXX`); // 导出的表格名称，根据需要自己命名
                    // tHeader为导出Excel表头名称，`xxxxxx`为导出Excel名称
                });
            },

 三、前端+后端导出

1、前台

<Button @click="exportExcel" type="primary">导出全部</Button>

 exportExcel () {
                   //xxxx为自己的URL地址
                this.$axios.post(urls.XXXXX.XXXXXXXX(), {
                    //这个地方传不传参都无所谓,这里不是按照条件去导出
                    user: Cookies.get('user'),
                    currentPage: 1,
                    pageSize: this.page.pageSize
                }).then(response => {
                    this.excelData = response.data; //这里是后台返回的数据。
                    this.exportExcelN();
                }).catch(() => {
                });
            },
            exportExcelN () {
                var that = this;
                require.ensure([], () => {
                    //一定要记得下载Export2Excel,路径别写错
                    const {export_json_to_excel} = require('../../vendor/Export2Excel');
                    const list = that.excelData.data;
                    const tHeader = [
                        '商户/企业名称',
                        '登录名称',
                        '位置',
                        '联系人',
                    ]; // 导出的表头名
                    const filterVal = [
                        'name',
                        'loginName',
                        'location',
                        'contact',
                    ]; // 导出的表头字段名
                    const data = that.formatJson(filterVal, list.data);
//list.data注意自己的数据在第几层,拿准位置
                    export_json_to_excel(tHeader, data, `XXXXXX`); // XXXX为导出的表格名称，根据需要自己命名
                });
            },

            formatJson (filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]));
            },

2.后端(因为后端做的事就比较简单,只有获取数据,这里就不过多介绍了)

controller层

type ShopController struct {
	beego.Controller
}

func (shopCtrl *ShopController) DownloadShopRecordList() {
	resJson := NewResponseJson(nil)

	defer func() {
		shopCtrl.Data["json"] = resJson
		shopCtrl.ServeJSON()
	}()
	//初始化参数
	var shopParam = new(GetShopParam)
	res := shopCtrl.Ctx.Input.RequestBody
	err := json.Unmarshal(res, &shopParam)
	if err != nil {
		resJson.Success = false
		resJson.Msg = "解析json参数失败"
		return
	}
	dataTableList, errShopList := models.GetAllShopList(shopParam.User,
		shopParam.CurrentPage, shopParam.PageSize)
	if errShopList != nil {
		resJson.Success = false
		resJson.Msg = "获取数据失败"
		return
	}
	resJson.Msg = "获取数据成功"
	resJson.Data = dataTableList
}

type GetShopParam struct {
	User        string `json:"user"`
	CurrentPage int    `json:"currentPage"`
	PageSize    int    `json:"pageSize"`
}

 

model层

func GetAllShopList(user string, currentPage int, pageSize int) (shopTableList db.ShopTableList, err error) {
	/*name,loginName,location,contact,tel,Type,createTime*/
	allShopList, shopListCount, err := db.GetAllShopList(user, currentPage, pageSize)

	if err != nil {
		return db.ShopTableList{}, errors.New("XXXXX发生错误！")
	} else {

		shopTableList.Data = allShopList
		shopTableList.Count = shopListCount
	}

	return shopTableList, nil
}

api层

func GetAllShopList(user string, currentPage int, pageSize int) (allShopList []ShopList, shopListCount int, msg error) {
	//错误处理
	defer common.RecoverHandler(func(rcErr error) {
		allShopList = nil
		shopListCount = 0
		msg = rcErr
	})
	dbHandler := db_handler.NewDbHandler()
	//执行
	dbResultMappingList, resultErr := dbHandler.SelectList(这里写SQL语句)
	common.ErrorHandler(resultErr, "数据库操作异常")
	if len(dbResultMappingList) > 0 {
		decoder := ObtainDecoderConfig(&allShopList)
		err := decoder.Decode(dbResultMappingList)
		common.ErrorHandler(err, "XXXXX发生错误！")
	}
	fmt.Println("看!!!!!", allShopList)
	//组装查询数量sql
	sqlGetCountStr := dbHandler.GetTotalSql(这里写SQL语句)
	dbResultMapping, resultErr := dbHandler.SelectOne(sqlGetCountStr)
	common.ErrorHandler(resultErr, "数据库操作异常")
	var listCount ListCount
	if dbResultMapping != nil {
		decoder := ObtainDecoderConfig(&listCount)
		err := decoder.Decode(dbResultMapping)
		common.ErrorHandler(err, "XXXXXX发生错误！")
	}
	return allShopList, listCount.Total, msg
}

下篇文章和大家交流下Excel的批量导入