Connect with us


javascript pdf [Convert web to pdf using jspdf]



First of all, I want to tell you guys this is my first post of this blog I hope you will like it.
As you already know these days Javascript has become a powerful tool to build an interactive website. Now javascript can do most of the backend jobs. Here I am using two important libraries jspdf and html2canvas to make javascript pdf. I will demonstrate how you can capture any div into pdf.

You are here because you might be software developer like I am and let’s assume you have a requirement to save google map into the pdf or you want to save any div into the pdf then you are at right place here I will discuss every line of code to do it.


1. Required api for javascript pdf

  1. Jquery.js
  2. Jspdf.js
  3. Html2canvas.js

These APIs are free to use and you can embed in your project. Alright, let’s begin by coding.

2. Code

var doc = new jsPDF();
html2canvas($('#map_canvas'), {
useCORS: true,
onrendered: function (canvas) {
var img = canvas.toDataURL("image/jpeg");
'JPEG', 15, 40, 180, 180);'fileName');

3. Code explanation

In the above code we are using mainly two libraries which is handling all the tasks of javascript pdf. Firstly, we are instantiating jsPDF() object which will basically generate the pdf and in another object, we are passing map’s div and configuration object.
In the configuration, we have used useCORS: true, It is basically for the cross-domain means images will render easily.

We have another method named canvas.toDataURL(“image/jpeg”) Which is returning the data URI. doc.addImage basically assigning the x and y of the map into the pdf with height and width. If you want to embed the above code just import the library mentioned in section 1.
Well, I guess, we are done. If you have any confusion or code is not working on your end or you want a working demo please do comment below I will help you to fix this.

Continue Reading


  1. Kayce Sias

    March 12, 2019 at 8:34 am

    I think other web-site proprietors should take this website as an model, very clean and great user friendly style and design, as well as the content. You’re an expert in this topic!

  2. Renae Fossa

    March 15, 2019 at 3:37 am

    I cannot thank you enough for the blog post.Really looking forward to read more. Awesome.

Leave a Reply

Your email address will not be published. Required fields are marked *


4 Best IDE for javascript development




Hi folks, Thanks for coming back. If you looking for best IDE for javascript development then you are at right place.

What is javascript?
Javascript is a powerful browser-based programming language. It is used to created dynamic web pages. It can do lots of stuff from DOM manipulation to server interaction. Having good IDE can boost up your productivity.

As I am also web developer I can understand how much ide plays a roll in your coding.

Someone said a great a beautiful line.

Great things happen when developers work together—from teaching and sharing knowledge to building better software.

Ide helps you in code suggestion as eclipse do. You just have to enter ctrl+space then ide does its 70% job.

If you are using Notepad or Notepad++ for javascript coding and you use your browser for debugging then I have few IDE for you and I promise you won’t open developer tool again for your debugging.

So here I am going to show you some ide which will make your javascript development like a piece of cake.

Coding is an art, and using it with the right tools will make your art rise and shine!

Alright let’s begin by unboxing 1st ide


1. WebStorm(Paid)

It is one of the popular and best IDE for javascript development. Lots of MNC companies are using it. Webstorm originally developed by JetBrains and it is a paid software. It also comes with 30 days trial if you are a student you can claim for it from the JetBrains. So I would like to start with its features because these are the main factor in choosing an IDE.


Features of webstorm

  1. You can debug your code inside IDE.
  2. Intelligent coding assistance. It can detect the error on the fly and give you suggestion regarding code refactoring.
  3. It supports modern frameworks like Angular, React, Vue.js, Meteor, React Native, PhoneGap, Cordova, Ionic, Node.js
  4. Hundreds of built-in inspections reports.
  5. Testing: WebStorm integrates with Karma test runner, MochaJest, and Protractor
  6. WebStorm have spy-js, A tool that helps in tracing your code. It helps you in exploring that how files are connected with function calls and identify any possible bottlenecks
  7. With the Webstorm you can easily add unsupported framework and APIs
  8. In Webstorm you can customize everything with the help of GUI you don’t need to mess with configuration file.
  9. The main reason I like it because it provides a great searching mechanism (shift+shift). It will help you to search everything variable to function.
  10. It comes with a custom menu option. You can customize your menu according to your coding style.
  11. You can run build tool inside IDE like Grunt, gulp and NPM tasks with the help of GUI. Webstorm made Integration with build systems super easy.
  12. It supports code quality tools like ESLint, JSCS, TSLint, StyleLint, JSLint
  13. Webstorm provides UI to work with popular VCS (version control system) like git, GitHub, SVN, Mercurial, and Perforce.
  14. Are you bored from default user interface? Here Webstorm comes in action all the user interface is 100% customizable and you can add themes in it.
  15. You can manage the plugins.
  16. It supports file watcher every time you change the code it can execute your custom commands.
  17. And many more

Also read:-
1. javascript pdf [Convert web to pdf using jspdf]
2. HTML interview questions and answers for freshers

Alright lets unbox second IDE

2. Aptana Studio (Free)

It is another best IDE for javascript development. Aptana Studio is an open source IDE and it is built on eclipse
If you are an eclipse lover then I am sure you will love it. Its UI looks like you are running eclipse. You can debug code easily with the help of Aptana studio.

Features of Aptana Studio

  1. It supports HTML, HTML5, CSS, JavaScript, PHP, and Ruby. It can show the information about the level of support for each element in the major web browsers. Like some older browser does not support some HTML5 elements. You can easily find them out.
  2. Aptana comes with deployment wizard you can use heroku and engine yard with it.
  3. Integrated debugger: you can easily debug the javascript code inside the debugger.
  4. Code assist: for HTML, CSS, Javascript.
  5. Built-in terminal.

3. Atom(Free)

Atom is another best IDE for javascript development. It is known as the hackable editor of the 21st century. Atom IDE is a free and open- source editor which mean you can modify it as well. Code editing is effortless with Atom.

Atom comes with the live page preview feature and you can view the live page preview by just clicking a button, But you will need to install a package name atom live server and it comes with some drawback as well.

Speed is a bit slow when you launch it for the first time for me it took around 15 secs. And second, it cannot handle large files.

So lets discuss some cool features of Atom.

Features of Atom

  1. Atom comes with great features which make it enjoyable. In the atom IDE, You can share the workspace with the other developers in real time which mean you don’t worry about code conflict at all.
  2. Atom is a cross-platform IDE we can use it on Windows, OSX, and Linux.
  3. It comes with a built-in package manager we can search and install the packages or we can create own package using Atom.
  4. We can easily customise the UI.
  5. It comes with a command palette.

4. Sublime Text(Free)

Sublime is another best IDE for javascript development. It first introduced in the market on January 18, 2008, and sublime 3 recently released on 13 September 2017. Sublime support many languages from Actionscript to YAML. I am using Sublime text editor from last 3 years. I like its dark theme very much. It is a fast ide for the developers. Here I am going to discuss some cool features of sublime that will blow your mind.

Features of sublime

  1. Multiple sections can be renamed easily. With the help Ctrl+D, We can edit various parts. Let’s assume that we have a variable self and we want to change it to this. Then we have to select self variable using Ctrl+D
  2. We can navigate source via goto definition. We have to do mouse hove on method call sublime will show you the file name and method declaration.
  3. All methods of the file can be navigated easily using Ctrl+R It will show you all method available in the file.
  4. Goto Anything. We can find any file in sublime using Ctrl+P
  5. Command Palette. Lots of commands can be found using Ctrl+Shift+P.
  6. Package control. We can install package control using the command palette.
  7. Easily customizable

I will add some more best IDE for javascript development in future.

Continue Reading