복붙노트

[JQUERY] 그것은 자바 스크립트 또는 jQuery를 사용하여 PDF로 HTML 페이지를 저장 할 수 있습니까?

JQUERY

그것은 자바 스크립트 또는 jQuery를 사용하여 PDF로 HTML 페이지를 저장 할 수 있습니까?

해결법

  1. 1.예, 사용 jspdf는 pdf 파일을 만듭니다.

    예, 사용 jspdf는 pdf 파일을 만듭니다.

    그런 다음 데이터 URI로를 켜고 DOM에 다운로드 링크를 삽입 할 수

    당신은 그러나 PDF 변환 자신에 HTML을 작성해야합니다.

    페이지의 바로 사용 프린트 버전과 사용자가 그 페이지를 인쇄하고자하는 방법을 선택할 수 있습니다.

    편집 : 분명히 그것은 최소한의 지원이있다

    그래서 대답은 자신의 PDF 작가를 작성하거나 (서버에서) 당신을 위해 그것을 할 수있는 기존의 PDF 작가를 얻을 수있다.

  2. 2.나중에는 아주 쉬운 자바 스크립트로 할 수 있습니다. 이 코드가 도움이 되었기를 바랍니다.

    나중에는 아주 쉬운 자바 스크립트로 할 수 있습니다. 이 코드가 도움이 되었기를 바랍니다.

    당신은 JSpdf 라이브러리가 필요합니다.

    <div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>a pararaph</p>
</div>
<div id="editor"></div>
<button id="cmd">Generate PDF</button>

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

    // This code is collected but useful, click below to jsfiddle link.
