html2pdf.js when font-size > 18px ,font in render result will smaller

when font-size > 18px ,font in render result will smaller

Open YuriTu opened this issue 5 years ago • 11 comments

Hi~

I have a table want to render in pdf. in my CSS file, I set font size 26px, after rendering pdf, the result is smaller. I'm confused, nodeElement to canvas is create an image,why change CSS? How to set correct font-size to pdf? I'm sorry for my poor English, please excuse typing errors.

Thanks in advance.

font-size 12px

font -size 26px

I am sure that I write 'font-size' not 'line-height'

Nov 13 '18 09:11 YuriTu

This seems more like a feature to crop it on to the page but im not sure as this is just speculation.

What have you tried? What are your settings on Html2PDF? please add it here. Tried putting the width on the element on 100%? using CSS?

Nov 15 '18 08:11 cablegunmaster

@cablegunmaster

What have you tried? I tried different font-size, but I found they do not seem to be correct.
What are your settings on Html2PDF? please add it here. html2pdf().set( { margin: [-10, -50, 0, -50], html2canvas: { scale: 4, dpi: 192, letterRendering: true }, jsPDF: {format: 'a3'} }
Tried putting the width on the element on 100%? using CSS? my content is a table, This will cause confusion

Sorry for replying so late.

Nov 29 '18 11:11 YuriTu

I have no idea how to fix this issue , but you could try to put everything in div elements. With this library I would try to keep it stupidly simple, as there are some bugs yet to be solved. My personal experience is IE would make a mess with this library. (some issues need to be resolved as to page width).

Nov 29 '18 12:11 cablegunmaster

@cablegunmaster Thanks for your help, I will try my best to find a solution and share it here.

Nov 29 '18 12:11 YuriTu

have you fix it ? i need help

Dec 06 '18 08:12 miaowwwww

@YuriTu

Dec 06 '18 08:12 miaowwwww

Hi @YuriTu, I have a couple thoughts. The most likely cause is to do with how I clone elements - it's not perfect, and some CSS could end up getting lost.

How are you defining your styles? If they depend on ancestors that you're not cloning, that's definitely the problem. For instance:

<style type="text/css">
    #parentEl > #elToCapture {
        background-color: blue;
    }
</style>
<div id="parentEl">
    <div id="elToCapture">
        This should be blue (but won't be in html2pdf)!
    </div>
</div>

If you capture elToCapture on its own, it won't be blue. This is a known issue that I am trying to resolve.

I've added this issue to that project. If you think your issue is different, please share more of your code, or put an example up on jsFiddle by forking the template. Thanks!