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.
Related
I am using vue2-dropzone library and my complaint is the ref value of a dropzone component doesn't contain the file user droped.
After user adds the second file the ref of dropzone contains only previous one.
But it works correctly when user select on file dialog.
<vue-dropzone ref="docfile" id="dropzone" :options="dzOptions"></vue-dropzone>
dzOptions: {
url: self.$apiUrl + "client/documents/",
autoProcessQueue: false,
acceptedFiles: "application/pdf",
uploadMultiple: false,
maxNumberOfFiles: 1,
maxFilesize: 30,
addRemoveLinks: true,
dictDefaultMessage: "Select File",
init: function() {
this.on("addedfiles", function(files) {
if (files.length > 1) {
self.$toaster.error("You can upload only one.");
this.removeAllFiles();
return;
}
if (files[0].type != "application/pdf") {
self.$toaster.error("You can upload only pdf file.");
this.removeAllFiles();
return;
}
self.upload();
});
}
}
upload() {
var self = this;
if (self.$refs.docfile.dropzone.files.length == 0) {
self.$toaster.error("No document to upload.");
return;
}
var filePath = self.$refs.docfile.dropzone.files[0];
...
}
You are accessing your references like this:
self.$refs.docfile.dropzone
Try like this:
self.$refs.docfile
As per the files, you could get them with the: getAcceptedFiles(), getRejectedFiles(), getQueuedFiles() methods.
Some example on how to use vue-uploads events:
data: () => ({
dropzoneOptions: {
...
},
myFiles: []
}),
<vue-dropzone ref="myVueDropzone" id="dropzone"
:options="dropzoneOptions"
#vdropzone-success="filesUploaded">
</vue-dropzone>
filesUploaded(event){
this.myFiles.push(JSON.parse(event.xhr.response));
},
I found that there is a delay when user drag a file.
So I have fixed this issue using timeout in dropzone option like following.
dzOptions: {
url: self.$apiUrl + "client/documents/",
autoProcessQueue: false,
acceptedFiles: "application/pdf",
uploadMultiple: false,
maxNumberOfFiles: 1,
maxFilesize: 30,
addRemoveLinks: true,
dictDefaultMessage:
"Select File",
init: function() {
this.on("addedfiles", function(files) {
var dz = this;
setTimeout(function() {
self.upload();
}, 500);
});
}
}
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;
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);
}
I have a problem with the youtube javascript player api.
I call this js code :
function onYouTubeIframeAPIReady() {
var podcast = document.getElementById('podcast')
var player = new YT.Player( document.getElementById('podcast'));
player.addEventListener('onStateChange', function(e) {
if (e.data === 1) {
alert("play");
}
});
};
with this html code :
<iframe id="podcast" type="text/html" width="720" height="405"
src="https://www.youtube.com/embed/XXXXXX?cc_load_policy=1&enablejsapi=1&theme=light"
frameborder="0" allowfullscreen>
The problem is that I use the pjax system, so the global javascript code is not reloaded when I navigate.
So, I reload some part of my javascript code when pjax:success. I tried something like this :
$(document).on('pjax:success', function() {
onYouTubeIframeAPIReady();
}
but it doesn't work. My question is how to reload onYouTubeIframeAPIReady(); when it must to be defined globally as it is said there onYouTubeIframeAPIReady function is not calling
When my player is defined I don't use onYoutubePlayerAPIReady. It's the best solution I find, and it works.
var player = {
playVideo: function(container, videoId) {
if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') {
window.onYouTubePlayerAPIReady = function() {
player.loadPlayer(container, videoId);
};
$.getScript('//www.youtube.com/player_api');
} else {
player.loadPlayer(container, videoId);
}
},
loadPlayer: function(container, videoId) {
window.myPlayer = new YT.Player(container,
height: 200,
width: 200,
videoId: videoId,
});
}
};
var containerId = 'podcast';
var videoId = '<%= #youtube_id %>';
player.playVideo(containerId, videoId);