</script>

    jsfiddle 여기 링크

  3. 3.이 늦은 대답을 할 수 있지만이 최고의 약이다 : https://github.com/eKoopmans/html2pdf

    이 늦은 대답을 할 수 있지만이 최고의 약이다 : https://github.com/eKoopmans/html2pdf

    순수 자바 스크립트 구현입니다. 당신이 ID에 의해 단지 하나의 요소를 지정하고 변환 할 수 있습니다.

  4. 4.당신은 Phantomjs를 사용할 수 있습니다. 여기에 다운로드하고, HTML> PDF 변환 기능 https://github.com/ariya/phantomjs/blob/master/examples/rasterize.js을 테스트하기 위해 다음 예제를 사용

    당신은 Phantomjs를 사용할 수 있습니다. 여기에 다운로드하고, HTML> PDF 변환 기능 https://github.com/ariya/phantomjs/blob/master/examples/rasterize.js을 테스트하기 위해 다음 예제를 사용

    예제 코드 :

    phantomjs.exe examples/rasterize.js http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/xhtml/index.html sample.pdf

  5. 5.나는 PDF로 수출 HTML에 jsPDF와 DOM-에 이미지 라이브러리를 사용했다.

    나는 PDF로 수출 HTML에 jsPDF와 DOM-에 이미지 라이브러리를 사용했다.

    나는 참고로 관심사로 여기에 게시 할 수 있습니다.

    $('#downloadPDF').click(function () {
    domtoimage.toPng(document.getElementById('content2'))
      .then(function (blob) {
          var pdf = new jsPDF('l', 'pt', [$('#content2').width(), $('#content2').height()]);
          pdf.addImage(blob, 'PNG', 0, 0, $('#content2').width(), $('#content2').height());
          pdf.save("test.pdf");
      });
});

    데모 : https://jsfiddle.net/viethien/md03wb21/27/

  6. 6.여기에 내가 디자인 방탄하지, 그 아이디어를 그것을 얼마나, 당신은 그것을 수정해야

    여기에 내가 디자인 방탄하지, 그 아이디어를 그것을 얼마나, 당신은 그것을 수정해야

  7. 7.PDF 서버 측에 html로 변환하는 것이 훨씬 쉽고 신뢰할 수 있습니다. 우리는 구글 인형을 사용하고 있습니다. 그것은 당신의 선택의 어떤 서버 측 언어에 대한 래퍼로 유지됩니다. 인형의 용도는 스크린 샷 및 / 또는 PDF 파일을 생성하는 크롬 헤드리스. 당신이 테이블, 이미지, 그래프, 여러 페이지 등 복잡한 PDF 파일을 생성해야하는 경우는 특히 당신에게 두통을 많이 절약 할 수

    PDF 서버 측에 html로 변환하는 것이 훨씬 쉽고 신뢰할 수 있습니다. 우리는 구글 인형을 사용하고 있습니다. 그것은 당신의 선택의 어떤 서버 측 언어에 대한 래퍼로 유지됩니다. 인형의 용도는 스크린 샷 및 / 또는 PDF 파일을 생성하는 크롬 헤드리스. 당신이 테이블, 이미지, 그래프, 여러 페이지 등 복잡한 PDF 파일을 생성해야하는 경우는 특히 당신에게 두통을 많이 절약 할 수

    https://developers.google.com/web/tools/puppeteer/

  8. 8.자바 스크립트를 사용하여 PDF로 HTML로 변환하는 또 다른 매우 확실한 방법이있다 : 그것에 대한 온라인 API를 사용합니다. 사용자가 오프라인 상태 일 때 변환을 할 필요가없는 경우이 뜻을 잘 작동.

    자바 스크립트를 사용하여 PDF로 HTML로 변환하는 또 다른 매우 확실한 방법이있다 : 그것에 대한 온라인 API를 사용합니다. 사용자가 오프라인 상태 일 때 변환을 할 필요가없는 경우이 뜻을 잘 작동.

    PdfMage 좋은 API와 이벤트 무료 계정이 하나 개의 옵션입니다. 내가 (여기에서, 예를 들어) 당신이 많은 대안을 찾을 수 있습니다 확신

    PdfMage API의이 같은이있을 것이다 :

     $.ajax({
    url: "https://pdfmage.org/pdf-api/v1/process",
    type: "POST",
    crossDomain: true,
    data: { Html:"<html><body>Hi there!</body></html>" },
    dataType: "json",
    headers: {
        "X-Api-Key": "your-key-here" // not very secure, but a valid option for non-public domains/intranet
    },
    success: function (response) {
        window.location = response.Data.DownloadUrl;
    },
    error: function (xhr, status) {
        alert("error");
    }
});

  9. 9.예. 예를 들어, 당신은 https://grabz.it으로 솔루션을 사용할 수 있습니다.

    예. 예를 들어, 당신은 https://grabz.it으로 솔루션을 사용할 수 있습니다.

    그것은 잡고 스크린 샷을 조작하는 다른 방법으로 사용할 수있는 자바 스크립트 API를 가지고있다. 앱에서이를 사용하기 위해서는 먼저 앱 키와 비밀을 얻을 무료 자바 스크립트 SDK를 다운로드해야합니다.

    그래서, 그것을 사용하는 간단한 예를 보자 :

    //first include the grabzit.min.js library in the web page
