박주니 개발 정리

엑셀 업로드시 특정 값 글자색 변경 본문

react

엑셀 업로드시 특정 값 글자색 변경

박주니 2023. 9. 10. 22:21
728x90
반응형

설명 이유)

보통 엑셀 업로드 기능을 관리자페이지에서 데이터를 시각적으로 필요한 데이터를 출력하기 위해 엑셀 업로드 기능을 만드는데 예를 들어서 결제 완료, 결제 대기등 색깔 구분을 하지 않으면 구분하기가 어렵습니다. 또한 exceljs 버전 업데이트에 따라서 richText 적용 방식이 달라진 부분도 있어서 공유하기 위해서 설명을 적게 되었습니다.

가운데 정렬이랑 테두리 설정하는 것은 chatgpt에 물어보면 그대로 붙여서 사용하시면 가능하기 때문에 따로 설명은 하지 않았습니다. 

 

참조 :

엑셀 업로드시 데이터 셋팅하는 방법 참고 (rowData)

richText 사용하실 때는 별도 설치하실 것은 없습니다.

 

rowData에서 특정값에 richText를 사용해서 색깔 구분을 합니다. 

          const rowData = [
            { value: "" }, // A열에 이미지 URL 값, 없으면 빈 문자열
            { value: asset[id]?.title || "" }, // 제품명 값, 없으면 빈 문자열
            { value: asset[id]?.start_price || "" }, // 시작가 값, 없으면 빈 문자열
            { value: asset[id]?.bid_price || "" }, // 시작가 값, 없으면 빈 문자열
            { value: asset[id]?.price_type || "" }, // 낙찰가 값, 없으면 빈 문자열
            {
              value:
                asset[id]?.nickname !== ""
                  ? asset[id]?.nickname
                  : {
                      richText: [
                        {
                          text: "유찰",
                          font: {
                            color: { argb: "FFFF0000" }, // 빨간색
                            bold: true,
                          },
                        },
                      ],
                    },
            }, // 닉네임 값, 없으면 빈 문자열
          ];

설명 : 현재 rowData 에서 조건중 유찰에 해당되는 것에 text 색깔을 빨간색으로 변경하기 위해서 그부분에 richText를 적용했습니다.

tip: 원하시는 색상이 있을경우 chapgpt에 적용하고자하는 컬러를 적고 16진수 색상 코드를 알려달라고 한다음에 적용하심면 됩니다. 

728x90
반응형
Comments