vue + vue-json-excel make and export excel

Project scenario:

Project scenario: I currently have a list, the function can filter time and channels, and the filtered data includes the order number field, which is rendered in the list. I need to filter all order numbers according to the time channel, and then filter all orders No. Export only to Excel.

This function was also found on the Internet at the beginning, but it was not very applicable. Here I will share my solution.
注：这里只提供思路及方法，直接复制就无法使用的，因为涉及到其他的组件（时间，渠道）就没有放全代码了,建议参考一下思路，然后用自己的方法来实现会比复制粘贴更好，授人以鱼不如授人以渔这个道理相信大家都懂。

---

Effect

When you click Export, you will directly download the corresponding data, where the header is Hader (customizable), TrackingNo (required) is the exported data below the order number, Starttime (required): start time, Endtime (required): end time , LabelType: channel: empty when empty.

---

1. Install and introduce vue-json-excel:

I am here through the package manager of npm, and the way of global introduction.

1. Download vue-json-excel

npm i vue-json-excel

2. Global introduction

in main.js

//导入导出excel表格组件
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

---

2. Use in the page

1.HTML

 <download-excel 
   class="export-excel-wrapper"
   :data = "print"
   :fields = "json_fields" 
   type="csv"
   header = "Header"
   name = "filename"
   style="width:100px;float: left;"
 >
   <el-button style="margin-left:20px" type="primary">{
   
   {$t('export')}}</el-button>
 </download-excel>

2.JS

export default {
    
    
	data(){
    
    
		return{
    
    
			print:[],
			json_fields:{
    
    }
		}
	},
	methods(){
    
    
		    GetJsonFileds(val){
    
     //导出
      let params={
    
    
        TrackingNo : this.photoinfo.waybill_number,
        StockID : this.StockInfovalue,
        LabelType : this.photoinfo.LabelType,
        Startime : this.photoinfo.starttime[0],
        Endtime : this.photoinfo.starttime[1],
      }
      if (val == 2) {
    
    
        if (this.photoinfo.starttime.length == 0) {
    
    
          return
        }
      }
      if (this.photoinfo.starttime.length == 0) {
    
    
        this.$message.warning(this.$t('Unselected_time'))
      }
      if (params.LabelType == '') {
    
    
        params.LabelType = ''
      }else{
    
    
        params.LabelType = params.LabelType.join(',')
      }
      this.$api.post('/Shipment/DownTrackingNoPhotodata',params).then((res) => {
    
    
        if(res.return_codes==0){
    
    
          this.print = res.return_data[0].Date
          if (this.print.length == 0) {
    
    
            this.$message.error(this.$t('Data_in_this_time_range_is_null'))
            return
          }
          if (val != 1 && val != 2) {
    
    
            this.$message.success(this.$t('exporting'))
          }
          this.print[0].Startime = res.return_data[0].Startime || 'empty'
          this.print[0].Endtime = res.return_data[0].Endtime || 'empty'
          this.print[0].LabelType = this.photoinfo.LabelType || 'empty'
          this.json_fields={
    
    
            TrackingNo:'TrackingNo',
            Startime:'Startime',
            Endtime:'Endtime',
            LabelType:'LabelType'
          }
        }else{
    
    
          this.$message.error(this.$t('operation_failed'))
        }
      })
    },
	}
}

field description

1. class: class
2. data: This data is the data that needs to be printed
3. fields: print format
4. type: the type of export
5. header: header
6. name: the name of the exported file
7. style: style

implement logic

First of all, I have a time selection control and a channel control. When the value of these controls is changed, GetJsonFiledsthe function will be triggered, and it will bring a value, which proves that it is a channel or time, which will be used later.

Let me first talk about why I did it like this, because I found a very serious problem after I finished it, that is, the logic of this export is to read the value datainside and fieldsexport it, so there will be a problem, that is The update of the data is after the export, so the exported data is either empty and cannot be exported, or it is the last data.

So here is the idea of ​​this method. When selecting the time control, first trigger the function for preprocessing, and process the data first, because the time is mandatory here, so there is no problem in the time. If you do not choose the time, Here, this.photoinfo.starttime.lengtha prompt will pop up directly to enter the time.

But there is another problem in this way, that is, to select the channel after the time is selected, and finally the printing channel is one step slower. According to the same method, the channel is not mandatory, so here we have to judge again, through the channel The incoming 2 is judging. There are two situations to deal with here. One is to select the time first, and the other is to select the channel first. If the channel is selected first, there is no need to directly return, but if the time is selected first, the selection The channel needs to re-update the data. Just use the value of the time directly. If you can get it, it means that it is the time you selected first.

Note an important logic here, the exported event is placed on the button, and the exported data is placed on the change of the time control value.
After dealing with this, you can call the background interface to get the data, pass it directly after getting the data print, and judge whether it is empty, if it is empty, it will jump out as if there is no data in this time period, here you can also directly judge The data returned by the backend is the same.

Now get the back-end data and make sure there is data, write the data into print, and modify its format.

Summarize

Here is a pitfall to pay attention to: At present, I have seen nothing on the Internet that mentions this. When the exported data is dynamic data, if the fields are defined in data, then the final exported data is the last data, so My method here is to update the data first after selecting the corresponding screening information, and ensure that the latest screening data is exported during subsequent export.

The export process is:

select channel first

1. select channel
2. The channel value changes to trigger the function, but the function does nothing
3. selection period
4. The time value changes to update the data, here the value of the channel will be updated together
5. export

Choose time first

1. selection period
2. The value of time changes and the data is updated, but the value of the channel is empty at this time
3. select channel
4. The channel value changes, and the data is updated again. At this time, the value of the channel will be brought, and the value of time will be consistent.
5. export

The above is my idea of ​​solving this method