JavaScript를 사용하여 Div 내의 HTML에서 PDF를 생성하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

JavaScript를 사용하여 Div 내의 HTML에서 PDF를 생성하는 방법은 무엇입니까?

Linda Hamilton

풀어 주다： 2024-12-08 10:51:13

원래의

652명이 탐색했습니다.

How to Generate a PDF from HTML within a Div using JavaScript?

Javascript를 사용하여 div의 HTML에서 PDF 생성

수행해야 할 작업은 div의 콘텐츠를 ID로 변환하는 것입니다. "pdf"를 PDF 문서로 변환합니다. 이 PDF 문서는 "foobar.pdf"라는 파일 이름으로 자동 다운로드되어야 합니다.

jspdf는 PDF 생성에 일반적으로 사용되지만 텍스트 기능 제한으로 인해 문제가 발생합니다. 문자열 값만 허용하지만 HTML 입력은 필수입니다. 이 문제를 해결하려면 jspdf.plugin.from_html.js 및 jspdf.plugin.split_text_to_size.js와 같은 플러그인이 필요합니다. 이러한 플러그인을 사용하여 원하는 결과를 얻는 방법은 다음과 같습니다.

필요한 스크립트를 프로젝트에 통합하는 것부터 시작하세요.

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

로그인 후 복사

특정 요소에 필요한 경우 PDF에서 제외하려면 ID를 할당하고 jsPDF의 특수 요소 처리기 내에서 식별해야 합니다. 예를 들어 ID가 "ignorePDF"인 요소를 제외하려면 HTML 코드를 다음과 같이 수정하세요.

<!DOCTYPE html>
<html>
  <body>
    <p>

로그인 후 복사

다음 JavaScript 코드는 PDF를 생성하고 팝업에 표시합니다. window:

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");

로그인 후 복사

이 방법은 "print this to"라는 텍스트가 포함된 PDF를 생성합니다. pdf."

현재 버전에서는 특수 요소 핸들러가 주로 ID를 처리한다는 점에 유의하는 것이 중요합니다. 결과적으로 클래스 선택기(예: '.ignorePDF')를 사용하면 의도한 결과가 생성되지 않습니다.

또한 jsPDF는 CSS 스타일에 대한 지원이 부족하며 텍스트 노드 내의 텍스트만 인쇄합니다. 따라서 텍스트 영역 및 유사한 요소의 값은 PDF에 포함되지 않습니다.

위 내용은 JavaScript를 사용하여 Div 내의 HTML에서 PDF를 생성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!