리포트 미리보기 없이 PDF파일로 내보내는 방법

PureJS 리포트 미리보기 없이 PDF파일로 내보내는 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2023-04-20 14:58 조회 348회 댓글 0건

본문

첨부파일

InvoiceReports.rdlx-json (30.5K)

관련링크

사용자는 때로는 이미 정해져 있는 화면을 굳이 미리 보지 않고 빠르게 파일로 저장하고 싶어합니다.

ActiveReportsJS에는 뷰어 화면 없이 다양한 파일 형태로 내보내서 저장하는 기능을 제공하고 있습니다.

현재 ActiveReportsJS는 PDF, HTML, Tabular Data (CSV 형식) 타입으로 내보내기가 가능합니다.

* 엑셀(XLSX)타입으로도 내보내기가 가능합니다.
다만 엑셀 타입은 JavaScript의 지원에 한계 때문에 추가적인 기능 개선이 불가능하며 V2 당시 개발되었던 버전으로만 사용 가능한 점 양해 부탁 드립니다.

아래는 실제 동작하는 샘플 애플리케이션으로,

웹 페이지 상의 "PDF로 내려받기" 버튼을 누르면 ActiveReportsJS 디자이너로 만든 리포트를 사용자에게 화면을 보여주지 않고도 PDF로 내려받을 수 있도록 지원할 수 있습니다.

> 미리보기 없이 리포트 PDF 파일로 내보내기 - 샘플 애플리케이션 실행

이번 포스팅에서는 ActiveReports v4 버전을 기준으로,

뷰어 없이 PDF 파일을 내보내는 방법을 설명 드리겠습니다.

1. ActiveReportJS 라이브러리 선언하기

"PDFTest.html" 이라는 파일을 만들어 시작하겠습니다.

우선 html 파일의 헤더 부분에 아래와 같이 필요한 참조 파일들을 추가합니다.

<link
  rel="stylesheet"
  href="https://cdn.grapecity.com/activereportsjs/3.latest/styles/ar-js-ui.css"
  type="text/css"
/>
<link
  rel="stylesheet"
  href="https://cdn.grapecity.com/activereportsjs/3.latest/styles/ar-js-viewer.css"
  type="text/css"
/>
<script src="https://cdn.grapecity.com/activereportsjs/3.2.0/dist/ar-js-core.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.2.0/dist/ar-js-viewer.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.2.0/dist/ar-js-pdf.js"></script>

여기에서는 CDN 방식을 사용했지만,

실제 개발 시에는 로컬 파일에서 ActiveReportsJS 라이브러리를 가져오는 것을 권장드립니다.

2. PDF 내보내기 버튼 생성

이제 body 내부에 버튼을 하나 만들고 해당 버튼을 클릭했을 때 ExportPDF()라는 함수가 실행되게 합니다.

<button onclick="ExportPDF()">Export PDF</button>

3. PDF 내보내기 함수 및 옵션 생성하기

script 태그 내부에 아래와 같이 ExportPDF 함수를 작성해 줍니다.

async function ExportPDF() {
  // PDF 내보내기 옵션 설정
  const pdfExportSettings = {
    title: "ActiveReportsJS Sample",
    author: "GrapeCity",
    subject: "Web Reporting",
    keywords: "reporting, sample",
    userPassword: "pwd",
    ownerPassword: "ownerPwd",
    printing: "none",
    copying: false,
    modifying: false,
    annotating: false,
    contentAccessibility: false,
    documentAssembly: false,
    pdfVersion: "1.7",
    autoPrint: false,
    filename: "ActiveReportsJS-Sample.pdf",
  };

  // 작성한 리포트 불러오기
  const report = new GC.ActiveReports.Core.PageReport();
  await report.load("CustomersTable.rdlx-json");

  // PDF 파일로 만들어 저장하기
  const doc = await report.run();
  const result = await GC.ActiveReports.PdfExport.exportDocument(doc, pdfExportSettings);
  result.download("exportedreport.pdf");
}

위 코드에 대해 설명하자면, 먼저 PDF 파일의 정보를 세팅해야 합니다.

아래 링크를 통해 세팅 옵션들에 대해 자세히 알아보실 수 있습니다.