Export div content to PDF using javascript

May 1, 2020October 5, 2020JQuery, JQuery - Problems and Solutions

jquery code to generate pdf from div with automatic height and width –

Its can be easily done with html2canvas and jspdf. So, to generate pdf, first of all we have to include html2canvas and jspdf library.

For example –

Let’s say we have a div with id content and on a button(say Generate pdf) click, we want to export its content as a pdf.

First, write the code for creating button and include the required libraries(html2canvas and jspdf) –

<button id=”generatePDFbtn”>Generate PDF</div>

<div id=”content”>hello</div>

Then, create an event handler function to handle button click(Generate pdf button in our example) and write the code to generate the pdf –

$(document).on(“click”, “#generatePDFbtn”, function() {

html2canvas(document.getElementById(“content”)).then(function(canvas) {

var imgData = canvas.toDataURL(“image/jpeg”, 1.0);

var pdf = new jsPDF(‘p’, ‘mm’, [400, 480]);

pdf.addImage(imgData, ‘JPEG’, 0, 0, 400, 480);

pdf.save(“search-result.pdf”);

});

</script>

For more related queries, please VISIT.

In case, if you did not find your solution or have any query/question, please contact us.

How to encode base64 in jQuery ?

November 30, 2019October 2, 2020JQuery, JQuery - Problems and Solutions, Programming Language

Encode base64 in jQuery –
btoa() function is used for it.
For Example –
var str = ‘Hello’;
var encrypted_str = btoa (str);
alert( encrypted_str );

Output – SGVsbG8=

For more related queries, please VISIT.

In case, if you did not find your solution or have any query/question, please contact us.

JQuery / Javascript Interview Questions

November 28, 2019October 5, 2020JQuery, PHP, PHP Interview Questions, Programming Language

Ques: What is difference between setInterval () and setTimeout () ?

Ans: setInterval(expression, time) – It will run the code or function in the time interval.
Example –
setInterval(function(){ alert(“Hello”); }, 1000);
This will alert “Hello” after every 1 second(1000 milliseconds).

setTimeout() – It will run after the time.
Example –
setTimeout(function(){ alert(“Hello”); }, 1000);
This will alert “Hello” once only after 1 second(1000 milliseconds).

Ques: When will be the fourth argument to open() function ?

Ans: When the second argument named as existing window.

For more related queries, please visit.

In case, if you did not find your solution or have any query/question, please contact us.

Append or insert an element(div) after another element(div)

November 19, 2019October 2, 2020JQuery, JQuery - Problems and Solutions, Programming Language

Insert an element (div) after another element(div) –
JQuery .after() and .insertAfter() functions can be used to append or insert an after other element.
Both performs the same task. The only difference between them is syntax.

In .after(), the first selector is that element after which other element will be inserted while in .insertAfter(), the second selector is that after which the element will be appended(inserted).

Let us take an example we have to insert an element after a paragraph tag –
So, it can be done in 2 ways –
<p>This is dummy text.</p>

With .after() –
$(“p”).after(“<p>The above is dummy text.</p>”);

With .insertAfter() –
$(” <p>The above is dummy text.</p>”). insertAfter (“p”);

Both of the above will insert new paragraph( The above is dummy text. ) after above paragraph( This is dummy text. ).

For more related queries, please VISIT.

In case, if you did not find your solution or have any query/question, please contact us.

Read contents from input type file

November 19, 2019October 2, 2020JQuery, JQuery - Problems and Solutions, Programming Language

Read input type file contents –
File content can be read using FileReader function of javascript. Here is an example for explanation –

Create HTML (input field and a div where we have to show the content of file) –

Now call JS function –

const reader = new FileReader()
function readinputfile (input) {
const input = input.files[0]
reader.readAsText(input)
}
reader.onload = function (e) {
document.querySelector(‘. showfilecontent ‘).innerText = e.target.result;
}