jspdf 한글 - Javascript를 사용하여 div의 HTML에서 pdf 생성




변환 자바스크립트 (9)

특정 페이지의 pdf 파일을 다운로드해야하는 경우 다음과 같은 버튼을 추가하면됩니다.

<h4 onclick="window.print();"> Print </h4>

window.print ()를 사용하여 div가 아닌 모든 페이지를 인쇄하십시오.

다음 html 코드가 있습니다.

<!DOCTYPE html>
<html>
    <body>
        <p>don't print this to pdf</p>
        <div id="pdf">
            <p><font size="3" color="red">print this to pdf</font></p>
        </div>
    </body>
</html>

내가 원하는 것은 "pdf"라는 ID를 가진 div에있는 것이 무엇이든간에 pdf로 인쇄하는 것입니다. 이 작업은 JavaScript를 사용하여 수행해야합니다. "pdf"문서는 파일 이름이 "foobar.pdf"로 자동 다운로드됩니다.

나는 이것을하기 위해 jspdf를 사용했지만, 문자열 값만 받아들이는 "text"만이 가지고있다. 텍스트가 아닌 jspdf에 HTML을 제출하고 싶습니다.


div를 PDF로 캡처하려면 https://grabz.it 솔루션을 사용할 수 있습니다. 쉽고 유연한 JavaScript API가있어 div 또는 span과 같은 단일 HTML 요소의 내용을 캡처 할 수 있습니다.

이를 구현하려면 먼저 앱 키와 비밀 키를 가져와 (무료) SDK를 download 합니다.

그리고 지금 예입니다.

HTML이 있다고 가정 해 보겠습니다.

<div id="features">
    <h4>Acme Camera</h4>
    <label>Price</label>$399<br />
    <label>Rating</label>4.5 out of 5
</div>
<p>Cras ut velit sed purus porttitor aliquam. Nulla tristique magna ac libero tempor, ac vestibulum felisvulput ate. Nam ut velit eget
risus porttitor tristique at ac diam. Sed nisi risus, rutrum a metus suscipit, euismod tristique nulla. Etiam venenatis rutrum risus at
blandit. In hac habitasse platea dictumst. Suspendisse potenti. Phasellus eget vehicula felis.</p>

기능 ID 아래에있는 것을 캡처하려면 다음이 필요합니다.

//add the sdk
<script type="text/javascript" src="grabzit.min.js"></script>
<script type="text/javascript">
//login with your key and secret. 
GrabzIt("KEY", "SECRET").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "format": "pdf"}).Create();
</script>

target: #feature 유의하십시오. #feature 는 앞의 예와 같이 CSS 선택 도구입니다. 이제 페이지가로드되면 script 태그와 동일한 위치에 이미지 스크린 샷이 생성됩니다.이 태그에는 features div의 모든 내용과 기타 내용이 포함됩니다.

div-screenshot 메커니즘에 대해 수행 할 수있는 다른 구성 및 사용자 정의는 here 확인 here


표를 내보내려면 Shield UI Grid 위젯에서 제공하는 이 내보내기 샘플을 살펴보십시오.

다음과 같이 구성을 확장하면됩니다.

...
exportOptions: {
    proxy: "/filesaver/save",
    pdf: {
        fileName: "shieldui-export",
        author: "John Smith",
        dataSource: {
            data: gridData
        },
        readDataSource: true,
        header: {
            cells: [
                { field: "id", title: "ID", width: 50 },
                { field: "name", title: "Person Name", width: 100 },
                { field: "company", title: "Company Name", width: 100 },
                { field: "email", title: "Email Address" }
            ]
        }
    }
}
...

div에서 동적으로 생성 된 테이블을 인쇄하기 위해 jsPDF를 얻을 수있었습니다.

$(document).ready(function() {

        $("#pdfDiv").click(function() {

    var pdf = new jsPDF('p','pt','letter');
    var specialElementHandlers = {
    '#rentalListCan': function (element, renderer) {
        return true;
        }
    };

    pdf.addHTML($('#rentalListCan').first(), function() {
        pdf.save("caravan.pdf");
    });
    });
});

