Question

我过去几天一直在研究，但找不到解决问题的具体方法。我创建了一个程序，我可以通过使用Interact.js库在特定图像上拖放来设置文本的位置，它通过css transform：translate属性记住位置。我已经看到有很多用于将html转换为pdf的php和javascript库，但是没有它们不能使用transform：translate属性来根据pdf中的父位置设置文本位置。

如果有人知道如何用transform转换解决定位文本：翻译或提供其他一些建议，我会很感激。目前我使用TCPDF将图像背景导入pdf，但无法按照我的意愿定位文本。我也试过FPDF，domPDF，但没有运气。提前谢谢。

Answer 1

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>

我会编写一个js序列来转换内联样式位置绝对的所有css translate，这可以通过html2pdf实用程序理解。

Html和CSS到pdf。使用transform：在TCPDF或其他库中进行翻译

1 个答案: