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;
Related
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 am building an iOS app with React native and I want to have a button which when clicked it will export some text data into a pdf file.
The problem is that I use this library and I get the following error.
My code is the following:
exportPDF = async () => {
const page1 = PDFPage
.create()
.setMediaBox(200, 200)
.drawText('You can add text and rectangles to the PDF!', {
x: 5,
y: 235,
color: '#007386',
})
.drawRectangle({
x: 25,
y: 25,
width: 150,
height: 150,
color: '#FF99CC',
})
.drawRectangle({
x: 75,
y: 75,
width: 50,
height: 50,
color: '#99FFCC',
});
const page2 = PDFPage
.create()
.setMediaBox(250, 250)
.drawText('You can add JPG images too!')
// Create a new PDF in your app's private Documents directory
const docsDir = await PDFLib.getDocumentsDirectory();
const pdfPath = `${docsDir}/sample.pdf`;
PDFDocument
.create(pdfPath)
.addPages(page1, page2)
.write() // Returns a promise that resolves with the PDF's path
.then(path => {
console.log('PDF created at: ' + path);
// Do stuff with your shiny new PDF!
}).catch(error => console.log(error));
}
Does anybody know how to fix the unhandled promise rejection?
In order to have PhantomJS create screenshots of a page at different viewport widths, I'd like to adjust it dynamically. This does not work, though:
var system = require('system');
var page = require('webpage').create();
page.viewportSize = { width: 800, height: 600 };
page.open('http://example.com', function (status) {
page.render('medium.png');
page.viewportSize = { width: 630, height: 420 };
page.render('small.png');
phantom.exit();
});
When run with phantomjs script.js this produces two identical PNG files medium.png and small.png at a width of 800px each. Expected behaviour was to have medium.png like this and small.png at a width of 630px. How can this be achieved?
PS: This answer to a similar question produces an error for me. Also the accepted answer to that question suggests quite an ugly workaround I would like to avoid.
I think it should be possible to set the viewport size and open the page again like this:
var system = require('system');
var page = require('webpage').create();
page.viewportSize = { width: 800, height: 600 };
page.open('http://example.com', function (status) {
page.render('medium.png');
page.viewportSize = { width: 630, height: 420 };
page.open('http://example.com', function (status) {
page.render('small.png');
phantom.exit();
});
});
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
},
}
};
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);
}