[JQUERY] PDF 사용하여 자바 스크립트로 HTML 페이지에 사업부를 다운로드

PDF 사용하여 자바 스크립트로 HTML 페이지에 사업부를 다운로드

해결법

1. ---

   1.당신은 jsPDF를 사용하여 작업을 수행 할 수 있습니다

   당신은 jsPDF를 사용하여 작업을 수행 할 수 있습니다

   HTML :

   <div id="content">
        <h3>Hello, this is a H3 tag</h3>
   
       <p>A paragraph</p>
   </div>
   <div id="editor"></div>
   <button id="cmd">generate PDF</button>
   

   자바 스크립트 :

   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');
   });
   

2. ---

   2.은

   내부 콘텐츠 .... jspdf & html2canvas를 사용하여 스타일 PDF로 다운로드 할 수 있습니다.

   은

   내부 콘텐츠 .... jspdf & html2canvas를 사용하여 스타일 PDF로 다운로드 할 수 있습니다.

   당신은 모두 JS 라이브러리를 참조 할 필요가

   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
   <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
   

   그런 다음 아래와 같은 기능을 호출

   //Create PDf from HTML...
   function CreatePDFfromHTML() {
       var HTML_Width = $(".html-content").width();
       var HTML_Height = $(".html-content").height();
       var top_left_margin = 15;
       var PDF_Width = HTML_Width + (top_left_margin * 2);
       var PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
       var canvas_image_width = HTML_Width;
       var canvas_image_height = HTML_Height;
   
       var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;
   
       html2canvas($(".html-content")[0]).then(function (canvas) {
           var imgData = canvas.toDataURL("image/jpeg", 1.0);
           var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
           pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);
           for (var i = 1; i <= totalPDFPages; i++) { 
               pdf.addPage(PDF_Width, PDF_Height);
               pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height*i)+(top_left_margin*4),canvas_image_width,canvas_image_height);
           }
           pdf.save("Your_PDF_Name.pdf");
           $(".html-content").hide();
       });
   }
   

   참고 : HTML 캔버스와 jspdf에서 PDF 생성.

   이 의지 도움말 사람이 될 수 있습니다.

3. ---

   3.귀하의 솔루션은 PDF 시설에 HTML을 가지고 다음 브라우저에 PDF 출력 생성 등을 반환하는 백 엔드 서버에 HTML을 전달하는 몇 가지 아약스 방법이 필요합니다.

   귀하의 솔루션은 PDF 시설에 HTML을 가지고 다음 브라우저에 PDF 출력 생성 등을 반환하는 백 엔드 서버에 HTML을 전달하는 몇 가지 아약스 방법이 필요합니다.

   첫째는 우리가 설정 JQuery와 코드를 같은 것이다, 클라이언트 측 코드를 설정

      var options = {
               "url": "/pdf/generate",
               "data": "data=" + $("#content").html(),
               "type": "post",
           }
      $.ajax(options)
   

   그런 다음 다음과 같이 HTML2PDF 생성 스크립트에서 데이터 차단

      $html = $_POST['data'];
      $pdf = html2pdf($html);
   
      header("Content-Type: application/pdf"); //check this is the proper header for pdf
      header("Content-Disposition: attachment; filename='some.pdf';");
      echo $pdf;
   

    

4. ---

   4.AFAIK이 작업을 수행 네이티브 JQuery와 기능이 없습니다. 최선의 선택은 서버에서 변환을 처리하는 것입니다. 당신이 당신이 사용하고있는 언어에 따라 달라집니다 방법 (.NET, PHP 등). 당신은 사용자에게 PDF를 반환 변환을 처리하는 함수에 DIV의 내용을 전달할 수 있습니다.

   AFAIK이 작업을 수행 네이티브 JQuery와 기능이 없습니다. 최선의 선택은 서버에서 변환을 처리하는 것입니다. 당신이 당신이 사용하고있는 언어에 따라 달라집니다 방법 (.NET, PHP 등). 당신은 사용자에게 PDF를 반환 변환을 처리하는 함수에 DIV의 내용을 전달할 수 있습니다.

5. ---

   5.예, JS에서 PDF 파일로 캡처 사업부에 가능합니다. 당신은 https://grabz.it에서 제공하는 솔루션을 확인할 수 있습니다. 그들은 당신이 같은 사업부 또는 스팬으로 하나의 HTML 요소의 내용을 캡처 할 수 있도록 친절하고 깨끗한 자바 스크립트 API가 있습니다.

   예, JS에서 PDF 파일로 캡처 사업부에 가능합니다. 당신은 https://grabz.it에서 제공하는 솔루션을 확인할 수 있습니다. 그들은 당신이 같은 사업부 또는 스팬으로 하나의 HTML 요소의 내용을 캡처 할 수 있도록 친절하고 깨끗한 자바 스크립트 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>
   

   당신이 필요한 경우 캡처하려면 무엇이 특징을 받고있다 :

   //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>
   

   당신은 당신의 CSS 선택에 따라 대상 URL과 #feature로 http://www.example.com/my-page.html를 교체해야합니다.

   그게 다야. 페이지가 지금 기능의 모든 내용을 포함 할 스크립트 태그와 같은 위치에 생성됩니다 이미지의 스크린 샷을로드 할 때 지금, div에없고 아무것도.

   는 다른 구성 및 사업부 - 스크린 샷 메커니즘 할 수있는 사용자 정의, 여기를 확인하시기 바랍니다

from https://stackoverflow.com/questions/17293135/download-a-div-in-a-html-page-as-pdf-using-javascript by cc-by-sa and MIT license