프로젝트 시나리오:

프로젝트 시나리오: 현재 목록이 있고 이 기능은 시간과 채널을 필터링할 수 있으며 필터링된 데이터에는 목록에 렌더링되는 주문 번호 필드가 포함됩니다.시간 채널에 따라 모든 주문 번호를 필터링한 다음 필터링해야 합니다. 모든 주문 아니요. Excel로만 내보냅니다.

이 기능도 처음에 인터넷에서 찾았는데 적용이 잘 안 되어서 제 해결 방법을 공유합니다.
注：这里只提供思路及方法，直接复制就无法使用的，因为涉及到其他的组件（时间，渠道）就没有放全代码了,建议参考一下思路，然后用自己的方法来实现会比复制粘贴更好，授人以鱼不如授人以渔这个道理相信大家都懂。

효과

여기에 이미지 설명 삽입

내보내기를 클릭하면 해당 데이터를 바로 다운로드하게 되는데 헤더는 헤더(사용자 지정 가능), TrackingNo(필수)는 주문 번호 아래 내보낸 데이터, Starttime(필수): 시작 시간, Endtime(필수): 종료 시간 , 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'))
        }
      })
    },
	}
}

필드 설명

클래스: 클래스
data: 이 데이터는 인쇄해야 하는 데이터입니다.
필드: 인쇄 형식
유형: 내보내기 유형
헤더: 헤더
이름: 내보낸 파일의 이름
스타일: 스타일

로직 구현

우선 시간선택컨트롤과 채널컨트롤이 있는데요, 이 컨트롤들의 값이 변하면 GetJsonFileds함수가 발동되어 어떤 값을 가져오는데 이것이 채널인지 시간인지를 증명해주는 값입니다. 나중에 사용.

제가 왜 이렇게 했는지 먼저 말씀드리자면, 작업을 마치고 나서 아주 심각한 문제를 발견했습니다. 즉, 이 내보내기의 논리는 내부의 값을 읽어서 내보내는 것이기 때문에 문제가 있을 것 data입니다 fields. is 데이터 업데이트는 내보내기 이후이므로 내보낸 데이터가 비어 있고 내보낼 수 없거나 마지막 데이터입니다.

그래서 이 방법의 아이디어는 이렇습니다. 시간 제어를 선택할 때 먼저 전처리 기능을 트리거하고 데이터를 먼저 처리합니다. 여기서는 시간이 필수이기 때문에 시간에 문제가 없습니다. 그렇지 않으면 시간을 선택하면 여기에서 this.photoinfo.starttime.length시간을 입력하라는 프롬프트가 바로 나타납니다.

그런데 이 방식은 또 다른 문제가 있는데, 즉 시간을 선택한 후 채널을 선택하게 되고 결국 인쇄 채널이 한 단계 느려지는 것과 같은 방식으로 채널이 필수가 아니므로 여기서 판단을 하게 된다. 다시, 채널을 통해 들어오는 2가 판단합니다. 여기서 처리해야 할 두 가지 상황이 있습니다. 하나는 시간을 먼저 선택하는 것이고 다른 하나는 채널을 먼저 선택하는 것입니다. 채널을 먼저 선택하면 필요가 없습니다. 직접 반환하지만 시간을 먼저 선택한 경우 선택 채널에서 데이터를 다시 업데이트해야 합니다.

여기서 중요한 논리에 주목하십시오. 내보낸 이벤트는 버튼에 배치되고 내보낸 데이터는 시간 제어 값의 변경에 배치됩니다.
이를 처리한 후 백그라운드 인터페이스를 호출하여 데이터를 가져오고 데이터를 가져온 후 직접 전달할 수 있으며 print비어 있는지 판단하고 비어 있으면 이 기간 동안 데이터가 없는 것처럼 튀어나옵니다. , 여기에서 직접 판단할 수도 있습니다. 백엔드에서 반환된 데이터는 동일합니다.

이제 백엔드 데이터를 가져오고 데이터가 있는지 확인하고 데이터를 인쇄에 쓰고 형식을 수정하십시오.

요약하다

여기에 주의해야 할 함정이 있습니다: 현재 인터넷에서 이것을 언급하는 것을 본 적이 없습니다.내보낸 데이터가 동적 데이터일 때 필드가 데이터에 정의되어 있으면 최종 내보낸 데이터가 마지막 데이터이므로 여기서 제가 하는 방법은 해당 스크리닝 정보를 선택한 후 데이터를 먼저 업데이트하고 후속 내보내기 시 최신 스크리닝 데이터를 내보내는 것입니다.

내보내기 프로세스는 다음과 같습니다.

먼저 채널 선택

채널 선택
함수를 트리거하기 위해 채널 값이 변경되지만 함수는 아무 작업도 수행하지 않습니다.
선발 기간
데이터를 업데이트하기 위해 시간 값이 변경됩니다. 여기서 채널 값이 함께 업데이트됩니다.
내보내다

먼저 시간을 선택하십시오

선발 기간
시간의 값이 바뀌고 데이터가 갱신되지만 이때 채널의 값은 비어있다.
채널 선택
채널 값이 바뀌고 데이터가 다시 업데이트되며 이때 채널 값이 가져오고 시간 값은 일정합니다.
내보내다

위는 이 방법을 해결하기 위한 나의 생각이다.

vue + vue-json-excel Excel 만들기 및 내보내기