将 HTML 和 css 转换为 pdf。在 TCPDF 或其他一些库中使用 transform:translate答案

【问题标题】：Html and css to pdf. Using transform:translate in TCPDF or some other library将 HTML 和 css 转换为 pdf。在 TCPDF 或其他一些库中使用 transform:translate
【发布时间】：2017-12-14 16:25:54
【问题描述】：

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

如果有人知道如何使用 transform:translate 解决定位文本或提供一些其他建议，我将不胜感激。现在我正在使用 TCPDF 将图像背景导入 pdf，但无法根据需要定位文本。我也尝试过 FPDF、domPDF 但没有运气。提前致谢。

【问题讨论】：

标签： html css pdf

【解决方案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 转换为内联样式位置绝对值，html2pdf 实用程序可以理解。

【讨论】：

感谢您的回答。你有一些示例代码吗？
添加您的 html/css 示例，我将尝试进行示例转换。
我已经回答了。
非常感谢，我会尝试并提供反馈。