ng2-handsontable beforeCopy Angular2 +

Question

사용자가 ng2 핸즈프리의 데이터를 복사 할 때 열 머리글을 추가하려고합니다. Before 복사 이벤트가 발생하고 이벤트의 데이터를 변경할 수 있지만 클립 보드에 복사 된 내용은 변경되지 않습니다.

는

https://docs.handsontable.com/pro/1.14.2/Hooks.html#event:beforeCopy

이것은 내가 처음 작업을 얻으려고 노력하고있는 단순화 된 버전입니다. 저는 항상 4 열 모두를 선택하고 있습니다.

private beforeCopy(e: any) { 
    // e[0] is an array of the data 
    // e[1] is an array of the coords 
    e[0][0][0] = "test"; 
} 

두 기능을 수행하지만, 결국 클립 보드의 데이터는 편집되지 않은 데이터입니다 : 모든 데이터를 변경할 수있는 경우

private beforeCopy(e: any) { 
    // e[0] is an array of the data 
    // e[1] is an array of the coords 
    var headers = ["Step 1", "Step 2", "Step 3", "Step 4"]; 
    e[0] = [headers, ...e[0]]; 
    e[1][0] = { endCol: headers.length-1, endRow: e[0].length-1, startCol: 0, startRow: 0}; 
} 

슈퍼 간단한 버전을 테스트합니다.

Answer 1

각도 이벤트는 방향이 하나이므로 이벤트 자체에서 데이터를 편집해도 이벤트를 만든 구성 요소는 업데이트되지 않습니다. 테이블 헤더를 복사하는 몇 가지 해결책을 찾았습니다.

1. 머리글과 큰 머리글 행을 제거하십시오. 그런 다음 사용자 정의 셀 렌더링을 사용하여 해당 행을 읽기 전용으로 설정하면 표준 ctrl + a, ctrl + c가 모든 데이터를 복사하고 헤더를 포함합니다. https://docs.handsontable.com/0.15.0/demo-custom-renderers.html
2. copy 함수를 직접 작성하고 afterCopy() 함수에서 호출하여 복사 함수를 재정의하십시오. 지원해야하는 브라우저에 따라 어렵습니다.
3. 내 사용자가 Excel에 데이터를 붙여 넣기 때문에 CSV 함수로 내보냈습니다. 그것은 GetData의() 다음과 같은 포스트를 사용하여 오히려 쉬웠다 : How to export JavaScript array info to csv (on client side)?

private export():void { 
 
     var data:any = this.hot.getHandsontableInstance().getData(); 
 
     var csvContent:string = "data:text/csv;charset=utf-8,"; 
 
     csvContent += [...headers] + "\n"; 
 
     data.forEach(function (infoArray:any, index:number):void { 
 
      var dataString:string = infoArray.join(","); 
 
      csvContent += index < data.length ? dataString + "\n" : dataString; 
 
     }); 
 
     var encodedUri:any = encodeURI(csvContent); 
 
     var link:any = document.createElement("a"); 
 
     link.setAttribute("href", encodedUri); 
 
     link.setAttribute("download", "data.csv"); 
 
     document.body.appendChild(link); // required for FF 
 
     link.click(); 
 
    }