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

232

다음 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>

내가하고 싶은 것은 ID가 "pdf"인 div에있는 모든 것을 pdf로 인쇄하는 것입니다. JavaScript를 사용하여 수행해야합니다. "pdf"문서는 "foobar.pdf"라는 파일 이름으로 자동 다운로드되어야합니다.

이 작업을 수행하기 위해 jspdf를 사용했지만 문자열 기능 만 허용하는 "text"기능 만 있습니다. 텍스트가 아닌 jspdf에 HTML을 제출하고 싶습니다.

javascript  jspdf 
— 존 크로포드
소스
1
위에서 언급했듯이 "텍스트"기능을 사용하고 싶지 않습니다 . HTML로주고 싶습니다. 귀하의 링크는 HTML이 아닌 일반 텍스트 만 처리합니다
— John Crawford
2
jsPDF는 않습니다 이 fromHTML기능을; :에 "HTML 렌더러"예를 참조 mrrio.github.io/jsPDF
— mg1075
— Code Spy

답변:

228

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

특정 요소를 무시하려면 jsPDF의 특수 요소 처리기에서이를 무시할 수있는 ID로 표시해야합니다. 따라서 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 코드를 사용하여 작성된 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 Issue에 명시되어 있습니다 . 상태는 다음과 같습니다.

노드 트리의 모든 요소에 대해 일치하기 때문에 가능한 한 빨리 만들려고했습니다. 이 경우 "요소 ID 만 일치 함"을 의미합니다. 요소 ID는 여전히 jQuery 스타일 "#id"로 수행되지만 모든 jQuery 선택기가 지원되는 것은 아닙니다.

따라서 '#ignorePDF'를 '.ignorePDF'와 같은 클래스 선택기로 바꾸면 나에게 도움이되지 않습니다. 대신 각 요소마다 동일한 핸들러를 추가해야합니다.

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

예 에서 '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>
— snrlx
소스
3
요소 핸들러가 클래스가 될 수있을 것 같아요? 그것은 HTML5 표준과 훨씬 더 의미 적으로 비슷할 것입니다. ID는 CSS에서 너무 많은 speificity weight를 가질뿐만 아니라 고유해야합니다.
— Emperative
아니요, 제가 아는 한, 클래스는 "예를 들어 특수 요소 핸들러를 지원합니다. jQuery 스타일 ID 선택기로 ID 또는 노드 이름을 등록하십시오 ("#iAmID ", "div", "span"등) 현재 다른 유형의 선택기 (클래스, 컴파운드)는 지원하지 않습니다. " 여전히 태그 이름이 사용 사례와 일치하고 페이지의 다른 중요한 요소를 숨기지 않으면 태그 이름을 사용할 수 있습니다.
— snrlx 2018 년
그들은 parall.ax/products/jspdf 페이지 에서 shim을 통해 IE6 +를 지원한다고 명시하고 있습니다. 그래도 직접 시도하지 않았습니다.
— snrlx
2
@snrlx 빈 pdf를 얻습니다.이 오류 : renderer.pdf.sHashCode는 함수가 아닙니다
— Lisa Solomon
5
"특정 요소를 무시하려면 요소를 ID로 표시해야합니다."-거꾸로 된 reqiurement에 의해 파괴 된 훌륭한 라이브러리입니다. OP는 <div>수백 가지 중 하나 일 수 있는 단일 인쇄를 원했습니다. 그래서 그는 원치 않는 모든 DOM 요소 를 표시해야 합니까 ??
— Mawg는 모니카 복원
53

