지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > JavaScript 및 jsPDF를 사용하여 HTML Div에서 PDF를 생성하려면 어떻게 해야 합니까?

JavaScript 및 jsPDF를 사용하여 HTML Div에서 PDF를 생성하려면 어떻게 해야 합니까?

Linda Hamilton
풀어 주다： 2024-11-30 02:01:11
원래의
360명이 탐색했습니다.

How Can I Generate a PDF from an HTML Div Using JavaScript and jsPDF?

JavaScript를 사용하여 Div의 HTML에서 PDF 생성

문제

원하는 ID가 "pdf"인 div가 포함된 HTML 코드가 있습니다. JavaScript를 사용하여 "foobar.pdf"라는 PDF 파일로 인쇄합니다. 그러나 jspdf는 문자열 값만 허용하며 HTML을 인쇄하는 기능이 없습니다.

해결책

jsPDF를 사용하여 HTML을 인쇄하려면 다음 플러그인을 포함해야 합니다. 프로젝트:

  • jspdf.plugin.from_html.js
  • jspdf.plugin.split_text_to_size.js
  • jspdf.plugin.standard_fonts_metrics.js

또한, HTML의 경우 ID로 표시한 다음 jsPDF의 특수 요소 핸들러를 사용하여 해당 요소를 인쇄에서 제외할 수 있습니다. 예를 들어 무시된 요소가 있는 업데이트된 HTML 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
  <body>
    <p>
로그인 후 복사

JavaScript 코드

이 JavaScript 코드는 "pdf" div의 콘텐츠가 포함된 PDF를 생성하고 다음에서 엽니다. 새 창:

var doc = new jsPDF();
var elementHandler = {
  '#ignorePDF': function (element, renderer) {
    return true;
  }
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(source, 15, 15, {
  'width': 180,
  'elementHandlers': elementHandler
});

doc.output("dataurlnewwindow");
로그인 후 복사

메모

  • 제외에는 요소 ID만 사용할 수 있습니다. 요소 핸들러에서. 클래스 선택기는 지원되지 않습니다.
  • jsPDF는 CSS 스타일을 무시하지만 제목(h1, h2 등)과 텍스트 노드 내의 텍스트 형식을 지정할 수 있습니다. 텍스트 영역과 같은 요소는 인쇄를 지원하지 않습니다.

위 내용은 JavaScript 및 jsPDF를 사용하여 HTML Div에서 PDF를 생성하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：php.cn
이전 기사：5의 React Native에서 사용자 정의 아이콘을 추가하는 방법 다음 기사：&#새&# 키워드
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
3
2043
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
11
2203
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1860
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1746
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1768
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