[{"id":"d404d4eb-0b25-4650-be78-033cc4aa3445","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"5f98443c-9d59-4351-81ad-0910eb2535e7","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"57569d12-0bea-4995-9743-1b5efb7dfda6","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"0d50ab1e-81c0-49b2-b8cb-1f50a6f3e12b","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"60452ec3-5f68-4e01-b8f0-22ea893bf4ce","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"938d62d7-9526-479f-9798-31d0f9f58588","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"d778e74c-622b-47d6-b0b1-32e741ee6d1a","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"3103635f-71c9-4a28-8786-45ae6de6a49f","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"61551de1-9a9f-4a08-b71e-49ca882827f5","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"50134b23-c8f4-4c83-8c49-4f7a4d307585","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"712bddae-c316-4524-add9-6dd487152146","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"74546345-b13f-4465-a716-7bc0f9c19730","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"8c3493e9-e62c-45b7-9268-825db731f79b","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"e588ca95-4aba-4e50-a99f-833a98531489","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"50e4fa24-000f-45f0-8f09-9026e40c30ca","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"ebf0ce82-0782-496c-bd66-90f5433e31f2","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"cc378615-c853-4f3e-994b-9a2260cc06a2","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"4a60e156-0f10-43a2-88bc-9d9691f15137","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"0a0c904c-bbb2-4abe-a626-a06200fb57fe","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"0d56fe97-9840-41da-931f-ad23201cd9e2","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"9e4f342b-5dcb-4548-a84c-afe71cf5d736","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"64f01bad-a9ca-47a2-b134-b485adffed2c","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"224e6263-b410-4f17-8822-e19f965c509d","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"c90cdefc-81dd-4d8d-b8fa-ed93585c4b23","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"5d5d62ca-5108-4421-a925-f2c187eb2aeb","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"afb74359-e66d-40e1-a5e2-f7a22468165d","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"cccfa340-c8a6-43ef-b2cd-f9fe44ce22dc","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]}]
        
(Showing Draft Content)

보고서 결과물의 인쇄와 내보내기

PageDocument 클래스

Executing a report 섹션에서 언급된 것 처럼, PageReport 인스터스의 run 메소드를 호출한 결과는 보고서 출력을 인쇄하고 내보낼수 있는 PageDocument class 의 인스턴스로 이행되는 Promise object 입니다.

보고서 결과물 인쇄

보고서 출력을 인쇄하는 프로세스는 보고서를 HTML로 내보내고 브라우저에 내장된 인쇄 미리 보기 UI에서 결과를 여는 방식으로 수행됩니다. PageDocument class 클래스의 print 메소드는 이 프로세스를 용이하게 하며 세 가지 선택적 인수를 옵션으로 제공합니다.

  • renderOptions – 인쇄의 경우, undefined으로 설정할 수 있습니다.

  • onProgress – 보고서의 각 페이지가 HTML로 렌더링된 후 호출되는 콜백 함수입니다. 렌더링된 페이지 수에 해당하는 단일 숫자 인수를 허용해야 합니다.

  • checkCancel – 보고서의 각 페이지가 렌더링된 후 호출되는 콜백 함수입니다. 인쇄 프로세스를 중단해야 하는지 여부를 나타내는 부울 값을 반환해야 합니다.

이러한 선택적 인수인 onProgress and checkCancel을 활용하여 인쇄 작업의 진행 상황을 표시하고 Cancel 버튼 클릭과 같은 특정 사용자 이벤트에 대한 응답으로 인쇄 작업을 취소할 수 있는 사용자 정의 사용자 인터페이스를 구현할 수 있습니다. 아래 코드는 보고서를 인쇄하고 진행 상황에 대한 정보를 콘솔로 보냅니다.

import {Core} from "@grapecity/activereports";

const report = new Core.PageReport();
await report.load(`assets/Products.rdlx-json`);
const document = await report.run();
document.print(undefined, x=>console.log(`${x} pages ready`), ()=>{
    return false;
});

보고서 결과물 내보내기

ActiveReportsJS API 를 사용하면 보고서 출력을 각각 PdfExport, HtmlExport, 그리고 TabularDataExport 개체를 제공하는PDF, HTML 또는 CSV 문서로 내보낼 수 있습니다.이들 모두는 Core library 의 일부입니다.

  import {
    PdfExport,
    HtmlExport,
    TabularDataExport,
  } from "@grapecity/activereports";

각 내보내기 개체는 다음 네 가지 인수가 있는 exportDocument 메서드를 제공합니다.

  • source – 위에서 설명한 PageDocument 클래스의 인스턴스입니다.

  • settings – 내보낸 문서의 설정입니다. 이 인수는 각 내보내기 유형에 따라 다릅니다.

  • onProgress – 보고서의 각 페이지를 내보낸 후 호출되는 콜백 함수입니다. 내보낸 페이지 수에 해당하는 단일 숫자 인수를 허용해야 합니다.

  • checkCancel – 보고서의 각 페이지가 렌더링된 후 호출되는 콜백 함수입니다. 내보내기 프로세스를 중단해야 하는지 여부를 나타내는 부울 값을 반환해야 합니다.

exportDocument 메소드는 각 내보내기 유형에 특정한 결과로 이행되는 Promise object를 반환합니다:

  • PDFExport.exportDocumentdownload 메소드를 사용하여 결과를 다운로드하거나 Blob 유형의 data 속성을 사용하여 결과를 저장할 수 있는 PdfExportResult object 사용하여 약속을 이행합니다.

  • HtmlExport.exportDocumentHtmlSettingsmultiPage속성 값에 따라 download 메서드를 사용하여 결과를 다운로드하거나 string 또는 Blobdata 속성을 사용하여 결과를 저장할 수 있는 HtmlExportResult object 를 사용하여 약속을 이행합니다.

  • TabularDataExport.exportDocumentTabularDataSettings.csvSettingsoutputType 속성 값에 따라 download 메서드를 사용하여 결과를 다운로드하거나 string 또는 Blobdata 속성을 사용하여 결과를 저장할 수 있는 TabularDataExportResult object 개체를 통해 약속을 이행합니다.

다음은 각 내보내기 유형에 대한 코드 예제입니다.

  import {
    PdfExport,
    HtmlExport,
    TabularDataExport,
  } from "@grapecity/activereports";

async function exportPdf(document: PageDocument){
  const pdfSettings: PdfExport.PdfSettings = {
      info: {
          title: "Product List"
      }
  }
  const result = await PdfExport.exportDocument(document, pdfSettings);
  result.download("products.pdf");
}

async function exportHtml(document: PageDocument){
   const htmlSettings: HtmlExport.HtmlSettings = {
       title: "Product List",
       multiPage: false        
   }
   const result = await HtmlExport.exportDocument(document, htmlSettings);
   result.download("products.html");
}

async function exportCSV(document: PageDocument){
   const csvSettings: TabularDataExport.TabularDataSettings = {
       csvSettings: {
           colSeparator: ","
       }
   }
   const result = await TabularDataExport.exportDocument(document, csvSettings);
   result.download("products.csv");
}

 async function onExport(){
    const report = new Core.PageReport();
    await report.load(reportUrl);
    var document = await report.run();
    exportHtml(document);
    exportCSV(document);
    exportPdf(document);
 }