3

I'm trying to create a pdf from my view created with angular. The problem is that the pdf looks like this:

enter image description here

Is it not able to work out the angular markup?

   var docDefinition = { content: printHtml };
   pdfMake.createPdf(docDefinition).download('optionalName.pdf');
Daniel Gustafsson
  • 1,725
  • 7
  • 37
  • 78

2 Answers2

0

Pdfmake is doing its work correctly, it is printing all the raw html to the pdf. You want it to print in html but pdfmake doesn't work like this, by giving html code you can not generate a formatted pdf file, you will have to create a javascript object having document definition in it, this document definition contains your content and styles.

You can follow this link for basic example and check out some more complex examples here on github page of pdfmake.

Good Luck

Suhail Akhtar
  • 1,718
  • 15
  • 29
0

// use npm package and initialise the pdfMake.
const pdfMake = require('pdfmake/build/pdfmake.js')
const pdfFonts = require('pdfmake/build/vfs_fonts.js')
pdfMake.vfs = pdfFonts.pdfMake.vfs


function showPDF() {
const statHeader = { text: data in header not the Header 
header,bold: true}
const content = preparePDF(yourHTML)
const statFooter = 'data in footer not Footer footer, To add a 
footer check the pdfMake documentation for footer.'
const name = ''

const docDefinition = {
        // Add page count
        footer: function (currentPage, pageCount) {
          return {
            margin: 10,
            columns: [{ text: currentPage.toString() + ' of ' + 
pageCount, alignment: 'center' }]
          }
        },
        header: { text: name, style: 'gameName' },
        content: [
          statHeader,
          content,
          statFooter
        ],
        styles: {
          gameName: {
                        fontSize: 16,
            bold: true,
            alignment: 'left',
            margin: [40, 20, 0, 80]
         }
        }
    }
 // creates pdf formated file with give name. 
 pdfMake.createPdf(docDefinition).download(`${name}.pdf`)
}
Wrap it in a function like
const htmlToPDF = require('html-to-pdfmake')
function preparePDF (yourHTML) {
let htmltoPDFData = []
const html = <div>yourHTML</div>
htmltoPDFData = htmlToPDF(html)
return htmltoPDFData
}
Farrukh Ishaq Choudhary
  • 27
  • 5