<script src="grabzit.min.js"></script>
//include the code below to add the screenshot to the body tag    
<script>
//use secret key to sign in. replace the url.
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.google.com").Create();
</script>

    그리고 단순히 잠시 기다렸다가 페이지를 다시로드 할 필요없이 이미지가 자동으로 페이지의 하단에 나타납니다.

    즉, 단순한 하나입니다. 더 많은 이미지 처리와 함께 예 요소에 스크린을 부착하는 등의 문서를 확인한다.

  10. 10.$ ( '#의 CMD2'). ((기능을 클릭) { VAR 옵션 = { // '폭': 800, }; VAR PDF에 새로운 jsPDF ( 'P', 'PT', 'A4를') =; pdf.addHTML ($ ( "#의 content2") -1, (220), 옵션 기능 () { ( 'admit_card.pdf')를 pdf.save; }); }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"> <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js">

    입학 시험 홀 티켓
    이름
    Santanu 파트라
    <강한> D.O.B.
    1995년 4월 17일
    의 주소
    P.S. Srijan 기업 공원, Saltlake, 섹터 5, 콜카타-91
    의 연락처 번호
    9874563210
    을 이메일 아이디
    santanu@macallied.com
    을 부모 (들) 이름
    <스팬> S. 파트라
    7896541230
    의 시험 센터
    공학 및 경영 연구소
    을 홀 번호
    COM-32
    <작은> 자기 증명 <버튼 "BTN-정보 BTN"클래스 = ID = "CMD2"> 다운로드 토큰

    $ ( '#의 CMD2'). ((기능을 클릭) { VAR 옵션 = { // '폭': 800, }; VAR PDF에 새로운 jsPDF ( 'P', 'PT', 'A4를') =; pdf.addHTML ($ ( "#의 content2") -1, (220), 옵션 기능 () { ( 'admit_card.pdf')를 pdf.save; }); }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"> <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js">

    입학 시험 홀 티켓
    이름
    Santanu 파트라
    <강한> D.O.B.
    1995년 4월 17일
    의 주소
    P.S. Srijan 기업 공원, Saltlake, 섹터 5, 콜카타-91
    의 연락처 번호
    9874563210
    을 이메일 아이디
    santanu@macallied.com
    을 부모 (들) 이름
    <스팬> S. 파트라
    7896541230
    의 시험 센터
    공학 및 경영 연구소
    을 홀 번호
    COM-32
    <작은> 자기 증명 <버튼 "BTN-정보 BTN"클래스 = ID = "CMD2"> 다운로드 토큰

  11. 11.한마디로 : 없음. 첫 번째 문제는 대부분의 브라우저에서 보안상의 이유로 기본적으로 no로 설정되어있는 파일 시스템에 액세스 할 수 있습니다. 현대 브라우저는 때때로 데이터베이스의 형태로 최소한의 스토리지를 지원하거나, 파일 액세스를 활성화 할 수있는 사용자를 요청할 수 있습니다.

    한마디로 : 없음. 첫 번째 문제는 대부분의 브라우저에서 보안상의 이유로 기본적으로 no로 설정되어있는 파일 시스템에 액세스 할 수 있습니다. 현대 브라우저는 때때로 데이터베이스의 형태로 최소한의 스토리지를 지원하거나, 파일 액세스를 활성화 할 수있는 사용자를 요청할 수 있습니다.

    당신이 HTML 열심히합니다 (JS 문서의 파일 객체 참조)하는 것이 아니므로 다음 저장 파일 시스템에 액세스 할 수있는 경우 - 그러나 PDF 그렇게 쉬운 일이 아닙니다. PDF는 정말 병이 자바 스크립트에 적합 아주 고급 파일 형식입니다. 그것은 당신이 같은 단어와 쿼드로 직접 자바 스크립트가 지원하지 않는 데이터 유형에 정보를 기록해야합니다. 또한 파일에 저장해야합니다 사전 조회 시스템을 사전 정의 할 필요가있다. 임 있는지 누군가가 작동 할 수 있지만, 관련된 노력과 시간이 더 나은 C ++ 또는 델파이 학습 소요됩니다.

    사용자가 당신에게 비 제한된 액세스를 제공하는 경우 HTML 내보내기 그러나 가능해야한다

    12. from https://stackoverflow.com/questions/6896592/is-it-possible-to-save-html-page-as-pdf-using-javascript-or-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 자바 스크립트 / 빼기 날짜를 추가하려면?  (0) 2020.10.26
[JQUERY] 자바 스크립트 / jQuery를의 $ .PARAM () 역함수  (0) 2020.10.26
[JQUERY] 명시 적 스타일이없는 경우에만 CSS 클래스와 jQuery.animate ()  (0) 2020.10.26
[JQUERY] 자바 스크립트의 URL을 구문 분석  (0) 2020.10.26
[JQUERY] jQuery를 사용하여 동적으로 추가 요소 이벤트 리스너 추가 [중복]  (0) 2020.10.26
,

티스토리툴바