자바스크립트나 jquery를 사용하여 HTML 페이지를 PDF로 저장할 수 있습니까?
자바스크립트나 jquery를 사용하여 HTML 페이지를 PDF로 저장할 수 있습니까?
세부 정보:
테이블이 포함된 HTML 페이지를 하나 생성했습니다.PDF로 저장' 버튼이 하나 있습니다.사용자가 해당 버튼을 클릭하면 해당 HTML 페이지가 PDF 파일로 변환되어야 합니다.
자바스크립트나 jquery를 사용해서 가능합니까?
이것은 늦은 답변일 수 있지만 이것이 가장 좋은 방법입니다: https://github.com/eKoopmans/html2pdf
순수 Javascript 구현입니다.ID로 단일 요소만 지정하고 변환할 수 있습니다.
예, jspdf를 사용하여 PDF 파일을 만듭니다.
그런 다음 데이터 URI로 변환하고 DOM에 다운로드 링크를 삽입할 수 있습니다.
그러나 HTML에서 PDF로의 변환은 직접 작성해야 합니다.
프린터에 적합한 버전의 페이지를 사용하여 사용자가 페이지를 인쇄할 방법을 선택할 수 있습니다.
편집: 보아하니 지원이 최소화된 것 같습니다.
따라서 자신의 PDF 작성기를 작성하거나 기존 PDF 작성기를 서버에 배치하는 것이 정답입니다.
자바스크립트로 하는 것은 매우 쉽습니다.이 코드가 당신에게 유용하기를 바랍니다.
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>
저는 용한사를 요.jsPDF그리고.dom-to-imageHTML을 PDF로 내보낼 라이브러리입니다.
누구의 관심사인지를 언급하기 위해 여기에 글을 올립니다.
$('#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/
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
제가 하는 방법은 이렇습니다, 방탄 디자인이 아닌 아이디어입니다, 수정해야 합니다.
- 사용자가 PDF로 저장 버튼을 클릭합니다.
- 서버가 Ajax를 사용하여 호출을 보냅니다.
- 서버가 HTML을 사용하여 생성된 PDF에 대한 URL로 응답합니다. Apache FOP를 매우 성공적으로 사용했습니다.
- 아약스 응답을 처리하는 js가 위치를 지정합니다.href는 JS에 의해 전송된 URL을 가리키며, 해당 URL이 로드되는 즉시 컨텐츠 처리 헤더를 첨부 파일로 사용하여 파일을 전송하여 사용자가 파일을 다운로드하도록 합니다.
html을 pdf 서버 쪽으로 변환하는 것이 훨씬 쉽고 안정적입니다.Google Puppeteer를 사용하고 있습니다.선택한 서버 사이드 언어에 대한 래퍼로 잘 유지 관리됩니다.Puppeteer는 헤드리스 크롬을 사용하여 스크린샷 및/또는 PDF 파일을 생성합니다.특히 테이블, 이미지, 그래프, 여러 페이지 등으로 복잡한 PDF 파일을 생성해야 하는 경우 많은 두통을 줄일 수 있습니다.
https://developers.google.com/web/tools/puppeteer/
JavaScript를 사용하여 HTML을 PDF로 변환하는 또 다른 매우 분명한 방법이 있습니다. 즉, 이를 위해 온라인 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");
}
});
이것이 오래된 질문이라는 것을 알지만, 독자들에 따라 사용 사례를 부르는 쉬운 방법은 전화하는 것입니다.window.print()그리고 사용자에게 선택하라고 말합니다.save as PDF할 수 할 수 있습니다.CSS에서 미디어 쿼리를 사용하여 PDF에 표시되는 내용을 제어할 수 있도록 인쇄용 콘텐츠를 숨기거나 표시할 수 있습니다.예를 들어 이것들을 사용합니다..no-print그리고..only-print이를 위하여
.only-print {
display: none
}
@media print {
.no-print {
display: none
}
.only-print {
display: block
}
}
제 사용 사례에서는 탐색 및 단추와 같은 것을 모두 숨기고 일부 축소된 블록을 숨기고 대신 축소되지 않은 모든 블록을 표시합니다.
간단히 말해서, 아닙니다.첫 번째 문제는 파일 시스템에 대한 액세스로, 대부분의 브라우저에서 보안상의 이유로 기본적으로 no로 설정됩니다.최신 브라우저는 때때로 데이터베이스의 형태로 미니멀리즘 스토리지를 지원하거나 사용자에게 파일 액세스를 활성화하도록 요청할 수 있습니다.
파일 시스템에 액세스할 수 있는 경우 HTML로 저장하는 것은 그리 어렵지 않습니다(JS 문서의 파일 개체 참조). 하지만 PDF는 쉽지 않습니다.PDF는 Javascript에 적합하지 않은 상당히 고급 파일 형식입니다.자바스크립트에서 직접 지원하지 않는 단어나 쿼드와 같은 데이터 형식으로 정보를 작성해야 합니다.또한 파일에 저장해야 하는 사전 검색 시스템을 미리 정의해야 합니다.누군가가 그것을 작동시킬 수 있다고 확신하지만, 관련된 노력과 시간은 C++이나 델파이를 배우는 데 더 잘 사용될 것입니다.
그러나 사용자가 제한되지 않은 액세스 권한을 제공하는 경우 HTML 내보내기가 가능해야 합니다.
예. 예를 들어 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>
그런 다음 잠시 기다리기만 하면 페이지를 다시 로드할 필요 없이 이미지가 페이지 하단에 자동으로 나타납니다.
그것이 가장 간단한 것입니다.이미지 조작, 요소에 스크린샷 첨부 등에 대한 자세한 내용은 설명서를 참조하십시오.
$('#cmd2').click(function() {
var options = {
//'width': 800,
};
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML($("#content2"), -1, 220, options, function() {
pdf.save('admit_card.pdf');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<div id="content2" style="background: #fff;border-bottom: 1px solid #ffffff;">
<div class="tokenDet" style="padding: 15px;border: 1px solid #000;width: 80%;margin: 0 auto;position: relative;overflow: hidden;">
<div class="title" style="text-align: center;border-bottom: 1px solid #000;margin-bottom: 15px;">
<h2>Entrance Exam Hall Ticket</h2>
</div>
<div class="parentdiv" style="display: inline-block;width: 100%;position: relative;">
<div class="innerdiv" style="width: 80%;float: left;">
<div class="restDet">
<div class="div">
<div class="label" style="width: 30%;float: left;">
<strong>Name</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>Santanu Patra</span>
</div>
<div class="label" style="width: 30%;float: left;">
<strong>D.O.B.</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>17th April, 1995</span>
</div>
<div class="label" style="width: 30%;float: left;">
<strong>Address</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>P.S. Srijan Corporate Park, Saltlake, Sector 5, Kolkata-91</span>
</div>
<div class="label" style="width: 30%;float: left;">
<strong>Contact Number</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>9874563210</span>
</div>
<div class="label" style="width: 30%;float: left;">
<strong>Email Id</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>santanu@macallied.com</span>
</div>
<div class="label" style="width: 30%;float: left;">
<strong>Parent(s) Name</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>S. Patra</span><br /><span>7896541230</span>
</div>
<div class="label" style="width: 30%;float: left;">
<strong>Exam Center</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>Institute of Engineering & Management</span>
</div>
<div class="label" style="width: 30%;float: left;">
<strong>Hall Number</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>COM-32</span>
</div>
</div>
</div>
</div>
<div class="sideDiv" style="width: 20%;float: left;">
<div class="atts" style="float: left;width: 100%;">
<div class="photo" style="width: 115px;height: 150px;float: right;">
<img src="images/candidateImg.gif" style="width: 100%;"/>
</div>
<div class="sign" style="position: absolute;bottom: 0;right: 0;border-top: 1px dashed #000;left: 80%;text-align: right;">
<small>Self Attested</small>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="btn btn-info" id="cmd2">Download Token</button>유사한 문제가 있었습니다. 제 레거시 코드에 여러 개의 colspan이 포함된 테이블이 포함되어 있어서 jspdf를 사용할 수 없었습니다.Jspdf에서 광고 > 이것은 tbody > tr > td와 일치해야 합니다.
저는 결국 저에게 맞는 html2pdf 패키지를 사용하게 되었습니다.
파일에 라이브러리를 추가합니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.1/html2pdf.bundle.min.js" integrity="sha512-vDKWohFHe2vkVWXHp3tKvIxxXg0pJxeid5eo+UjdjME3DBFBn2F8yWOE0XmiFcFbXxrEOR1JriWEno5Ckpn15A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
PDF로 저장할 콘텐츠 가져오기
var pdf_content = document.getElementById("pdf_body");
파일에 옵션 또는 구성 추가
var options = {
margin: 1,
filename: 'isolates.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
파일 저장
html2pdf(pdf_content, options);
언급URL : https://stackoverflow.com/questions/6896592/is-it-possible-to-save-html-page-as-pdf-using-javascript-or-jquery
'programing' 카테고리의 다른 글
| MariaDB + Galera 노드 99% RAM 사용 (0) | 2023.08.09 |
|---|---|
| PHP 표시 ???내가 mysql에서 히브리어를 보여줄 때 히브리어 대신에. (0) | 2023.08.09 |
| 12c jar를 사용하여 Oracle 12c로 Eclipse 데이터 원본을 만들 수 없습니다.그러나 11g은 작동합니다. (0) | 2023.08.09 |
| Pylint의 Cell-var-from-loop 경고 (0) | 2023.08.09 |
| Spring Framework에서 주석을 사용하여 빈 이름을 설정할 수 있습니까? (0) | 2023.08.09 |