vue + vue-json-excel сделать и экспортировать в excel

Сценарий проекта:

Сценарий проекта: в настоящее время у меня есть список, функция может фильтровать время и каналы, а отфильтрованные данные включают поле номера заказа, которое отображается в списке.Мне нужно отфильтровать все номера заказов по временному каналу, а затем отфильтровать все заказы Нет. Экспорт только в Excel.

Эта функция тоже была найдена в интернете в начале, но она была не очень применима.Здесь я поделюсь своим решением.
注：这里只提供思路及方法，直接复制就无法使用的，因为涉及到其他的组件（时间，渠道）就没有放全代码了,建议参考一下思路，然后用自己的方法来实现会比复制粘贴更好，授人以鱼不如授人以渔这个道理相信大家都懂。

---

Эффект

Когда вы нажмете «Экспорт», вы напрямую загрузите соответствующие данные, где заголовок «Хадер» (настраиваемый), «Номер отслеживания» (обязательно) — это экспортированные данные под номером заказа, «Время начала» (обязательно): время начала, «Время окончания» (обязательно): время окончания. , LabelType: канал: пустой, если пустой.

---

1. Установите и введите vue-json-excel:

Я здесь через менеджер пакетов npm и способ глобального внедрения.

1. Загрузите vue-json-excel

npm i vue-json-excel

2. Глобальное введение

в main.js

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

---

2. Использование на странице

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'))
        }
      })
    },
	}
}

описание поля

1. класс: класс
2. данные: эти данные - это данные, которые необходимо распечатать
3. поля: формат печати
4. тип: тип экспорта
5. заголовок: заголовок
6. имя: имя экспортируемого файла
7. стиль: стиль

реализовать логику

Прежде всего, у меня есть управление выбором времени и управление каналом, при изменении значения этих элементов управления функция GetJsonFiledsсработает, и она принесет значение, которое доказывает, что это канал или время, которое будет использоваться позже.

Позвольте мне сначала рассказать о том, почему я сделал это так, потому что я обнаружил очень серьезную проблему после того, как закончил это, то есть логика этого экспорта заключается в том, чтобы прочитать значение dataвнутри и fieldsэкспортировать его, поэтому будет проблема, что Обновление данных происходит после экспорта, поэтому экспортированные данные либо пусты и не могут быть экспортированы, либо это последние данные.

Поэтому я придумал этот метод здесь.При выборе контроля времени сначала активируйте функцию для предварительной обработки и сначала обработайте данные.Поскольку время здесь является обязательным, проблем со временем нет.Если вы не выбираете время , Здесь this.photoinfo.starttime.lengthпоявится подсказка для ввода времени.

Но есть еще одна проблема на этом пути, то есть выбирать канал после того, как выбрано время, и, наконец, канал печати на один шаг медленнее.По той же методике канал не является обязательным, поэтому здесь мы должны судить опять же, через канал Входящий 2 оценивает.Здесь есть две ситуации, с которыми нужно иметь дело.Один-сначала выбрать время, а другой-сначала выбрать канал.Если канал выбран первым, нет необходимости прямой возврат, но если время выбрано первым, выбор Канал должен повторно обновить данные.Просто используйте значение времени напрямую.Если вы можете получить его, это означает, что это время, которое вы выбрали первым.

Обратите внимание на важную логику: экспортируемое событие размещается на кнопке, а экспортируемые данные — на изменении значения контроля времени.
Разобравшись с этим, вы можете вызвать фоновый интерфейс для получения данных, передать его сразу после получения данных printи оценить, пусто ли оно, если оно пусто, оно выскочит, как будто в этот период времени данных нет. , тут тоже можно напрямую судить Данные возвращаемые бэкендом одинаковые.

Теперь получите внутренние данные и убедитесь, что данные есть, запишите данные в печать и измените их формат.

Подведем итог

Вот ловушка, на которую следует обратить внимание: в настоящее время я не видел в Интернете ничего, что упоминало бы об этом.Когда экспортируемые данные являются динамическими данными, если поля определены в данных, то окончательные экспортируемые данные являются последними данными, поэтому Мой метод заключается в том, чтобы сначала обновить данные после выбора соответствующей информации о проверке и обеспечить экспорт последних данных о проверке во время последующего экспорта.

Процесс экспорта таков:

сначала выберите канал

1. выберите канал
2. Значение канала изменяется для запуска функции, но функция ничего не делает
3. период отбора
4. Значение времени изменяется для обновления данных, здесь значение канала будет обновляться вместе
5. экспорт

Сначала выберите время

1. период отбора
2. Значение времени меняется и данные обновляются, но значение канала в это время пустое
3. выберите канал
4. Значение канала меняется, и данные снова обновляются.В это время значение канала будет приведено, а значение времени будет согласованным.
5. экспорт

Вышеизложенное - моя идея решения этого метода