이것은 간단한 해결책입니다. 자바 스크립트 인쇄 개념을 사용하고 이것을 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>
— 바이브 하브 쿠르 카르 니
소스
27
"그리고 이것을 pdf로 간단히 저장"-나는 그 부분을 놓쳤다. 어떻게합니까?
— Mawg는 모니카 복원
9
CSS 스타일링 문제를 해결하기 위해 나를 위해 일한 것은 printPDF.css라는 또 다른 CSS 파일을 만들고 위의 예와 같이 링크 태그를 사용하여 추가했습니다 : printWindow.document.write ( '<html> <head> <title> DIV 내용 </ title> '); printWindow.document.write ( '<link rel = "stylesheet"href = "../ css / printPDF.css"/>'); printWindow.document.write ( '</ head> <body>');
— Prime_Coder
2
일부 의견 : 1) 인쇄를 위해 특정 스타일 시트가 필요하지 않습니다. 현재 스타일 시트에서 다음과 같이하십시오 : @media print {.pageBreak {page-break-before : always; } .labelPdf {글꼴 무게 : 굵게; 글꼴 크기 : 20px; } .noPrintPdf {표시 : 없음; }}이 클래스를 필요에 따라 사용하십시오. 2) .live ( "click", ...)가 작동하지 않으므로 대신 .on ( "click", ...)을 사용합니다.
— Davidson Lima
1
@DavidsonLima이 코드는 오래된 창 CSS를 볼 수없는 새 창을 만듭니다. 그것이 CSS를 "무시"하는 이유입니다. 무시하지 않고 새 창에서만로드되지 않습니다. 머리에로드하면 렌더링됩니다.
— 루카스 Liesis
1
Angular를 사용 하여이 작업을 수행하려는 경우 CSS 파일을 자산 폴더에 넣으십시오.
— rgantla
16

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
}
— 마르코
소스
1
궁금합니다. OP 이외의 다른 사람에게도 효과가 있습니까? 코드를 읽음으로써 ID가있는 요소에서만 작동한다는 것을 이해하는 것 같습니다. 어쨌든이 작업을 수행하는 방법을 모릅니다.
— Michael
14
내가 아이러니하게도, fromHTML은 매개 변수로 보낸 요소에 HTML이 포함되어 있지 않은 경우에만 작동합니다. 일반 텍스트 만 지원됩니다. 킨다는 모든 것의 목적을 죽입니다.
— Michael
나를 위해 완벽하게 일했습니다. 전달하려는 요소는 반드시 ID를 가질 필요는 없습니다. 이는 복제자가 전달하려는 노드를 찾은 방법입니다. 또한이 솔루션은 'printDoc.autoPrint ()'없이도 작동합니다. 이 특정 줄을 코드에 그대로 두려면 autoPrint-Plugin을 포함해야합니다.
— snrlx
13

특정 페이지의 PDF를 다운로드 해야하는 경우 다음과 같은 버튼을 추가하십시오.

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

div뿐만 아니라 모든 페이지를 인쇄하려면 window.print () 사용

— 바일 마흐무드
소스
2
iframe의 pdf 파일을 다운로드하려면 개발자 콘솔을 사용하십시오. document.querySelector("#myIframe").contentWindow.print()
— ioCron
11

언급 한대로 jsPDF 및 html2canvas 를 사용해야합니다 . 또한 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');
    }
  });
}
— 침례
소스
3
그것은 이미지를 변환하지 않습니다
— Probosckie
1
답변 주셔서 감사합니다. A4 페이지 형식으로 넣는 방법에 대한 힌트를 줄 수 있습니까?
— johannesMatevosyan 10
3
이것은 실제로 좋은 벡터 pdf를 만들지 않고, 캔버스로 많은 비트 맵을 만들어 이미지로 쌓습니다. 결과는 크고 낮은 품질, PDF에서 복사 및 붙여 넣기 등을 할 수없는 많은 단점이 있습니다.
— Roman Zenka
6

한 가지 방법은 window.print () 함수를 사용하는 것입니다. 어떤 라이브러리가 필요하지 않습니다

찬성

1. 외부 라이브러리가 필요하지 않습니다.

2. 우리는 본문의 선택된 부분 만 인쇄 할 수 있습니다.

3. CSS 충돌 및 JS 문제가 없습니다.

4. 핵심 html / js 기능

--- 간단히 아래 코드를 추가

CSS 를

@media print {
        body * {
            visibility: hidden; // part to hide at the time of print
            -webkit-print-color-adjust: exact !important; // not necessary use         
               if colors not visible
        }

        #printBtn {
            visibility: hidden !important; // To hide 
        }

        #page-wrapper * {
            visibility: visible; // Print only required part
            text-align: left;
            -webkit-print-color-adjust: exact !important;
        }
    }

