jsPDF is able to use plugins. In order to enable it to print HTML, you have to include certain plugins and therefore have to do the following:
- Go to //github.com/MrRio/jsPDF and download the latest Version.
- Include the following Scripts in your project:
- jspdf.js
- jspdf.plugin.from_html.js
- jspdf.plugin.split_text_to_size.js
- jspdf.plugin.standard_fonts_metrics.js
If you want to ignore certain elements, you have to mark them with an ID, which you can then ignore in a special element handler of jsPDF. Therefore your HTML should look like this:
don't print this to pdf
print this to pdf
Then you use the following JavaScript code to open the created PDF in a PopUp:
var doc = new jsPDF[];
var elementHandler = {
'#ignorePDF': function [element, renderer] {
return true;
}
};
var source = window.document.getElementsByTagName["body"][0];
doc.fromHTML[
source,
15,
15,
{
'width': 180,'elementHandlers': elementHandler
}];
doc.output["dataurlnewwindow"];
For me this created a nice and tidy PDF that only included the line 'print this to pdf'.
Please note that the special element handlers only deal with IDs in the current version, which is also stated in a GitHub Issue. It states:
Because the matching is done against every element in the node tree, my desire was to make it as fast as possible. In that case, it meant "Only element IDs are matched" The element IDs are still done in jQuery style "#id", but it does not mean that all jQuery selectors are supported.
Therefore replacing '#ignorePDF' with class selectors like '.ignorePDF' did not work for me. Instead you will have to add the same handler for each and every element, which you want to ignore like:
var elementHandler = {
'#ignoreElement': function [element, renderer] {
return true;
},
'#anotherIdToBeIgnored': function [element, renderer] {
return true;
}
};
From the examples it is also stated that it is possible to select tags like 'a' or 'li'. That might be a little bit to unrestrictive for the most usecases though:
We support special element handlers. Register them with jQuery-style ID selector for either ID or node name. ["#iAmID", "div", "span" etc.] There is no support for any other type of selectors [class, of compound] at this time.
One very important thing to add is that you lose all your style information [CSS]. Luckily jsPDF is able to nicely format h2, h2, h3 etc., which was enough for my purposes. Additionally it will only print text within text nodes, which means that it will not print the values of textareas and the like. Example:
- Print me!
Run
Save
Fork
Set as base
Collaborate
- Settings
- Sign in
Editor layout
Classic Columns Bottom results Right results Tabs [columns] Tabs [rows]
Console
Console in the editor [beta]
Clear console on run
General
Line numbers
Wrap lines
Indent with tabs
Code hinting [autocomplete] [beta]
Behavior
Auto-run code
Only auto-run code that validates
Auto-save code [bumps the version]
Auto-close HTML tags
Auto-close brackets
Live code validation
Highlight matching tags
Boilerplates
Show boilerplates bar less often
Save anonymous [public] fiddle?
- Be sure not to include personal data
- Do not include copyrighted material
Log in if you'd like to delete this fiddle in the future.
Fork anonymous [public] fiddle?
- Be sure not to include personal data
- Do not include copyrighted material
Log in if you'd like to delete this fiddle in the future.
JavaScript HTML CSS Result Light Dark No autoresizing to fit the code Render blocking of the parent pageTabs:
Visual:
Embed snippet Prefer iframe?:
Fiddle meta
Resources URL cdnjs 1
- jspdf.min.js Remove
- Paste a direct CSS/JS URL
- Type a library name to fetch from CDNJS
Async requests
/echo
simulates Async calls:
JSON:
/echo/json/
JSONP: //jsfiddle.net/echo/jsonp/
HTML: /echo/html/
XML: /echo/xml/
See docs for more info.
Other [links, license]
Created and maintained by Piotr and Oskar.
Hosted on DigitalOcean
All code belongs to the poster and no license is enforced. JSFiddle or its authors are not responsible or liable for any loss or damage of any kind during the usage of provided code.
Links
Bug tracker
Roadmap [vote for features]
About
Docs
Service status
Language
Doctype
Body tag
Language
Frameworks & Extensions
Framework attribute
Language
Options
Normalized CSS
- This fiddle has previously unsaved changes. Apply changes Discard
IE is no longer supported 📠