[英]Converting Html Css to Pdf and Download it, Same as the Design
I am trying to download a pdf out of a html and css file, the html/css page design and the pdf should be exactly same. I am trying to download a pdf out of a html and css file, the html/css page design and the pdf should be exactly same.
below is my javascipt!下面是我的javascipt!
function generatePDF2() {
var doc = new jsPDF();
var elementHTML = $("#contnet").html();
var specialElementHandlers = {
"#elementH": function(element, renderer) {
return true;
}
};
doc.fromHTML(elementHTML, 15, 15, {
width: 170,
elementHandlers: specialElementHandlers
});
// Save the PDF
doc.save("sample-document.pdf");
}
Html Html
<div id="contnet">
<!-- HTML contnet goes here -->
<h1>Lorem Ipsum</h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora dolor dolorum quos quaerat consequatur doloribus mollitia distinctio eius voluptate excepturi voluptatibus nihil officia, nam animi non perferendis, unde accusantium ut.
</div>
<div id="elementH"></div>
<button onclick="generatePDF2();">Generate2</button>
unfortunately this solution i found doesnt work!不幸的是,我发现这个解决方案不起作用!
these are the header i load这些是我加载的 header
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/core.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
Couldn't find a solution for this question.. but found an alternative..找不到这个问题的解决方案..但找到了替代方案..
below is the html body下面是 html 机身
<div class="container">
<h3>PDF converter</h3>
<button id="download" class="btn btn-success mb-4">Download</button>
<div style="background-color:white;" id="first-page">
<div class="container border p-4">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint iusto
nam minus consequatur vitae fugit, tenetur reprehenderit officiis
deserunt quibusdam id adipisci delectus dolorum eveniet expedita
dolores culpa excepturi voluptatem.
</p>
</div>
</div>
</div>
this is the javascript i used to get the pdf same as the design..这是我用来获得与设计相同的 pdf 的 javascript。
<script>
$("#download").click(function() {
var pdf = new jsPDF("a", "mm", "a4");
var firstPage;
var secondPage;
html2canvas($("#first-page"), {
onrendered: function(canvas) {
firstPage = canvas.toDataURL("image/jpeg", 1.0);
}
});
setTimeout(function() {
pdf.addImage(firstPage, "JPEG", 5, 5, 200, 220);
pdf.save("export1.pdf");
}, 150);
});
</script>
and these are the header i used.. this include the bootstrap headers as well这些是我使用的 header .. 这也包括引导头
<!-- bootstrap style-->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<!-- bootstrap js -->
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
This is closest i found when downloading your html & css as a pdf file... not perfect but works..这是我在下载 html 和 css 作为 pdf 文件时发现的最接近的文件...不完美但有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.