3 ms·

I was looking for something similar recently and I ended up using jsPDF for my ResumeToPDF site and it worked pretty well. Only thing I sort of had pain with wa

I was looking for something similar recently and I ended up using jsPDF for my ResumeToPDF site and it worked pretty well. Only thing I sort of had pain with was that I had to include SVG icons in-line in the html/javascript and had to convert them to base64 to be included in the PDF. And same thing for the custom fonts - I had to include base64 of the font TTFs to be embedded in the PDF: https://resumetopdf.com https://resumetopdf.com https://github.com/MrRio/jsPDF https://github.com/MrRio/jsPDF

jtbayly 6y ago
Can you point me to something that explains how to do what you did (embedding the base64 of the font TTF)? I'm wondering how I can make a PDF of a webpage use the same font I used on the webpage. Edit: Never mind. I found the instructions on one of your links: https://github.com/MrRio/jsPDF#use-of-unicode-characters--utf-8 https://github.com/MrRio/jsPDF#use-of-unicode-characters--ut...
- busymom0 6y ago
  In case you are still stuck, here's what I do. If you have questions about this, email me using the "Send Feedback" from my site. I serve the base64 of each weight and style (normal, normal italic, bold, bold italic) inside a JSON. Here's one example of the JSON I serve for the Open Sans family: https://resumetopdf.com/fonts/OpenSans.json https://resumetopdf.com/fonts/OpenSans.json And here's me embedding it and making it available to jsPDF. NOTE the font.replaceAll to remove white spaces from the font name when embedding. jsPDF has this bug (or maybe expected behavior where it can't handle white spaces in the font name): var fontBase64 = {} const doc = new jspdf.jsPDF({ orientation: 'p', unit: 'mm', format: currentresume.size, putOnlyUsedFonts: true, }) const fontsToEmbed = [currentresume.headingfont, currentresume.bodyfont]; for (font of fontsToEmbed) { const fontName = font.replaceAll(' ', '') if (!doesExist(fontBase64[fontName])) { let response = await fetch(`https://resumetopdf.com/fonts/${fontName}.json`) let data = await response.json() fontBase64[fontName] = data } Object.keys(fontBase64[fontName]).forEach(style => { doc.addFileToVFS(`${fontName}-${style}.ttf`, fontBase64[fontName][style]) doc.addFont(`${fontName}-${style}.ttf`, fontName, style) }) } Once added to jsPDF, later on you can set the font and style, weight etc: doc.setFontSize(originalFontSizeInPt) doc.setFont(fontFamily, fontStyle) Also the JSON with base64 of font families is served over CloudFlare with an infinite cache - this prevents any costs on my end and also speeds up the user experience when they return to the page.

jtbayly 6y ago

Can you point me to something that explains how to do what you did (embedding the base64 of the font TTF)? I'm wondering how I can make a PDF of a webpage use the same font I used on the webpage. Edit: Never mind. I found the instructions on one of your links: https://github.com/MrRio/jsPDF#use-of-unicode-characters--utf-8 https://github.com/MrRio/jsPDF#use-of-unicode-characters--ut...

busymom0 6y ago
In case you are still stuck, here's what I do. If you have questions about this, email me using the "Send Feedback" from my site. I serve the base64 of each weight and style (normal, normal italic, bold, bold italic) inside a JSON. Here's one example of the JSON I serve for the Open Sans family: https://resumetopdf.com/fonts/OpenSans.json https://resumetopdf.com/fonts/OpenSans.json And here's me embedding it and making it available to jsPDF. NOTE the font.replaceAll to remove white spaces from the font name when embedding. jsPDF has this bug (or maybe expected behavior where it can't handle white spaces in the font name): var fontBase64 = {} const doc = new jspdf.jsPDF({ orientation: 'p', unit: 'mm', format: currentresume.size, putOnlyUsedFonts: true, }) const fontsToEmbed = [currentresume.headingfont, currentresume.bodyfont]; for (font of fontsToEmbed) { const fontName = font.replaceAll(' ', '') if (!doesExist(fontBase64[fontName])) { let response = await fetch(`https://resumetopdf.com/fonts/${fontName}.json`) let data = await response.json() fontBase64[fontName] = data } Object.keys(fontBase64[fontName]).forEach(style => { doc.addFileToVFS(`${fontName}-${style}.ttf`, fontBase64[fontName][style]) doc.addFont(`${fontName}-${style}.ttf`, fontName, style) }) } Once added to jsPDF, later on you can set the font and style, weight etc: doc.setFontSize(originalFontSizeInPt) doc.setFont(fontFamily, fontStyle) Also the JSON with base64 of font families is served over CloudFlare with an infinite cache - this prevents any costs on my end and also speeds up the user experience when they return to the page.