Chrome 및 Firefox와 잘 작동합니다 ... 형식은 모두 IE에서 날아갑니다.

나는 또한 다음을 포함했다.

<script src="js/jspdf.js"></script>
    <script src="js/jspdf.plugin.from_html.js"></script>
    <script src="js/jspdf.plugin.addhtml.js"></script>
    <script src="//mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
    <script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
    <script type="text/javascript" src="./libs/FileSaver.js/FileSaver.js"></script>
    <script type="text/javascript" src="./libs/Blob.js/Blob.js"></script>
    <script type="text/javascript" src="./libs/deflate.js"></script>
    <script type="text/javascript" src="./libs/adler32cs.js/adler32cs.js"></script>

    <script type="text/javascript" src="js/jspdf.plugin.addimage.js"></script>
    <script type="text/javascript" src="js/jspdf.plugin.sillysvgrenderer.js"></script>
    <script type="text/javascript" src="js/jspdf.plugin.split_text_to_size.js"></script>
    <script type="text/javascript" src="js/jspdf.plugin.standard_fonts_metrics.js"></script>

다음과 같이 autoPrint ()를 사용하고 'dataurlnewwindow'에 출력을 설정할 수 있습니다.

function printPDF() {
    var printDoc = new jsPDF();
    printDoc.fromHTML($('#pdf').get(0), 10, 10, {'width': 180});
    printDoc.autoPrint();
    printDoc.output("dataurlnewwindow"); // this opens a new popup,  after this the PDF opens the print window view but there are browser inconsistencies with how this is handled
}

이것은 간단한 해결책입니다. 이것은 나를 위해 작동합니다. 당신은 자바 스크립트 인쇄 개념을 사용할 수 있으며 간단하게 PDF로 저장하십시오.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $("#btnPrint").live("click", function () {
            var divContents = $("#dvContainer").html();
            var printWindow = window.open('', '', 'height=400,width=800');
            printWindow.document.write('<html><head><title>DIV Contents</title>');
            printWindow.document.write('</head><body >');
            printWindow.document.write(divContents);
            printWindow.document.write('</body></html>');
            printWindow.document.close();
            printWindow.print();
        });
    </script>
</head>
<body>
    <form id="form1">
    <div id="dvContainer">
        This content needs to be printed.
    </div>
    <input type="button" value="Print Div Contents" id="btnPrint" />
    </form>
</body>
</html>

jsPDF는 플러그인을 사용할 수 있습니다. HTML을 인쇄 할 수있게하려면 특정 플러그인을 포함해야하므로 다음을 수행해야합니다.

  1. https://github.com/MrRio/jsPDF 이동하여 최신 버전을 다운로드하십시오.
  2. 프로젝트에 다음 스크립트를 포함하십시오.
    • jspdf.js
    • jspdf.plugin.from_html.js
    • jspdf.plugin.split_text_to_size.js
    • jspdf.plugin.standard_fonts_metrics.js

특정 요소를 무시하려면 ID를 표시해야합니다.이 ID는 jsPDF의 특수 요소 처리기에서 무시할 수 있습니다. 따라서 HTML은 다음과 같아야합니다.

<!DOCTYPE html>
<html>
  <body>
    <p id="ignorePDF">don't print this to pdf</p>
    <div>
      <p><font size="3" color="red">print this to pdf</font></p>
    </div>
  </body>
</html>

그런 다음 다음 JavaScript 코드를 사용하여 PopUp에서 작성된 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");

나에게 이것은 'pdf로 인쇄하십시오'라는 줄만 포함 된 멋지고 깔끔한 PDF를 만들었습니다.

특수 요소 처리기는 현재 버전의 ID 만 처리하며 이는 GitHub 문제 에도 명시되어 있습니다 . 그것은 진술한다 :

매칭은 노드 트리의 모든 요소에 대해 수행되기 때문에 가능한 한 빨리 구현해야합니다. 이 경우 요소 ID 만 일치합니다. 요소 ID는 여전히 jQuery 스타일 "#id"로 완료되지만 모든 jQuery 선택기가 지원된다는 의미는 아닙니다.