JS 코드 -BTN 클릭시 다음 함수 호출

$scope.printWindow = function () {
  window.print()
}

참고 : 모든 CSS 객체에서! important를 사용하십시오.

예 - 

.legend  {
  background: #9DD2E2 !important;
}
— 로 히트 파테
소스
브라우저의 인쇄 기능에 문제가 있습니다. 일반적으로 인쇄보기 (여백, 페이지 크기 등)에 대해 기본 옵션이 선택되어 있습니다. 따라서 사용자를 교육하지 않고 필요한 스타일을 사용하여 필요한 PDF를 작성하는 것은 매우 어렵습니다. 이는 훨씬 어렵고 거의 불가능합니다.
— Rahmat Ali
4

CSS 렌더링에 jspdf 및 html2canvas 를 사용 하고 특정 코드의 내용을 내 코드로 내 보냅니다.

$(document).ready(function () {
    let btn=$('#c-oreder-preview');
    btn.text('download');
    btn.on('click',()=> {

        $('#c-invoice').modal('show');
        setTimeout(function () {
            html2canvas(document.querySelector("#c-print")).then(canvas => {
                //$("#previewBeforeDownload").html(canvas);
                var imgData = canvas.toDataURL("image/jpeg",1);
                var pdf = new jsPDF("p", "mm", "a4");
                var pageWidth = pdf.internal.pageSize.getWidth();
                var pageHeight = pdf.internal.pageSize.getHeight();
                var imageWidth = canvas.width;
                var imageHeight = canvas.height;

                var ratio = imageWidth/imageHeight >= pageWidth/pageHeight ? pageWidth/imageWidth : pageHeight/imageHeight;
                //pdf = new jsPDF(this.state.orientation, undefined, format);
                pdf.addImage(imgData, 'JPEG', 0, 0, imageWidth * ratio, imageHeight * ratio);
                pdf.save("invoice.pdf");
                //$("#previewBeforeDownload").hide();
                $('#c-invoice').modal('hide');
            });
        },500);

        });
});
— 가살 레 자바 헤어
소스
이 작동하지만 내용을 이미지로 변환
— Samad
또한 현재 페이지에 맞지 않을 경우 새 페이지에 내용 / 이미지가 인쇄되도록 페이지 나누기를 설정하는 방법은 무엇입니까?
— SHEKHAR SHETE
4
  • 의존성 없음, 순수한 JS
  • CSS 또는 이미지를 추가하려면 상대 URL을 사용하지 말고 전체 URL을 사용하십시오. http://...domain.../path.css . 별도의 HTML 문서를 만들고 주요 내용이 없습니다.
  • base64로 이미지를 포함시킬 수도 있습니다

이것은 지금 몇 년 동안 나에게 도움이되었습니다.

export default function printDiv({divId, title}) {
  let mywindow = window.open('', 'PRINT', 'height=650,width=900,top=100,left=150');

  mywindow.document.write(`<html><head><title>${title}</title>`);
  mywindow.document.write('</head><body >');
  mywindow.document.write(document.getElementById(divId).innerHTML);
  mywindow.document.write('</body></html>');

  mywindow.document.close(); // necessary for IE >= 10
  mywindow.focus(); // necessary for IE >= 10*/

  mywindow.print();
  mywindow.close();

  return true;
}
— 루카스 리에 시스
소스
1
이 문제는 pdf에 CSS 효과가 없다는 것입니다.
— Shadab Faiz
@ShadabFaiz 기본 창과 같지 않을 수도 있습니다. 이 HTML에도 사용자 정의 CSS를 추가 할 수 있습니다.
— Lukas Liesis
네. 동의하지만 창에 CSS를 추가 할 수는 있지만 결과를 파일 pdf로 인쇄하는 방법은 무엇입니까?
— Mirko Cianfarani
1
그러나 이미지를 렌더링하지는 않습니다.
— Jan Pi
1
나는 이것을 좋아한다! 여기 저기 약간의 조정이 있고 좋아 보인다. 그리고에 여분의 간격을 제거하지 않는 한 작은 일 <body >P : 그것은이 필요
— 필 Roggenbuck
2

