wkhtmltopdf를 사용하여 HTML 테이블 보고서를 변환하세요.
여기에 코드가 많다는 것을 알고 있지만 정렬이 잘못된 줄이 몇 개 있습니다. 한 줄에만 있는 것이 아니라 무작위입니다. HTML을 브라우저에 넣으면 정상적으로 표시되지만 인쇄 버전으로 변환되지 않습니다. 이 문제를 해결하려면 어떻게 해야 합니까? 감사합니다
줄을 더 추가한 후 문제를 재현할 수 있는데, 이는 문제가 실제로 예측할 수 없다는 것을 보여줍니다.
그러나 문제는 border-collapse:collapse; CSS 속성으로 인해 발생한 것 같습니다. 이를 제거하면 모든 행의 높이가 동일해집니다.
border-collapse:collapse;
물론 이렇게 하면 각 표 셀 주위에 흰색 테두리가 생기므로 바람직하지 않을 수 있습니다.
테두리를 셀과 조화롭게 만들려면 개별 셀의 background-color 속성 대신 전체 테이블의 배경 패턴을 사용하여 열에 색상을 지정하는 것이 좋습니다.
background-color
아래 코드에서는 테이블 열 너비와 색상이 있는 세 개의 직사각형으로 구성된 인라인 SVG 이미지를 만듭니다.
변환 중에 열 너비를 올바르게 계산하려면 dpi 설정을 130으로 조정해야 합니다.
HTML 코드:
생성된 PDF 파일:
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
줄을 더 추가한 후 문제를 재현할 수 있는데, 이는 문제가 실제로 예측할 수 없다는 것을 보여줍니다.
그러나 문제는
border-collapse:collapse;CSS 속성으로 인해 발생한 것 같습니다. 이를 제거하면 모든 행의 높이가 동일해집니다.물론 이렇게 하면 각 표 셀 주위에 흰색 테두리가 생기므로 바람직하지 않을 수 있습니다.
테두리를 셀과 조화롭게 만들려면 개별 셀의
background-color속성 대신 전체 테이블의 배경 패턴을 사용하여 열에 색상을 지정하는 것이 좋습니다.아래 코드에서는 테이블 열 너비와 색상이 있는 세 개의 직사각형으로 구성된 인라인 SVG 이미지를 만듭니다.
으아아아변환 중에 열 너비를 올바르게 계산하려면 dpi 설정을 130으로 조정해야 합니다.
으아아아HTML 코드:
으아아아생성된 PDF 파일: