[Angular] 엑셀출력

Taeho·2022년 7월 30일

Angular

목록 보기
2/4

1) package 설치

npm i xlsx --save
2) 소스 수정

1) portfolio-list.component.html
excel 출력 대상 테이블에 id 추가

<table class="table table-striped" id="portfolio_list">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col" sortable="sector" (sort)="onSort($event)">경기순환/섹터</th>
        <th scope="col" sortable="ticker" (sort)="onSort($event)">티커</th>
        <th scope="col" sortable="currentPrice" (sort)="onSort($event)">현재가</th>
        <th scope="col" sortable="declineRate" (sort)="onSort($event)">최고가Vs하락률</th>
        <th scope="col" sortable="w52" (sort)="onSort($event)">최저-52주-최고</th>
        <th scope="col" sortable="unitPrice" (sort)="onSort($event)">매수단가</th>
        <th scope="col" sortable="stockNum" (sort)="onSort($event)">주식수</th>
        <th scope="col" sortable="totalTradingAmount" (sort)="onSort($event)">매수금액</th>
        <th scope="col" sortable="evalAmount" (sort)="onSort($event)">평가금액</th>
        <th scope="col" sortable="earningAmount" (sort)="onSort($event)">수익금액</th>
        <th scope="col" sortable="earningRate" (sort)="onSort($event)">수익률</th>
        <th scope="col" sortable="annualPayout" (sort)="onSort($event)">주당배당금</th>
        <th scope="col" sortable="totalPayout" (sort)="onSort($event)">총배당금</th>
        <th scope="col" sortable="investmentDivYield" (sort)="onSort($event)">투자배당률</th>
        <th scope="col" sortable="dividendPayMonth" (sort)="onSort($event)">배당주기</th>
        <th scope="col" sortable="portion" (sort)="onSort($event)">비중</th>
      </tr>
    </thead>
   
    <tbody>
      <tr *ngFor="let item of portfolioStocks$ | async"
          (dblclick)="rowDoubleClick($event, item.index)">
        <th scope="row">{{ item.index }}</th>
        <td><ngb-highlight [result]="item.sector" [term]="service.searchTerm"></ngb-highlight></td>
        <td><ngb-highlight [result]="item.ticker" [term]="service.searchTerm"></ngb-highlight></td>
        <td><ngb-highlight [result]="item.currentPrice | number" [term]="service.searchTerm"></ngb-highlight></td>
        <td><ngb-highlight [result]="item.declineRate | number" [term]="service.searchTerm"></ngb-highlight></td>
        <td><ngb-highlight [result]="item.w52" [term]="service.searchTerm"></ngb-highlight></td>
        <td><ngb-highlight [result]="item.unitPrice | number" [term]="service.searchTerm"></ngb-highlight></td>
        <td><ngb-highlight [result]="item.stockNum | number" [term]="service.searchTerm"></ngb-highlight></td>
        <td><ngb-highlight [result]="item.totalTradingAmount | number" [term]="service.searchTerm"></ngb-highlight></td>
        <td><ngb-highlight [result]="item.evalAmount | number" [term]="service.searchTerm"></ngb-highlight></td>
        <td><ngb-highlight [result]="item.earningAmount | number" [term]="service.searchTerm"></ngb-highlight></td>
        <td><ngb-highlight [result]="item.earningRate | number" [term]="service.searchTerm"></ngb-highlight></td>
        <td><ngb-highlight [result]="item.annualPayout | number" [term]="service.searchTerm"></ngb-highlight></td>
        <td><ngb-highlight [result]="item.totalPayout | number" [term]="service.searchTerm"></ngb-highlight></td>
        <td><ngb-highlight [result]="item.investmentDivYield | number" [term]="service.searchTerm"></ngb-highlight></td>
        <td><ngb-highlight [result]="item.dividendPayMonth" [term]="service.searchTerm"></ngb-highlight></td>
        <td><ngb-highlight [result]="item.portion | number" [term]="service.searchTerm"></ngb-highlight></td>
      </tr>
    </tbody>
  </table>

2) portfolio.component.html
엑셀 버튼에 이벤트 달기

<button type="button" class="btn btn-outline-primary m-1" (click)="issueExcel()">Excel</button>

3) portfolio.component.ts

import * as XLSX from 'xlsx';
...

  issueExcel(): void {
    let fileName= 'ExcelSheet.xlsx';
    let element = document.getElementById('portfolio_list');
    const ws: XLSX.WorkSheet = XLSX.utils.table_to_sheet(element);

    /* generate workbook and add the worksheet */
    const wb: XLSX.WorkBook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
 
    /* save to file */  
    XLSX.writeFile(wb, fileName);

  }

참고자료

How to Export Data to Excel File in Angular Application

profile
한걸음 더 내딛는 개발자

0개의 댓글