문서
리포트 뷰어
07. 내보내기

07. 내보내기

⚠️

내보내기를 할 때는 페이지 배율 값이 100%일 때만 가능합니다.
미리 보기 화면에서 확대, 축소를 사용하여 100%가 아닌 상태에서 내보내기를 하는 경우 100%로 맞춰주거나 내보내기를 하기 전에 아래와 같이 zoom 속성이 1로 설정되어 있어야 합니다.

viewer.zoom = 1;

미리보기 확대/축소

이미지 내보내기

RealReport는 여러 가지 이미지 포멧으로 내보내기 할 수 있습니다. 이미지를 내보내기 위해 exportImage 함수를 사용합니다. 이 함수의 유일한 인자는 ImageExportOptions이며 type 속성에 내보낼 이미지 포멧을 지정할 수 있습니다.

현재 RealReport에서 지원하는 이미지 내보내기 형식은 아래와 같습니다.

png, jpeg, jpg, gif, tif, tiff

png

viewer.exportImage({ type: 'png' });
 
viewer.exportImage({
    type: 'png',
    fileName: 'SampleImage',
    zipName: 'SampleZip',
});

이미지 내보내기 결과 폴더 예

이미지

jpeg

viewer.exportImage({ type: 'jpeg' });

gif

viewer.exportImage({ type: 'gif' });

tif

viewer.exportImage({ type: 'tif' });

tiff

viewer.exportImage({ type: 'tiff' });
 
viewer.exportImage({
    type: 'tiff',
    tiff: {
        encoding: 'g3'
    }
});

PDF 내보내기

PDF 파일로 다운받기

⚠️

v1.4.0에서 exportPdf 함수의 인자가 fonsts: PdfFont[] 에서 options: PdfExportOptions로 변경되었습니다. 이전 버전에서 입력한 fonts를 {fonts: fonts} 또는 {fonts} 형식으로 입력해야 합니다. 또한, PdfExportOptions 인자타입에는 filename을 넘겨 사용자가 원하는 파일명으로 pdf 를 내보내기 할 수 있습니다.

PDF 내보내기를 위해 폰트객체가 정의되어 있는 폰트 파일을 가져옵니다.

<script src="js/pdffonts/malgun.js"></script>
<script src="js/pdffonts/malgun-bold.js"></script>
var pdfFonts =[{
    name: 'regular',
    content: malgun,
    style: 'normal',
    weight: 'normal',
},
{
    name: 'bold',
    content: malgunBold,
    style: 'normal',
    weight: 'bold',
}];
 
viewer.exportPdf({fonts: pdfFonts, filename: 'sample-pdf-filename.pdf'});

PDF 내보내기시 PDF 파일명은 Report 의 name 속성의 값으로 결정됩니다. 아래양식의 리포트를 PDF 내보내기 할 경우 Sample Report.pdf 라는 이름의 파일로 다운로드 됩니다.

...
document.addEventListener('DOMContentLoaded', function () {
    viewer = new RealReport.ReportViewer('reportContainer', {
        name: 'Sample Report',
        page: {
            pageHeader: {
                items: [{
                    type: 'text',
                    text: '리포트 제목',
                    height: '100px',
                    width: '100%',
                    styles: {
                        fontSize: '25px',
                        fontWeight: 'bold',
                        ...

Blob (opens in a new tab) 형식의 PDF 데이터로 반환받기

var pdfFonts =[{
    name: 'regular',
    content: malgun,
    style: 'normal',
    weight: 'normal',
},
{
    name: 'bold',
    content: malgunBold,
    style: 'normal',
    weight: 'bold',
}];
 
viewer.exportPdfBlob({ fonts: pdfFonts })  
  .then((pdfBlob) => {  
    // PDF 데이터 활용 코드  
  }).catch((error) => {  
    // 에러 처리 코드  
  });  

PDF 내보내기 시, 더 자세한 옵션은 API 문서에서 PDFExportBlobOptions를 참고하세요.

문서 내보내기

hwp

viewer.exportDocument({ type: 'hwp' });

docx

viewer.exportDocument({ type: 'docx' });

pptx

viewer.exportDocument({ type: 'pptx' });
⚠️

pptx 내보내기는 멀티 페이지 리포트를 지원하지 않습니다.


💡

가이드에 사용된 전체 코드는 RealReport Example 코드 저장소에 있습니다. 아래 링크를 클릭하면 코드를 확인할 수 있습니다. https://github.com/realgrid/realreport-examples/tree/main/report-guide (opens in a new tab)

️🔥

ReportCompositeViewer는 ReportViewer와 거의 동일한 기능을 갖습니다. 하지만, 내보내기 기능은 아직 구현 되지 않았지만, 빠른시일 내에 구현될 예정입니다.