다음을 통해 공유

Vue 애플리케이션에 Power BI 콘텐츠 포함

Vue는 프런트 엔드 사용자 인터페이스 및 웹 사이트를 빌드하기 위한 JavaScript 프레임워크입니다. Vue 구성 요소를 사용하면 Vue 애플리케이션에 Power BI 콘텐츠를 간단히 포함할 수 있으므로 Vue 및 Power BI 포함을 최대한 활용할 수 있습니다.

Power BI vue.js 라이브러리를 사용하면 Vue 애플리케이션에 다음 Power BI 항목을 포함할 수 있습니다.

  • 보고서
  • 대시보드
  • 대시보드 타일
  • 보고서 시각적 개체
  • Q&A 문의
  • 페이지를 매긴 보고서

Vue 웹앱에 Power BI 콘텐츠를 포함하는 방법

이 섹션에서는 Vue를 앱으로 가져오고 이를 사용하여 Power BI 보고서를 포함하는 방법을 설명합니다.

자세한 사용 정보는 Power BI Vue 추가 정보 파일을 참조하세요.

Vue 라이브러리 가져오기

NPMPower BI Vue 구성 요소를 찾을 수 있습니다. 또한 GitHub오픈 소스입니다.

Vue를 웹앱으로 가져오려면 아래에 나열된 가져오기를 추가합니다.

import { PowerBIEmbedModule } from 'powerbi-client-vue-js';

Vue를 사용하여 보고서 포함

이 예제에서는 Vue를 사용하여 Power BI 보고서를 포함하는 방법을 보여줍니다. 예제 아래에는 코드 샘플의 각 구성 요소에 대한 설명이 있습니다.

<powerbi-report
    [embedConfig] = {{
        type: "report",
        id: "<Report Id>",
        embedUrl: "<Embed Url>",
        accessToken: "<Access Token>",
        tokenType: models.TokenType.Embed,
        settings: {
            panes: {
                filters: {
                    expanded: false,
                    visible: false
                }
            },
            background: models.BackgroundType.Transparent,
        }
    }}

    [cssClassName] = { "reportClass" }

    [phasedEmbedding] = { false }

    [eventHandlers] = {
        new Map([
            ['loaded', () => console.log('Report loaded');],
            ['rendered', () => console.log('Report rendered');],
            ['error', (event) => console.log(event.detail);]
        ])
    }
>
</powerbi-report>

다음 목록에는 코드 조각 예제의 각 구성 요소에 대한 설명 또는 추가 정보가 포함되어 있습니다.

  • embedConfig - 포함할 콘텐츠를 정의하고 콘텐츠의 설정을 지정합니다. 다음 Power BI 항목을 포함하면 포함 구성이 변경됩니다.

  • cssClassName - 포함된 항목에 CSS를 사용하여 포함된 iframe의 스타일을 제어할 수 있는 CSS 클래스 이름을 제공합니다.

  • phasedEmbedding - 개발자에게 보고서 포함을 단계화할 수 있는 유연성을 제공하여 최종 사용자의 환경을 개선합니다. 자세한 내용은 단계별 포함 사용을 참조하세요.

  • eventHandlers - 이벤트 이름 및 해당 처리기에 대한 맵 개체입니다. 자세한 내용은 이벤트 처리하는 방법을 참조하세요.

Power BI 보고서 부트스트랩

powerbi.bootstrap 개발자가 Power BI 항목을 더 빠르게 포함하고 성능을 향상하는 데 도움이 되는 방법입니다. 자세한 내용은 성능 향상을 위해 부트스트랩 사용을 참조하세요.

<powerbi-report
    [embedConfig] = {{
        type: "report",
        id: undefined,
        embedUrl: undefined,
        accessToken: undefined, // Keep as empty string, null or undefined
        tokenType: models.TokenType.Embed,
        hostname: "https://app.powerbi.com"
    }}
>
</powerbi-report>

부트스트래핑 후 보고서를 포함하려면 embedConfig(accessToken 및 embedUrl 이상 포함)를 업데이트합니다.

Vue 데모

Vue 리포지토리에는 PowerBIReportEmbed 구성 요소를 사용하여 샘플 보고서를 포함하는 데모가 포함되어 있습니다. 보고서를 부트스트래핑하는 것부터 포함된 보고서를 포함하고 업데이트하는 것까지의 전체 흐름을 보여 줍니다. 또한 사용자가 시각적 개체 유형 변경 단추를 사용하여 보고서에서 시각적 개체 유형을 변경할 수 있도록 하여 powerbi 보고서 작성 라이브러리를 사용하는 방법을 보여 줍니다. 또한 'DataSelected' 이벤트를 설정합니다.

자세한 내용은 추가 정보 파일의 데모 섹션을 참조하세요.

Power BI Vue 데모를 보여 주는 애니메이션 GIF입니다.

데모 실행

데모는 리포지토리의 하위 폴더입니다. localhost에서 데모를 실행하려면 다음 단계를 수행합니다.

  1. 다음 명령을 실행합니다.

    npm run demo

  2. 브라우저에서 보려면 http:/localhost:3000/리디렉션합니다.

관련 콘텐츠