Closed sergio9929 closed 1 year ago
I have solved the problem. After this and several other problems, such as not being able to compress pdfs, I decided to remove nuxt-pdf and just use jsPDF directly.
After that the problems were over. Now my pdfs are 400KB instead of 8MB and have a nice typography.
Here is the composable I created to easily export things to pdf with jsPDF:
import jsPDF, { HTMLWorker } from 'jspdf';
export const useHTMLToPDF = (filename: string, html: string | HTMLElement): HTMLWorker => {
const doc = new jsPDF({
orientation: 'portrait',
unit: 'mm',
format: 'a4',
putOnlyUsedFonts: true,
floatPrecision: 4,
compress: true,
});
return doc.html(html, {
callback: function (doc) {
doc.save(`${filename}.pdf`)
},
margin: [10, 10, 10, 10],
image: { quality: .9, type: 'jpeg' },
autoPaging: 'text',
x: 0,
y: 0,
width: 190, //target width in the PDF document
windowWidth: 1000, //window width in CSS pixels
fontFaces: [
{
family: 'Satoshi',
weight: 'normal',
src: [{
url: '/Satoshi-Regular.ttf',
format: 'truetype',
}]
},
{
family: 'Satoshi',
weight: 'bold',
src: [{
url: '/Satoshi-Bold.ttf',
format: 'truetype',
}]
},
],
html2canvas: {
onclone(document) {
document.documentElement.classList.add('exportToPDF')
},
}
})
}
Note that you have to put your custom fonts in /public
for this to work.
Usage:
useHTMLToPDF(filename, pdfSection.value).then(jsPDF => {
// successfully exported
useNotify({ text: 'Exportado correctamente', icon: 'heroicons:document-check', theme: 'success' })
}).catch(error => {
// error
console.error(error)
useNotify({ text: 'Error', icon: 'heroicons:exclamation-circle', theme: 'warning' })
})
Can you leave the issue open? Apparently custom fonts are not usable in nuxt-pdf.
Ask your question
Hello,
I'm trying to use Satoshi, a custom font from FontShare, and I'm not being able to get it working. I've tried downloading the font and adding this to the html options in
exportToPDF()
:I've googled about it and everyone is adding the font using
jsPDF.addFont()
andsetFont()
and I don't know how to access to those things outside ofexportToPDF().then()
.I'm of course using the font in my css:
And I also console logged
jsPDF.getFontList()
:Help would be much appreciated 🙂
Additional information
No response