I have done it, after doing lot of R&D , their are few steps to follow as below : Install : npm install jspdf –save typings install dt~jspdf –global –save npm install @types/jspdf –save Add following in angular-cli.json: “scripts”: [ “../node_modules/jspdf/dist/jspdf.min.js” ] html: <button (click)=”download()”>download </button> component ts: import { Component, OnInit, Inject } from … Read more
Best possible solution I could come up with till now. You would have to install the below packages from npm html2canvas jspdf import * as jsPDF from ‘jspdf’; import html2canvas from ‘html2canvas’; htmltoPDF() { // parentdiv is the html element which has to be converted to PDF html2canvas(document.querySelector(“#parentdiv”)).then(canvas => { var pdf = new jsPDF(‘p’, … Read more
Use this: window.jsPDF = window.jspdf.jsPDF;
This is because you define your “doc” variable outside of your click event. The first time you click the button the doc variable contains a new jsPDF object. But when you click for a second time, this variable can’t be used in the same way anymore. As it is already defined and used the previous … Read more
I found this was possible by modifying jsPDF.js to expose the existing addFont method in the public API. In jsPDF.js, look for: //————————————— // Public API Add the following: API.addFont = function(postScriptName, fontName, fontStyle) { addFont(postScriptName, fontName, fontStyle, ‘StandardEncoding’); }; I put this method near other font methods for clarity – API.setFont, API.setFontSize, API.setFontType, etc. … Read more
First import the PDF library as: import jsPDF from ‘jspdf’ Then simply instantiate the object and give it the contents: methods: { createPDF () { let pdfName=”test”; var doc = new jsPDF(); doc.text(“Hello World”, 10, 10); doc.save(pdfName + ‘.pdf’); } } Make sure to read the documentation for more
You might want to look at the AutoTable plugin for generating tables with jsPDF. I found the built in plugin hard to work with and isn’t documented at all. The best way I have found to calculate the width is simply doing this: var doc = new jsPDF(); var width = doc.getTextWidth(‘Text’); console.log(width); If you … Read more
you can use scale options in html2canvas. In the latest release, v1.0.0-alpha.1, you can use the scale option to increase the resolution (scale: 2 will double the resolution from the default 96dpi). // Create a canvas with double-resolution. html2canvas(element, { scale: 2, onrendered: myRenderFunction }); // Create a canvas with 144 dpi (1.5x resolution). html2canvas(element, … Read more
Here is working example: in head <script type=”text/javascript” src=”https://stackoverflow.com/questions/23035858/jspdf.debug.js”></script> script: <script type=”text/javascript”> function demoFromHTML() { var pdf = new jsPDF(‘p’, ‘pt’, ‘letter’); // source can be HTML-formatted string, or a reference // to an actual DOM element from which the text will be scraped. source = $(‘#customers’)[0]; // we support special element handlers. Register them … Read more
I think the problem is that you use media=”print” instead of media=”screen”. Try making two seperate files, one for print and one for the screen: <link rel=”stylesheet” href=”https://stackoverflow.com/questions/20460035/print.css” type=”text/css” media=”print”/> <link rel=”stylesheet” href=”screen.css” type=”text/css” media=”screen”/> The screen one will contain the styling for the page as seen in a browser. The print one will contain … Read more