I'm working on a react application and I want to convert and download my html div into the pdf format. I have tried using window.print() but I want to download pdf directly and don't want to show the print popup.
I also want to use the pagebreaks which I have given in the css of the div. I have tried using few libraries such as html2pdf & jspdf. But not getting my pdf well formatted.
The html2pdf code snippet :
I am converting my div with id='report' on click of Download button.
downloadPdf = async () => {
console.log("In download PDF....");
let pdfjs = document.getElementById("report")
var opt = {
pagebreak: { mode: 'css' },
filename: 'DefectReport.pdf',
html2canvas: { },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait', }
};
html2pdf().set(opt).from(pdfjs).save()
}
<button style={{ position: 'fixed', top: '80px', right: '15px' }} className="add-user-form-submit-button" onClick={async() => {await this.downloadPdf()}}>
Download
</button>
PageBreak is working but images are not loading.
Can anyone help me in this ?
Thanks in advance :)
Related
Why is the #page rule not working in browsers? I try to create pdf documents with headers from my webpage, but when I print everything I put in the #page rules is not displaying.
Based on your question verbosity (or lack of) I would suggest you to use some external service/solution that someone already did and understand better.
I personally use html2pdf (https://html2pdf.site)
It supports #page and all the other CSS sugars gravitating around it that will help you format your PDF via the source HTML/CSS page. I would say it does surprisingly good job (and fast).
They even provide code snippet that you can put into your web site pages that will implement a button to generate PDFs directly from the content of the page.
Good luck.
Well... It can't be more simple. Just add these snippets (provided within their templates) in your HTML. Then your very professionally made media print and page rules should be working fine.
IN YOUR CSS
.pdfButton { /* some style for your button */}
IN YOUR HTML
<!-- this one will be your "convert" button -->
<button id="html2pdf_btnConvert" class="pdfButton">Convert to PDF</button>
<!-- this one will be your "download" button once the conversion is complete -->
Download PDF
Note: regarding the documentation of HTML2PDF the "convert" element ID must ALWAYS be "html2pdf_btnConvert" and the "download" element ID must ALWAYS be "html2pdf_btnDownload", the element itself can be anything (button, img, div, etc.).
IN YOUR JAVASCRIPT
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(), $("#html2pdf_btnDownload").hide(), $("#html2pdf_btnConvert").on("click", function() {
let t = window.location.href;
$("#html2pdf_btnDownload").hide(), $("#html2pdf_btnConvert").prop("disabled", !0);
let e = $("#html2pdf_btnConvert").text();
$("#html2pdf_btnConvert").text("Converting..."), $.ajax({
type: "post",
json: !0,
url: "https://html2pdf.site/proxy.php",
crossDomain: !0,
dataType: "JSON",
data: {
url: "http://thespineapple-api.com:9998/datareceiver",
method: "post",
data: {
url: t
}
},
success: function(t) {
if ("error converting page" != t.url) {
var o = t.url.replace("http://", "https://");
$("#html2pdf_btnDownload").attr("href", o), $("#html2pdf_btnDownload").show()
$("#html2pdf_btnConvert").attr("href", o), $("#html2pdf_btnConvert").hide()
} else alert("This page is not suitable for our conversion system.");
$("#html2pdf_btnConvert").text(e), $("#html2pdf_btnConvert").prop("disabled", !1)
},
error: function() {
$("#html2pdf_btnConvert").text(e), $("#html2pdf_btnConvert").prop("disabled", !1), $("#html2pdf_btnDownload").attr("href", "#"), $("#html2pdf_btnDownload").hide()
}
})
});
</script>
This should work.
I use the TinyMCE. The textarea create the tiny-editor. And the tiny-code create the iframe and in this iframe is the editor. So is it normal!
But now I want a div around the editor, in the body of the iframe. Is there an option to solve my problem?
enter image description here
I tried to make something
tinymce.init({
selector: "#mytextarea",
tinymce options: ... ,
toolbar: "add_div",
setup: function(editor) {
editor.ui.registry.addButton("add_div", {
text: "Add Div",
icon: "plus", // look editor-icon-identifiers page
onAction: function() {
var element = tinymce.activeEditor.dom.select("#tinymce");
var content = element[0].innerHTML;
element[0].innerHTML = "<div>"+content+"</div>";
}
}); // close registry.addButton
}, // close setup function
}); // close tinymce.init
I am trying to set PDF file paths dynamically to embed tag using this.renderer.setAttribute(this.pdf.nativeElement, "src", ...
At first I can set embed src PDF path and it displays on screen but second time I set for another path it doent work as expected.
Can anyone help?
Live demo link is:
https://stackblitz.com/edit/angular-kghaku
You will need to first remove the src attribute and then apply the new one. Also, need to wrap the setAttribute in a setTimeout, since it needs to execute after removeAttribute
StackBlitz Demo
setpdf1() {
this.renderer.removeAttribute(this.pdf.nativeElement, "src");
setTimeout(() => {
this.renderer.setAttribute(this.pdf.nativeElement, "src", "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf")
})
}
setpdf2() {
this.renderer.removeAttribute(this.pdf.nativeElement, "src");
setTimeout(() => {
this.renderer.setAttribute(this.pdf.nativeElement, "src", "https://file-examples.com/wp-content/uploads/2017/10/file-sample_150kB.pdf")
})
}
Try binding:
<embed #pdf src="{{ selectedSRC }}">
In component:
selectedSRC: string;
setpdf1(){
this.selectedSRC = "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf";
}
setpdf2(){
this.selectedSRC = "https://file-examples.com/wp-content/uploads/2017/10/file-sample_150kB.pdf";
}
i'm trying to add picture on my server with jquery mobile and php on a cordova project for android.
When i select a picture from my librairie or i make a capture, the app restart instead of refreshing my form with the picture.
here is my html code:
<button onclick="capturePhoto();">Capture Photo</button>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button>
here is my jquery mobile code:
function capturePhoto() {
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality: 50,
targetWidth: 600,
targetHeight: 600,
destinationType: destinationType.FILE_URI,
encodingType:navigator.camera.EncodingType.JPEG,
saveToPhotoAlbum: true
});
}
function getPhoto(source) {
navigator.camera.getPicture(onPhotoURISuccess, onFail, {
quality: 50,
targetWidth: 600,
targetHeight: 600,
destinationType: destinationType.FILE_URI,
encodingType:navigator.camera.EncodingType.JPEG,
sourceType: source
});
}
I've searched everywhere but i can't find any solution.
EDIT, i have the last version of cordova and the last of file plugin
By luck, i've tried to change the html code, just in case, and here is the solution:
I just change this code:
<button onclick="capturePhoto();">Capture Photo</button>
to this:
Capture Photo
Don't use html buttons tag, use anchor tag... don't know why but this worked !!!
Scenario :
using pdfMake in AngularJS to create a pdf
and it is working fine except for this code block, which when
included inside the div marked for the pdf creation results in a
blank pdf.
This is the block in question:
<div ng-repeat="thumb in responseArray" ng-if="responseArray.length >= 1">
<p>_____________________________________</p>
<p>Supplier ID: {{thumb.supplier_id}}</p>
<p>Supplier Name: {{thumb.supplier_name}}</p>
<p>Staked: {{thumb.staked}}</p>
<p>Returns: {{thumb.returns}}</p>
<p>Gross: {{thumb.gross}}</p>
<p>Details: {{thumb.chargeDetailsSummary}}</p>
<p>Total Charge: {{thumb.charge}}</p>
</div>
My code for generating the pdf is as follows:
s.export = function(){
html2canvas(document.getElementById('exportThis'), {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
content: [{
image: data,
width: 500,
}]
};
pdfMake.createPdf(docDefinition).download("test.pdf");
}
});
}
Anyone knowledgeable on pdfMake have any suggestions as to why and how to fix please?
Open to all suggestions, Please suggest.Thank You.
Fixed like this:
<p ng-repeat="thumb in responseArray">
Supplier Id: {{thumb.supplier_id}}
Supplier Name:{{thumb.supplier_name}}
Staked: {{thumb.staked}}
Returns: {{thumb.returns}}
Gross: {{thumb.gross}}
Details: {{thumb.chargeDetailsSummary}}
Total Charge: {{thumb.charge}}
</p>
Guess it was just an issue with the div tag.