테이블을 내보내려면 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" }
            ]
        }
    }
}
...
— 블라디미르 조르지 에프
소스
"PDF로 내보내기"기능으로 인해 빈 PDF 문서가 생성되었습니다.
— Richard Nalezynski
아마도 잘못된 구성 일 것입니다 ... 원한다면 shieldui 태그로 질문을 게시하십시오
— Vladimir Georgiev
2

사용 pdfMake.js 하고 이 요점 .

(Gist를 html-to-pdfmake 패키지에 대한 링크와 함께 여기 에서 찾았 습니다.

npm install pdfmakeGist를 저장 한 후 다음 과 htmlToPdf.js같이 사용합니다.

const pdfMakeX = require('pdfmake/build/pdfmake.js');
const pdfFontsX = require('pdfmake-unicode/dist/pdfmake-unicode.js');
pdfMakeX.vfs = pdfFontsX.pdfMake.vfs;
import * as pdfMake from 'pdfmake/build/pdfmake';
import htmlToPdf from './htmlToPdf.js';

var docDef = htmlToPdf(`<b>Sample</b>`);
pdfMake.createPdf({content:docDef}).download('sample.pdf');

비고 :

  • 내 사용 사례 (와 인하 문서에서 관련 HTML을 생성하는 것입니다 인하 - 그것 과 이후에 PDF를 생성하고, 내가 함께 얻을 수있는 (바이너리 콘텐츠를 업로드) pdfMake의getBuffer() 브라우저에서 모든 기능). 생성 된 pdf는 내가 시도한 다른 솔루션보다 이러한 종류의 html에 더 좋습니다.
  • jsPDF.fromHTML()솔루션이 HTML의 특수 문자로 쉽게 혼동되어 일종의 마크 업으로 해석되어 결과 PDF를 완전히 엉망으로 만들 수 있기 때문에 허용 된 답변 에서 제안한 결과에 만족하지 못합니다.
  • 더 이상 사용되지 않는 캔버스 기반 솔루션 사용 jsPDF.from_html()생성 된 PDF의 텍스트를 붙여 넣을 수 있기를 원하지만 캔버스 기반 솔루션은 비트 맵 기반 PDF를 생성하기 때문에 함수와 같이 허용 된 답변의 혼동되지 않음)을 사용하는 것은 나에게 옵션이 아닙니다.
  • md-to-pdf 와 같은 pdf 변환기에 대한 직접적인 마크 다운 은 서버 측에만 해당되며 나에게는 적합하지 않습니다.
  • 생성 된 PDF를 표시하지 않고 바이너리 내용을 업로드하기 때문에 브라우저의 인쇄 기능을 사용하면 작동하지 않습니다.
— ilmiacs
소스
코드를 올바르게 읽으면 CSS 테두리 스타일 (예 : 테이블)을 지원하지 않습니다. 맞습니까?
— ninjagecko 2018 년
1

jsPDF가 div에서 동적으로 생성 된 테이블을 인쇄하도록 할 수있었습니다.

$(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>
— 워 스키니
소스
2
유 포스트 예를 PLS 할 수 u는 통과하는 방법을 html로
— Erum
그러나 코드는 <script src = " html2canvas.hertzen.com/build/html2canvas.js " > </ … >입니다. 인터넷이 필요합니까?
— Erum
1
@Erum 파일을 다운로드 할 수 있습니다.
— Eduardo Cuomo
0

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

이를 구현하려면 먼저 앱 키와 비밀을 확보 하고 (무료) SDK를 다운로드해야 합니다.

그리고 지금 예입니다.

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 선택기입니다. 이제 페이지가로드되면 이미지 스크린 샷이 스크립트 태그와 동일한 위치에 만들어지며 기능 div의 모든 내용이 포함되어 있습니다.

div- 스크린 샷 메커니즘에 수행 할 수있는 다른 구성 및 사용자 지정은 여기에서 확인 하십시오

— 남자
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.