createing PDF with pdfmake just writes the html on pdf - angularjs

Question

I'm trying to create a pdf from my view created with angular. The problem is that the pdf looks like this:
Is it not able to work out the angular markup?
var docDefinition = { content: printHtml };
pdfMake.createPdf(docDefinition).download('optionalName.pdf');

Answer 1

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

Answer 2

// 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
}