! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

wijmo.pdf 내보내기 > Q&A | 토론

본문 바로가기

ReactJS wijmo.pdf 내보내기

페이지 정보

작성자 성희 작성일 2023-10-16 13:40 조회 438회 댓글 0건
제품 버전 : 5.20213.824
컨트롤 이름 : wijmo.pdf

본문

https://demo.grapecity.co.kr/wijmo/learn-wijmo/PDF/PageStructure/react

참조하여 그리드가 아니라 그냥 버튼으로 pdf 파일 내보내기 작업중인데 ,


한 pdf에 헤더 컬럼이 다른 여러 테이블을 넣고 싶습니다. 


그리고 병합되는 컬럼은 어떻게 넣나요?



궁극적으로는 아래 모양으로 pdf 내보내기 하는 것이 목표입니다. 

 

참고할 만한 예시가 있을까요?


 


  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

2 답변

ReactJS Re: wijmo.pdf 내보내기

추천0 이 글을 추천하셨습니다 비추천0

페이지 정보

작성자 GCK루시 작성일 2023-10-18 09:16 댓글 1건

본문

안녕하세요 그레이프시티입니다. 


문서의 path를 설정하여 그려주는 경우에는 병합된 영역에 대해서도 직접 width, height 등을 계산해서 설정해주셔야 합니다. 아래 간단한 샘플 코드 및 데모를 공유드리며 데모 코드의 exportPDF 함수를 아래 exportPDF 함수 코드를 변경하면 이미지와 같은 결과물을 얻을 수 있습니다.


- 표 그리기 데모 


exportPDF() {
        let doc = new pdf.PdfDocument({
        header: {
            height: 0
        },
        footer: {
            height: 0
        },
        ended: (sender, args) => pdf.saveBlob(args.blob, "Document.pdf")
        });
    //
    let colWidth = 100, rowHeight = 18, y = 0;
    //
    for (let i = 0; i < 10; i++) {
      for (let j = 0; j < 4; j++) {
        if (j === 0 && i === 1) {
          doc.paths.rect(j * colWidth, y, colWidth, rowHeight * 9).stroke();
        } else if (j === 0 && i === 0) {
          doc.paths.rect(j * colWidth, y, colWidth, rowHeight).stroke();
        }

        if (j === 1 && i % 3 === 1) {
          doc.paths.rect(j * colWidth, y, colWidth, rowHeight * 3).stroke();
        } else if (j === 1 && i === 0) {
          doc.paths.rect(j * colWidth, y, colWidth, rowHeight).stroke();
        }

        if (j === 2 && i === 0) {
          doc.paths.rect(j * colWidth, y, colWidth * 2, rowHeight).stroke();
        } else if ((j === 2 || j === 3) && i > 0) {
          doc.paths.rect(j * colWidth, y, colWidth, rowHeight).stroke();
        }
      }
      y += rowHeight;

      if (y >= doc.height) {
        y = 0;
        doc.addPage();
      }
    }
    doc.paths.rect(0, 300, colWidth * 4, rowHeight).stroke();
    doc.paths.rect(0, 318, colWidth * 4, rowHeight * 5).stroke();
    //
    doc.end();
}

<결과 화면>

d109c06577721dc351c96cf34b9d441b_1697588158_8294.png

 


다른 궁금한 점이 생기면 문의주시기 바랍니다.


감사합니다.

그레이프시티 드림

댓글목록

성희님의 댓글

성희 작성일

각 컬럼에 drawText 를 하고 싶으면 어떻게 넣어야 하나요? 
위치를 조정해서 넣었을때 text 길이가 컬럼보다 긴 경우 자동 줄바꿈이 아니라
옆 컬럼까지 넘어가서 텍스트가 중복되어 표시되는듯 합니다. 

ReactJS Re: wijmo.pdf 내보내기

추천0 이 글을 추천하셨습니다 비추천0

페이지 정보

작성자 GCK루시 작성일 2023-10-23 09:43 댓글 0건

본문

안녕하세요 그레이프시티입니다.


문의하신 내용과 관련하여 여러 다이나믹 데이터와 함께 그리드를 pdf로 내보내야 하는 상황이라면 코드가 복잡해질 수 있기 때문에 FlexGridPdfConverter를 이용하여 FlexGrid를 PDF 파일로 내보내는 방법을 추천드립니다. 아래 저희 데모를 공유드리오니 참고 부탁니다.


- FlexGrid를 파일로 내보내기


다른 궁금한 점이 생기면 문의주시기 바랍니다.


감사합니다.

그레이프시티 드림

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.