1

I am working on AngularJs application which at certain point I have to convert some contents in the web page to PDF format

I tried many things but finally thanks to this Stackoverflow question and using this snippet of code

html2canvas(document.getElementById('exportthis'), {
        onrendered: function (canvas) {
            var data = canvas.toDataURL();
            var docDefinition = {
                content: [{
                    image: data,
                    width: 500,
                }]
            };
            pdfMake.createPdf(docDefinition).download("Score_Details.pdf");
        }
    });

I used html2canvas and pdfmake to generate the pdf but the result is not actually a full pdf it just a base64 image contain all the page and exported as pdf file.

I am not able to select any text or click any link it just an image which not the perfect result

Is there anyway to produce real PDF file from HTML via angularJs or Javascript in general

UPDATE :

I tried JsPDF

with there official demo

var doc = new jsPDF();

// We'll make our own renderer to skip this editor
 var specialElementHandlers = {
    '#editor': function(element, renderer){
    return true;
  }
};

// All units are in the set measurement for the document
// This can be changed to "pt" (points), "mm" (Default), "cm", "in"
doc.fromHTML($('#render_me').get(0), 15, 15, {
    'width': 170, 
    'elementHandlers': specialElementHandlers
});

but I get this error

jsPDF Warning: rendering issues? provide a callback to fromHTML!

and unfortunately they don't have documentation event on github all the wiki pages are blank pages !!

Thanks in advance!

Community
  • 1
  • 1
Peter Wilson
  • 4,150
  • 3
  • 35
  • 62
  • You can try [jspdf](https://github.com/MrRio/jsPDF) – Mosh Feu Jun 29 '16 at 13:12
  • @MoshFeu thanks for your reply, I already tried it, but I get an error and I can't find any documentation on the website or even on github .. all there wiki pages just empty pages !!! – Peter Wilson Jun 29 '16 at 13:13
  • There's a demo on the front page of the jsPDF site. Try the text colours example. I found that whether you can select the text from the resulting PDF (which seemed to be your concern) depends somewhat on the PDF viewing software. For instance, using the built-in viewer in Chrome I could select the text, but when using NitroPDF on my machine I could not. – ADyson Jun 29 '16 at 13:15
  • @ADyson I tried HTML render example which is what I wan't exactly, I know it will generate selectable text but I can't fix my error – Peter Wilson Jun 29 '16 at 13:16
  • Have you tried contacting them for help? There's a link on the website. There are also some demos of usage knocking around the web which may or may not help you address the issue. – ADyson Jun 29 '16 at 13:20
  • @ADyson yes I saw the link, but I think I can't depend on a library with this boor documentation – Peter Wilson Jun 29 '16 at 13:22
  • It's working for me: http://jsbin.com/tipoheq/edit?html,js – Mosh Feu Jun 29 '16 at 15:23
  • @MoshFeu The JSBin link does not seem to work. – Prime_Coder Feb 14 '17 at 12:44
  • @Prime_Coder The script's url was broken (apparently they removed it) I fixed the bin with another file reference.. Thanks! – Mosh Feu Feb 14 '17 at 13:21
  • @MoshFeu Thanks for updating the link, I added an image tag with src="http://static.jsbin.com/images/dave.min.svg" in that jsBin and tried to run, a blank pdf is created without any image, can you please modify it to use an image tag? – Prime_Coder Feb 16 '17 at 06:57
  • SVG is tricky. See a [related question](http://stackoverflow.com/q/23340610/863110) – Mosh Feu Feb 16 '17 at 09:55

0 Answers0