[React] jspdf, jspdf-autotable

Pdf 다운로드를 위한 라이브러리이다.

npm 으로도 제공해 주니 node.js 를 사용한다면 npm으로 설치해 주도록 한다.

jspdf 는 기본적인 pdf를 만들어주는 라이브러리이며, jspdf-autotable은 테이블을 pdf로 만들 때 사용된다.

설치

$ npm install jspdf

$ npm install jspdf-autotable    # table 저장시에만 설치

사용법

jspdf 를 사용하는 방법은 간단하며 검색을 통해 쉽게 찾을 수 있다. jspdf-autotable 이 jspdf 기반으로 되기 때문에 jspdf-autotable을 기준으로 설명하겠다.

let Pdf = require('jspdf');

let PdfAutoTable = require('jspdf-autotable');

...

var columns = [
    {title: "ID", dataKey: "id"},
    {title: "Name", dataKey: "name"}, 
    {title: "Country", dataKey: "country"}, 
    ...
];
var rows = [
    {"id": 1, "name": "Shaw", "country": "Tanzania", ...},
    {"id": 2, "name": "Nelson", "country": "Kazakhstan", ...},
    {"id": 3, "name": "Garcia", "country": "Madagascar", ...},
    ...
];

// Only pt supported (not mm or in)
var doc = new Pdf('p', 'pt');
doc.autoTable(columns, rows, {
    styles: {fillColor: [100, 255, 255]},
    columnStyles: {
        id: {fillColor: 255}
    },
    margin: {top: 60},
    addPageContent: function(data) {
        doc.text("Header", 40, 30);
    }
});
doc.save('table.pdf');

• orientation - The default value for orientation is "portrait". We can set it to "landscape" if we want a different page orientation.
• unit - We can tell jsPDF in which units we want to work. Use one of the following: "pt" (points), "mm" (default), "cm", "in".
• format - It's default page format. It can be "a3", "a4" (default), "a5", "letter", "legal".

객체를 생성할 때 jspdf 를 import 한 것으로 사용하기는 하지만 autoTable 을 사용하기 위해서는 두 라이브러리를 모두 import 해야 한다.

단점

jspdf, jspdf-autotable 은 UTF-8 을 지원하지 않는다.

검색을 하면 UTF-8 사용자들을 위해 대부분 pdfmake 를 추천해 준다.

html2canvas 이용

let Pdf = require('jspdf');

let html2canvas = require('html2canvas');

let ReactDOM = require('react-dom');

html2canvas(ReactDOM.findDOMNode(this.refs.pdfdn), {

    background: '#FFFFFF',

    onrendered: function (canvas) {

        var imgData = canvas.toDataURL('image/png');

        var doc = Pdf('p', 'mm');

        doc.addImage(imgData, 'PNG', 0, 0);

        doc.save('test.pdf');

    }

});

canvas 로 이미지를 만든 후, 그 이미지를 pdf로 만드는 방법도 있다.