[Javascript] HTML -> PDF 변환 라이브러리

    - 자바스크립트(js)용 , html to pdf converter library list

* MrRio /jsPDF

https://github.com/MrRio/jsPDF - 20.5k

    - v2.1.1 , 20/09

 

    - 매뉴얼

http://raw.githack.com/MrRio/jsPDF/master/docs/

 

    - html을 변환에 html2canvas 라이브러리 사용

    //-------------------

    - 사용법 1 : text

<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>

 

//import { jsPDF } from "jspdf";//에러! Uncaught SyntaxError: Cannot use import statement outside a modul

 

    window.jsPDF = window.jspdf.jsPDF;

    const doc = new jsPDF();

    doc.text("Hello world!", 10, 10);

    doc.save("a4.pdf");

    //------------------------

    - 사용법 2 : html

<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>

    <script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>

 

    <script>

        window.jsPDF = window.jspdf.jsPDF;

    var pdf = new jsPDF();

    pdf.html(document.body, {

        callback: function (pdf) {

            pdf.save('doc1.pdf');

        }

    });

    //---------------

    - 에러 처리

에러 메시지: jspdf html Error: Could not load dompurify: Error: Could not load

해결 방법 : html2canvas 로드

<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>

//------------------------------------------------------

* niklasvh /html2canvas

https://github.com/niklasvh/html2canvas - 22k

    - v1.0.0-rc.7 , 20/08

    - 복잡한 html문서를 제대로 렌더링 못함(여백 문제)

 

    - 매뉴얼

https://html2canvas.hertzen.com/getting-started

 

    - 사용법

<script type="text/javascript" src="../dist/html2canvas.js"></script>

    <script type="text/javascript">

        html2canvas(document.body).then(function(canvas) {

            document.body.appendChild(canvas);

        });

    </script>

//----------------------------

* bpampuch /pdfmake

https://github.com/bpampuch/pdfmake - 8.7k

    - v0.1.68 , 20/08

    - html을 직접 변환 못함

 

    - 매뉴얼

https://pdfmake.github.io/docs/0.1/getting-started/client-side/

https://cdnjs.com/libraries/pdfmake

    - 사용법

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/pdfmake.min.js"></script>

 

var docDefinition = {

    content: [

        'First paragraph',

        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'

    ]

};

 

var pdf = pdfmake.createPdf(docDefinition);

pdf.write('pdfs/basics.pdf').then(() => {

    console.log( '완료');

});

//-------------------------------------

* eKoopmans /html2pdf.js

Client-side HTML-to-PDF rendering using pure JS.

https://github.com/eKoopmans/html2pdf.js - 1.6k

    - v0.9.2 , 20/02

    - html2canvas , jspdf 가 내부에 포함되어 있음

    - 사용예

<script type="text/javascript" src="./dist/html2pdf.bundle.js"></script>

    <script type="text/javascript">

        var element = document.body;

        var opt = {

            filename:     'myfile.pdf',

        };

        html2pdf(element, opt);

//-----------------------

https://github.com/johnnywang1994/jsPDF-html2canvas

//----------------------------------

< Node.js 용>

 

//----------------------------------------------------------

[Node.js] HTML -> PDF

 

//--------------------

* foliojs /pdfkit

https://github.com/foliojs/pdfkit - 6.7k

    - v0.11.0 , 2020/01

    - Node.js 용

 

    - 매뉴얼

http://pdfkit.org/

 

    - 복잡한 html 직접 변환 기능 없음

//--------------------

* marcbachmann /node-html-pdf

https://github.com/marcbachmann/node-html-pdf - 3k

    - v2.2.0 , 2017/09

 

    - 개발 중지 됨

    - 커맨드 라인 명령

    - 멀티 칼럼 안됨

    - 설치

npm install -g html-pdf

 

    - 사용

html-pdf test/businesscard.html businesscard.pdf

//-----------------------

// 참고

https://stackoverflow.com/questions/18191893/generate-pdf-from-html-in-div-using-javascript