Don't know if the question is well put, but here is my problem: I managed to export my chart to PDF format using jspdf.min.js through this piece of code:
$("#generate").on("click", function (e) {
html2canvas($("#placeholder").get(0), {
onrendered: function (canvas) {
var imgData = canvas.toDataURL('image/png');
console.log('Report Image URL: ' + imgData);
var doc = new jsPDF('portrait');
doc.addImage(imgData, 'PNG', 10, 10, 190, 95);
doc.text("TEST TEXT");//I tried to add a text in PDF file,but didn't work
doc.save('sample-file.pdf');
}
});
});
Is there a way to add a title of my chart in the PDF file?
Try this example. Is a trick which might help you. Don't forget to update your options:
var options = {
canvas: true,
grid: {
margin: {
top:50
},
}
};
Related
I am trying to generate PDF from image path in react native so i am using below plugin for that
https://www.npmjs.com/package/react-native-image-to-pdf/v/1.2.0
As per above doc i configure all the thing and below is my code
const myAsyncPDFFunction = async () => {
try {
console.log('Call a');
let path ='file:///Users/macminiharshalk/Library/Developer/CoreSimulator/Devices/FADDF530-05FD-4A0E-9E61-C6AEDB719955/data/Containers/Data/Application/37B8FE42-B23A-4018-865F-F57670B3411E/tmp/606C88B3-5759-4942-A544-1231A0C17532.jpg';
const options = {
imagePaths: [path],
name: 'PDFName',
maxSize: {
// optional maximum image dimension - larger images will be resized
width: 900,
height: Math.round(
(Dimensions.get('window').height / Dimensions.get('window').width) *
900,
),
},
quality: 0.7, // optional compression paramter
// targetPathRN: "/storage/emulated/0/Download/", // only for android version 9 and lower
//for versions higher than 9 it is stored in (Download/img-to-pdf/)
};
console.log("options-->", options);
const pdf = await RNImageToPdf.createPDFbyImages(options);
console.log('PDF URIs-->', pdf);
console.log(pdf.filePath);
} catch (e) {
console.log(e);
}
};
When i console log i can able to see pdf path as below
/Users/macminiharshalk/Library/Developer/CoreSimulator/Devices/FADDF530-05FD-4A0E-9E61-C6AEDB719955/data/Containers/Data/Application/37B8FE42-B23A-4018-865F-F57670B3411E/Documents/PDFName.pdf
When i console option parameter it is showing as below
{"imagePaths": ["file:///Users/macminiharshalk/Library/Developer/CoreSimulator/Devices/FADDF530-05FD-4A0E-9E61-C6AEDB719955/data/Containers/Data/Application/37B8FE42-B23A-4018-865F-F57670B3411E/tmp/606C88B3-5759-4942-A544-1231A0C17532.jpg"], "maxSize": {"height": 1948, "width": 900}, "name": "PDFName", "quality": 0.7}
But when i open PDF image is not copy it is blank PDF so any idea how can i show image in PDF ?
please try
const newPath = path.replace('file://', '');
I have been stuck in this for several days .
i have created pdf using jsPDf lib and im trying to css in the created pdf. PDF generated is like this https://prnt.sc/tq9gqx and i want to make pdf like https://prnt.sc/tq9ivi.
Your help will be highly appreciated.
<script>
function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'a4', true);
source = $('#content')[0];
specialElementHandlers = {
'#bypassme': function (element, renderer) {
return true
}
};
margins = {
top: 80,
bottom: 60,
left: 40,
width: 522
};
pdf.fromHTML(
source,
margins.left,
margins.top, {
// y coord
'width': margins.width, // max width of content on PDF
'elementHandlers': specialElementHandlers
},
function (dispose) {
pdf.save('ticket');
var pdfBase64 = pdf.output();
var email= 'check#email.com';
$.ajax({
'url': baseUrl + '/site/email',
'method': 'post',
'data': {
'pdfBase64': pdfBase64,
'email':email
},
'success': function (result) {
if (!result == 'true') {
notify('Sorry Email NOt sent', 'danger');
} else {
notify('Ticket sent', 'success');
}
},
'error': function (error) {
notify('Server Error. Sorry Email Not Sent', 'danger');
}
});
}, margins
);
// $('#email').val(pdfBase64);
}
</script>
Don't put style in external files. can you apply your style inline or same file.
I want to check pdf file size with jspdf.js script. I need to display this on the screen before downloading file. Are there any possibilities?
function demoFromHTML(x = false) {
var pdf = new jsPDF('p', 'pt', 'letter');
source = $('#print')[0];
specialElementHandlers = {
'#bypassme': function (element, renderer) {
return true
}
};
margins = {
top: 80,
bottom: 60,
left: 40,
width: 522
};
pdf.fromHTML(
source,
margins.left,
margins.top, {
'width': margins.width,
'elementHandlers': specialElementHandlers
},
function (dispose) {
if(x){
pdf.output('dataurlnewwindow');
}else{
pdf.save('<?php the_title() ?>.pdf');
}
}, margins
);
}
Test this :
pdf.output('datauristring').length
It work for me
I've found a solution, It was pretty simple.
Maybe someone will use it:
pdf.output().length;
I am exporting a diagram made using Jointjs library to pdf using jspdf and canvas:
Below is my javascript code::
var svg = document.querySelector('svg');
var serializer = new XMLSerializer();
var svgString = serializer.serializeToString(svg);
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillStyle = '#FFFF';
canvg(canvas, svgString);
var imgData = canvas.toDataURL('image/png');
// Generate PDF
doc.setFontSize(10);
doc.text(35, 25, "Google Cloud Craft");
doc.addImage(imgData, 'PNG', 10, 50);
doc.save('test.pdf');
the result i get after downloading and on canvas is:
What i want is those black arrow marks should not come as they are shown on mouseover events, it should be like below image for reference:
please let me know how can i achieve this.
Let me try to answer.
Add the below code to hide the mouse-over elements before serialising it
$(".marker-arrowhead").css("display", "none");
$(".tool-remove").css("display", "none");
$(".tool-options").css("display", "none");
$(".marker-vertices").css("display", "none");
Hope this helps you.
I found a solution sharing, so that if anyone faces this issue can get help.
this is the solution, who are familiar with jointjs will understand it.
link.attr({
'.marker-arrowheads': {
fill: 'none'
},
'.connection-wrap': {
fill: 'none'
},
'.marker-vertices': {
fill: 'none'
},
'.link-tools': {
fill: 'none'
}
});
Here my proposition :)
const classes = ['.marker-vertices', '.link-tools'];
const svg = this.paper.svg.cloneNode(true);
// remove tools
classes.forEach(c => {
const elements = svg.querySelectorAll(c);
elements.forEach(el => { el.style.display = 'none'; });
});
I'm using jsPDF to export a table to PDF, however I get a pdf with all the info displayed as a list, I'd like to have the pdf display the full table as seen on the HTML could someone help me see whats wrong with my code?
function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter');
source = $('#customers')[0];
specialElementHandlers = {
'#bypassme': function(element, renderer) {
return true
}
};
margins = {
top: 80,
bottom: 60,
left: 40,
width: 522
};
pdf.fromHTML(
source,
margins.left,
margins.top, {
'width': margins.width, //
'elementHandlers': specialElementHandlers
},
function(dispose) {
pdf.save('Test.pdf');
}
, margins);
}