그러므로 '#ignorePDF'를 '.ignorePDF'와 같은 클래스 선택자로 대체하는 것이 효과적이지 않았습니다. 대신 다음과 같이 무시하려는 각 요소에 대해 동일한 핸들러를 추가해야합니다.

var elementHandler = {
  '#ignoreElement': function (element, renderer) {
    return true;
  },
  '#anotherIdToBeIgnored': function (element, renderer) {
    return true;
  }
};

examples 에서 'a'나 'li'와 같은 태그를 선택할 수 있다고 명시되어 있습니다. 그것은 대부분의 유스 케이스에 대한 제한을 두지 않을 수도 있습니다.

특수 요소 처리기를 지원합니다. ID 또는 노드 이름에 대해 jQuery 스타일 ID 선택기로 등록하십시오. ( "#iAmID", "div", "span"등) 현재 다른 유형의 선택기 (클래스, 복합 클래스)는 지원되지 않습니다.

추가해야 할 중요한 한 가지는 모든 스타일 정보 (CSS)를 잃어 버리는 것입니다. 다행히도 jsPDF는 h1, h2, h3 등을 멋지게 포맷 할 수 있습니다. 덧셈기는 텍스트 노드 내에서만 텍스트를 인쇄하므로 텍스트 영역 등의 값을 인쇄하지 않습니다. 예:

<body>
  <ul>
    <!-- This is printed as the element contains a textnode -->        
    <li>Print me!</li>
  </ul>
  <div>
    <!-- This is not printed because jsPDF doesn't deal with the value attribute -->
    <input type="textarea" value="Please print me, too!">
  </div>
</body>

앞서 언급했듯이 https://github.com/MrRio/jsPDFhtml2canvas 를 사용해야합니다. 또한 여러 페이지 ( sources )로 자동으로 PDF를 분할하는 jsPDF의 문제 내부에서 함수를 발견했습니다.

function makePDF() {

    var quotes = document.getElementById('container-fluid');

    html2canvas(quotes, {
        onrendered: function(canvas) {

        //! MAKE YOUR PDF
        var pdf = new jsPDF('p', 'pt', 'letter');

        for (var i = 0; i <= quotes.clientHeight/980; i++) {
            //! This is all just html2canvas stuff
            var srcImg  = canvas;
            var sX      = 0;
            var sY      = 980*i; // start 980 pixels down for every new page
            var sWidth  = 900;
            var sHeight = 980;
            var dX      = 0;
            var dY      = 0;
            var dWidth  = 900;
            var dHeight = 980;

            window.onePageCanvas = document.createElement("canvas");
            onePageCanvas.setAttribute('width', 900);
            onePageCanvas.setAttribute('height', 980);
            var ctx = onePageCanvas.getContext('2d');
            // details on this usage of this function: 
            // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Slicing
            ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);

            // document.body.appendChild(canvas);
            var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);

            var width         = onePageCanvas.width;
            var height        = onePageCanvas.clientHeight;

            //! If we're on anything other than the first page,
            // add another page
            if (i > 0) {
                pdf.addPage(612, 791); //8.5" x 11" in pts (in*72)
            }
            //! now we declare that we're working on that page
            pdf.setPage(i+1);
            //! now we add content to that page!
            pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62));

        }
        //! after the for loop is finished running, we save the pdf.
        pdf.save('test.pdf');
    }
  });
}

Crockford는이 함수를 사용하여 다음과 같이 제안합니다.

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

var newObject = object(oldObject);

간결하고 예상대로 작동하며 라이브러리가 필요하지 않습니다.

편집하다:

이것은 polyfill 용 Object.create이므로 이것을 사용할 수도 있습니다.

var newObject = Object.create(oldObject);

참고 : 이 중 일부를 사용하면 일부 반복 사용시 문제가 발생할 수 있습니다 hasOwnProperty. 왜냐하면 create상속받은 새로운 빈 객체를 생성 하기 때문 oldObject입니다. 그러나 객체를 복제하는 것은 여전히 ​​유용하고 실용적입니다.

예를 들어 if oldObject.a = 5;

newObject.a; // is 5

그러나:

oldObject.hasOwnProperty(a); // is true
newObject.hasOwnProperty(a); // is false




javascript jspdf