Excel file_javascript 기술에 페이지 테이블 내용과 스타일을 저장하는 방법

프로젝트를 마치고 최근 생성된 포럼을 테스트했는데 내보내기 기능이 있었습니다. 웹페이지 내보내기 버튼을 클릭하고 페이지의 표 내용을 엑셀 파일로 저장한 후 표 스타일이 바뀌는 것을 발견했습니다. 문제를 분석한 후 근본 원인을 찾았습니다. 이제 구현 아이디어를 다음과 같이 공유하겠습니다.

문제 설명:

문제 분석 프로세스:

1. 테이블은 스타일 대신 클래스를 사용합니다. 내보낼 때 클래스 정의는 내보내지지 않습니다. 스타일로 변경하고 스타일에 직접 색상 스타일을 쓰면 스타일이 내보내집니다.

스타일은 CSS의 내용인 속성 스타일을 나타내기 위해 HTML에서 사용하는 스타일이고, 클래스는 페이지를 내보낼 때 내용을 선언하고 정의하는 클래스입니다. 클래스에 의해 정의된 스타일은 내보내지지 않습니다.

2. 테이블에 클래스 정의를 배치하여 스타일을 내보낼 수도 있습니다

이 문제를 해결하는 방법에는 두 가지가 있습니다.

해결 방법 1:

class="${getClass()}"를 style="color:${getStyle()};"로 교체

보충:

 $('#export').click(function () {
 saveAsExcel($('h3').text(), $('#table').html().replace(/( )+/gi,''));
 });

Excel은 테이블만 인식합니다. saveAsExcel 메소드를 사용하여 자동으로 저장하는 경우 클래스 정의를 수동으로 복사하여 Excel에 붙여넣으면 클래스 정의가 저장됩니다.
가장 큰 문제는 수동과 자동 복사 및 붙여넣기입니다

해결책 2:

93f0f5c25f18dab9d176bd4f6de5d30ec9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f2659279c3bca370b5104690d9ef395f2c5f8d1에 정의된 클래스를 f5d188ed2c074f8b944552db028f98a1f16b1740fad44fb09bfe928bcc527e08로 이동하세요. 클래스 정의 스타일의 위치 문제

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.