[javascript] JavaScript 또는 jquery를 사용하여 HTML 페이지를 PDF로 저장할 수 있습니까?

JavaScript 또는 jquery를 사용하여 HTML 페이지를 PDF로 저장할 수 있습니까?

상세히:

테이블이 포함 된 HTML 페이지를 생성했습니다. ‘PDF로 저장’버튼이 하나 있습니다. 사용자가 해당 버튼을 클릭하면 해당 HTML 페이지가 PDF 파일로 변환되어야합니다.

JavaScript 또는 jquery를 사용할 수 있습니까?



답변

, jspdf 를 사용하여 pdf 파일을 만듭니다.

그런 다음이를 데이터 URI로 변환하고 다운로드 링크를 DOM에 삽입 할 수 있습니다.

그러나 HTML에서 pdf 로의 변환을 직접 작성해야합니다.

페이지의 인쇄용 버전을 사용하고 사용자가 페이지를 인쇄 할 방법을 선택하도록합니다.

편집 : 분명히 최소한의 지원이 있습니다

따라서 대답은 자신의 PDF 작성기를 작성하거나 기존 PDF 작성기를 사용하여 서버에서 수행하는 것입니다.


답변

야 자바 스크립트로 매우 쉽습니다. 이 코드가 유용하기를 바랍니다.

JSpdf 라이브러리 가 필요합니다 .

<div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>a pararaph</p>
</div>
<div id="editor"></div>
<button id="cmd">Generate PDF</button>

<script>
    var doc = new jsPDF();
    var specialElementHandlers = {
        '#editor': function (element, renderer) {
            return true;
        }
    };

    $('#cmd').click(function () {
        doc.fromHTML($('#content').html(), 15, 15, {
            'width': 170,
                'elementHandlers': specialElementHandlers
        });
        doc.save('sample-file.pdf');
    });

    // This code is collected but useful, click below to jsfiddle link.
</script>

여기에 jsfiddle 링크


답변

이것은 늦은 답변 일 수 있지만 이것이 가장 좋습니다 :
https://github.com/eKoopmans/html2pdf

순수한 자바 스크립트 구현. ID로 단일 요소 만 지정하고 변환 할 수 있습니다.


답변

Phantomjs를 사용할 수 있습니다. 여기에서 다운로드 하고 다음 예제를 사용하여 html-> pdf 변환 기능 https://github.com/ariya/phantomjs/blob/master/examples/rasterize.js 를 테스트 하십시오.

예제 코드 :

phantomjs.exe examples/rasterize.js http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/xhtml/index.html sample.pdf


답변

내가 사용 jsPDF하고 dom-to-image도서관 PDF로 수출 HTML에.

나는 누구의 관심사에 대한 언급으로 여기에 게시합니다.

$('#downloadPDF').click(function () {
    domtoimage.toPng(document.getElementById('content2'))
      .then(function (blob) {
          var pdf = new jsPDF('l', 'pt', [$('#content2').width(), $('#content2').height()]);
          pdf.addImage(blob, 'PNG', 0, 0, $('#content2').width(), $('#content2').height());
          pdf.save("test.pdf");
      });
});

데모 : https://jsfiddle.net/viethien/md03wb21/27/


답변

내가 어떻게 할 것인지는 방탄 디자인이 아닌 아이디어입니다. 수정해야합니다.

  • 사용자가 PDF로 저장 버튼을 클릭합니다.
  • 서버는 ajax를 사용하여 호출을 보냅니다.
  • 서버는 HTML을 사용하여 생성 된 PDF의 URL로 응답하며 Apache FOP를 매우 성공적으로 사용했습니다.
  • ajax 응답을 처리하는 js는 location.href를 수행하여 JS에서 보낸 URL을 가리키고 해당 URL이로드되는 즉시 콘텐츠 처리 헤더를 첨부 파일로 사용하여 사용자가 파일을 다운로드하도록합니다.


답변

html을 pdf 서버 측으로 변환하는 것이 훨씬 쉽고 안정적입니다. Google Puppeteer를 사용하고 있습니다. 선택한 서버 측 언어에 대한 래퍼로 잘 관리됩니다. Puppeteer는 헤드리스 Chrome을 사용하여 스크린 샷 및 / 또는 PDF 파일을 생성합니다. 특히 표, 이미지, 그래프, 여러 페이지 등으로 복잡한 PDF 파일을 생성해야하는 경우 많은 골칫거리를 절약 할 수 있습니다.

https://developers.google.com/web/tools/puppeteer/