1

I've been researching for a past few days and could not find specific solution for my problem. I've created a program where I can set position of text with drag and drop on specific image by using Interact.js library, it is remembering positions by css transform:translate property. I've seen that there are many php and javascript libraries for converting html to pdf, but non of them is not able to use transform:translate property to set text position based on parent position inside pdf.

If anyone know how to solve positioning text with transform:translate or to give some other suggestions,I would be thankful. For now I am using TCPDF to import image backgrounds to pdf but not able to position text as I want to. I also tried FPDF, domPDF but with no luck. Thanks in advance.

Alex Howansky
  • 50,515
  • 8
  • 78
  • 98
Tim
  • 65
  • 1
  • 11

1 Answers1

2

let divs = Array.prototype.slice.call(document.getElementsByTagName('div'));
let bodyRect = document.body.getBoundingClientRect();

divs.forEach((div) => {
  var style = div.getAttribute('style'),
    divRect = div.getBoundingClientRect(),
    offsetY = divRect.top, // - bodyRect.top,
    offsetX = divRect.left; // - bodyRect.left;

  if (style && style.indexOf('translate') != -1) {

    div.style.position = 'absolute';
    div.style.top = offsetY + 'px';
    div.style.left = offsetX + 'px';
    div.style.transform = '';
  }
});
<div style="height: 50mm ;width: 90mm;"> <img src="" style="margin:auto ;max-height: 50mm;max-width: 90mm; min-height: 50mm; min-width: 90mm; width: 90mm; height: 50mm">
  <div>
    <div style="position: absolute; overflow: hidden;font-family: ; color: ; font-style: ; font-weight: ; font-size: ; transform: translate( 100px, -100px);">TEXT</div>
  </div>
</div>

I would write a js sequence to transform all css translate in inline style position absolute, which are understood by html2pdf utilities.

bluehipy
  • 2,254
  • 1
  • 13
  • 19