Skip to content

Latest commit

 

History

History

10

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 
pic-1.png
pic-1.png
 
 

README.md

리얼리포트 연동하기

리얼리포트 기본 코드 준비

리얼리포트 기본 코드 복사

아래 링크를 클릭하고 기본 코드를 다운받고 압축을 해제합니다.

라이브러리 파일 복사

  • 다운받은 기본코드 폴더에서 index.html을 제외한 나머지 파일을 Vue의 public 폴더로 복사합니다.

index.html 수정

<!DOCTYPE html>
<html lang="">
    <head>
        ...
        <script type="text/javascript" src="/js/pdfkit.js"></script>

        <link href="/highcharts/highcharts.css" rel="stylesheet" />
        <script src="/highcharts/highcharts.js"></script>
        <script src="/highcharts/highcharts-more.js"></script>

        <link href="/realreport/realreport.css" rel="stylesheet" />
        <script src="/realreport/realreport-lic.js"></script>
        <script type="text/javascript" src="/realreport/realreport.js?v=4"></script>

        <script src="/fonts/malgun.js"></script>
        <script src="/fonts/malgun-bold.js"></script>

        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
        ...
    </body>
</html>

RealReport 콤포넌트 추가

리얼리포트 폼 파일 추가

급여명서세 리포트 문서 파일입니다.

리얼리포트 데이터 파일 추가

급여명서세 출력 데이터입니다.

Rest API 추가 (급여 데이터 가져오기)

급여 명세서 출력 메뉴 추가

components/SideMenu.vue 수정

<template>
    <div class="title-area">
        <router-link to="/">
            <h3 class="title-text">Dashboard</h3>
        </router-link>

        <div class="client">
            ...
                <el-menu-item-group title="리포트">
                    <el-menu-item index="/report/member/salary/monthly">
                        <i class="fas fa-list-alt"></i>
                        <span>급여명세서</span>
                    </el-menu-item>
                </el-menu-item-group>
            </el-menu>
        </div>
    </div>
</template>
...

라우터 수정

...
const routes = [
    ...
    {
        path: '/report/member/salary/monthly',
        component: () => import('@/views/report/member/SalaryMonthly.vue')
    },
]
...

급여명서세 리포트 구현 (report/member/SalaryMonthly.vue)

<template>
    <RealReport ref="realReport" />
</template>

<script>
import RealReport from '@/components/RealReport';
import salary from '@/api/salary';
import salaryMonthly from '@/report/salaryMonthly';

export default {
    components: {
        RealReport
    },

    mounted() {
        salary.monthly()
            .then((response) => {
                this.$refs.realReport.preview(salaryMonthly, response.data);
            })
            .catch((e) => {
                console.log(e);
            });
    },
};
</script>