eKoopmans
Margin just cuts the text and image off, and even with no margin, the end of each line is a bit cut off
Hi!
I tried to set margin to 0 in the jsPDF also, but whatever I do, the text and the image is just cutted down. Any help is welcome! Here is the pdf screenshot, you can see that the border, and also the text is cut off. update: this happens in Edge and in Chrome also, the pdf looks good in firefox browser! https://imgur.com/5VFNYq1 This is without margin: https://imgur.com/JGWYLEo Thanks in andvance!
const page = document.querySelector('#page')
const opt = {
margin: [20, 20, 20, 20], //top, left, bottom, right
filename: 'myfile.pdf',
image: {type: 'jpeg', quality: 0.98},
html2canvas: {
// width: document.querySelector('#page').clientWidth,
scale: 2.5,
scrollX: 0,
scrollY: 0,
y: 0,
dpi: 192,
// mode:'css',
letterRendering: true
},
jsPDF: {
unit: 'mm',
format: 'a4',
orientation: 'portrait',
compress: true,
marginLeft: 20,
marginRight: 20,
marginTop: 0,
floatPrecision:'smart'
},
pagebreak: {mode: 'css', before: '.break-before'},
noPdfOpenParams: true
};
html2pdf().set(opt).from(page).output('dataurlnewwindow')
My html looks like this:
<div id="page" style="width: 210mm;">
<div class="page page-1" style="color: black;background: white; margin: 0 auto">
<div class="">
<h3 style="margin: 0">Page 1PDF for Test</h3>
<img src="assets/img2.jpg" style="max-width: 100%" alt="">
<div style="border: 5px solid red; background-color: burlywood">
Whole every miles as tiled at seven or. Wished he entire esteem mr oh by. Possible bed you pleasure
civility boy elegance ham. He prevent request by if in pleased. Picture too and concern has was comfort.
Ten difficult resembled eagerness nor. Same park bore on be. Warmth his law design say are person.
Pronounce suspected in belonging conveying ye repulsive.
Rank tall boy man them over post now. Off into she bed long fat room. Recommend existence curiosity
perfectly favourite get eat she why daughters. Not may too nay busy last song must sell. An newspaper
assurance discourse ye certainly. Soon gone game and why many calm have.
Game of as rest time eyes with of this it. Add was music merry any truth since going. Happiness she ham
but instantly put departure propriety. She amiable all without say spirits shy clothes morning.
Frankness in extensive to belonging improving so certainty. Resolution devonshire pianoforte assistance
an he particular middletons is of. Explain ten man uncivil engaged conduct. Am likewise betrayed as
declared absolute do. Taste oh spoke about no solid of hills up shade. Occasion so bachelor humoured
striking by attended doubtful be it.
Lose john poor same it case do year we. Full how way even the sigh. Extremely nor furniture fat
questions now provision incommode preserved. Our side fail find like now. Discovered travelling for
insensible partiality unpleasing impossible she. Sudden up my excuse to suffer ladies though or.
Bachelor possible marianne directly confined relation as on he.
</div>
</div>
<div class="break-before"></div>
<div class="">
<p style="margin: 0">Here is some content for testing!!</p>
<h3>PDF for Test</h3>
<p style="margin: 0">Here is some content for testing!!</p>
<h3 style="margin: 0">PDF for Test</h3>
</div>
<div class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam cupiditate dolores
est,
pariatur perferendis
quia quis quos recusandae similique veritatis! Ad delectus doloremque est fugit id molestias nesciunt, qui
tenetur?
</div>
<div class="break-before">
<p style="margin: 0">Here is some content for testing!!</p>
<h3>PDF for Test</h3>
<p style="margin: 0">Here is some content for testing!!</p>
<h3 style="margin: 0">PDF for Test</h3>
</div>
<div class="break-before"></div>
<div class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam cupiditate dolores
est,
pariatur perferendis
quia quis quos recusandae similique veritatis! Ad delectus doloremque est fugit id molestias nesciunt, qui
tenetur?
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"
integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="main.js"></script>
</div>
can you try wrapping your text with a <span> tag? You can also try using css property "white-space: pre-wrap" or some other value that might fit your needs.
can you try wrapping your text with a
<span>tag? You can also try using css property "white-space: pre-wrap" or some other value that might fit your needs.
Thanks for the answer, I also find out the problem. The problem is in the 0.10.1 version, I changed the CDN file to 0.9.3 and it works without that issue.
Update: There is another problem, if I set the scale property to 2 example, then the pagebreak doesn't work correctly: it looks like this: image The scale behaves really strange, for example if I set the scale to 2.84, then this overlap is smaller, but after 10 breakpage, this overlap is bigger than at the first pagebreak. Also if I set the format to 'letter' and the scale to 2 or 3, the pagebreak works perfect, but for a4 format the scale doesn't works really well, as you can see in the picture above.
You could try html3pdf, which is a fork of this library with a lot of the existing PRs merged into it, but I'm not sure if it will help or not.
