웹 애플리케이션에 JavaScript 보고서 뷰어를 추가하는 방법

전제 조건

이 문서에서는 Visual Studio Code를 텍스트 편집기로 사용한다고 가정합니다.

이 블로그에서는 다음 단계에 따라 ARJS 애플리케이션에 VanillaJS 뷰어 구성요소를 추가하는 방법을 보여줍니다.

Setting Up the Vanilla JS Application in VS Code

Installing the ARJS Dependencies

Adding the Host Element for the Viewer Component

Creating a Report File

Initializing the Viewer Component

Running the Project

소개

ActiveReportsJS는 프레임워크에 관계없이 프런트 엔드 애플리케이션에 쉽게 통합할 수 있는 100% 클라이언트 측 보고 솔루션입니다. 이 문서는 ActiveReportsJS 뷰어 구성 요소를 Vanilla JS 애플리케이션에 통합하는 방법에 대한 간단하면서도 포괄적인 가이드를 제공합니다.

VS Code에서 Vanilla JS 애플리케이션 설정

If you don’t already have a JavaScript project created, you can start by creating a folder named ARJS-viewer-app. If you’d like to do this through the Visual Studio Code terminal, you can create the folder by running the following command:

   mkdir ARJS-viewer-app

Afterward, within VS Code, select File > Open Folder and select ARJS-viewer-app to open the directory. Now that we’re in the right place, we can type this command to create the index.html file:

    touch index.html

Now that we have the file created, we can paste the following boilerplate code into it:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <title>ARJS VanillaJS Viewer Application</title>
        <meta name="description" content="VanillaJS Report Viewer" />
        <meta name="author" content="GrapeCity" />
      </head>
      <body></body>
    </html>

ARJS 종속성 설치

Since we just created a simple HTML page for this walkthrough, the easiest way to include the ActiveReportsJS dependencies is by adding script tags that reference the GrapeCity CDN. We will include scripts that reference ar-js-core, ar-js-viewer, and other export packages to make everything function correctly. We will also include links to the CSS styles used for the default viewer and UI components. Paste the following code into the head of your HTML:

    <link
      rel="stylesheet"
      href="https://cdn.grapecity.com/activereportsjs/3.2.0/styles/ar-js-ui.css"
      type="text/css"
    />

    <link
      rel="stylesheet"
      href="https://cdn.grapecity.com/activereportsjs/3.2.0/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>
    <script src="https://cdn.grapecity.com/activereportsjs/3.2.0/dist/ar-js-html.js"></script>

When working with larger or more complex applications, it is possible to install the references through the node package manager. For more information, please read through our installation documentation .

뷰어 구성 요소에 대한 호스트 요소 추가

We will now add a div element to our HTML that will host the viewer component. For now, let’s paste the following code inside of our body tags:

    <div id="viewer-host"></div>

We can also add styling for this element so that it takes up the full width and height of the browser window. For this tutorial, we can just add the CSS in the head tag at the top of the page:

    <style>
      #viewer-host {
        width: 100%;
        height: 100vh;
      }
    </style>

보고서 파일 생성

Since ARJS uses report files that have the .rdlx-json extension, we can design a report through the Standalone Report Designer , 파일을 만들고 JSON 구문으로 구성하거나 Core API 을 사용하여 프로그래밍 방식으로 파일을 생성합니다. 이 자습서에서는 파일을 만들고 일부 JSON을 붙여넣습니다. 시작하려면 다음 명령을 VS Code 터미널에 붙여넣습니다.

    touch report-test.rdlx-json

앞에서 언급했듯이 이제 JSON 구문을 사용하여 보고서 구조를 만들 수 있습니다. 다음 코드로 시작하여 기본 보고서 파일을 생성해 보겠습니다.

    {
      "Name": "Report-test",
      "Body": {
        "ReportItems": [
          {
            "Type": "textbox",
            "Name": "textBox1",
            "Value": "Thanks for reading the article!",
            "Style": {
              "FontSize": "20pt"
            },
            "Width": "8.5in",
            "Height": "1in"
          }
        ]
      }
    }

뷰어 구성 요소 초기화

Now that we have added the #viewer-host div to our file and the appropriate styling, the next step is to initialize the report viewer component within JavaScript code. At the bottom of the index.html file’s body element, add this script. This will tell the viewer where to live on the page, as well as what report to render to the browser:

    <script>
      var viewer = new ActiveReports.Viewer("#viewer-host");
      viewer.open("report-test.rdlx-json");
    </script>

프로젝트 실행

Per our documentation, you can use the http-server package to test the application on localhost. To install the npm package globally, run the following command in the same VS Code terminal:

    npm install -g http-server

After it’s installed, run the ‘http-server’ command to create a local server on your machine. In the terminal, there will be a guide on how to access your file with a specific port number. In a web browser, navigate to the provided URL, such as ‘localhost:80’.

If all goes well, you should see the viewer component on the page and the report you created through JSON.

최종 점수

이 안내서를 진행하는 동안 예상대로 진행되지 않은 경우 당사JavaScript integration guide를 찾아보십시오. 이 평범한 ARJS 뷰어 응용 프로그램을 만들었으므로 이제 우리의 viewer themes 및 toolbar customization을 추가로 실험하고 코드를 통해 보고서를 만드는 방법에 대한 단계에 대해 우리의 in-depth API을 읽거나 확인하십시오. localization options 우리가 제공합니다.

항상 ActiveReportsJS를 이용해 주셔서 감사합니다!

Reference

이 문제에 관하여(웹 애플리케이션에 JavaScript 보고서 뷰어를 추가하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/grapecity/how-to-add-a-javascript-report-viewer-to-your-web-application-57j5

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)