如何调试 html2pdf.js 行为（或重现导出的 PDF 的 CSS）？

Question

我正在尝试使用

html2pdf.js

导出 PDF 文档，但 PDF 的整个文本不对齐。

这是文本在 HTML 中的样子：

这是一个PDF版本：

所有图形元素都已到位，但所有文本都下移了。并且这里无法检查打印出的 PDF 文档的 CSS 参数。所以，实际上，我很困惑如何创建可重现的示例并使这个问题更加集中，因为我混合了两个巨大的 CSS 文件。一个来自我尝试打印的单独的 HTML 页面和第二个 CSS 文件是

Vue.js

应用程序的全局样式。所以我认为这里有多个不正确的继承可能会破坏样式。

所以这里有多个可能的答案可以帮助我理解问题的根源：

1. AFAIK

   html2pdf.js

   ① 创建 DOM 元素的克隆，② 将其转换为 PDF，⓷ 删除克隆的元素。是否可以存储 DOM 元素并防止删除它以便能够使用浏览器开发人员工具检查样式？

2. 正如我之前所说，所有元素对齐都是正确的。受影响的东西只是文本。如何重现这种行为？

例如黑色元素

テスト

文本是一个简单的

div

：

<div style="display: inline-block; padding-bottom: 2px; border-bottom: 4px solid #000000;">
  テスト２
</div>

黑色底线是

border-bottom

，我发现唯一越过边界的方法是将

line-height

更改为较低的值，但在这种情况下文本会垂直收缩。但在 PDF 中文本被移动了。如何在不改变

div

的填充和边距的情况下重现这种行为？只应移动文本。

将

HTML

转换为

PDF

的功能也非常简单：

import html2pdf from "html2pdf.js";

...

html2pdf(this.$refs.htmlElement, {
  margin: 3,
  filename: "output.pdf",
  image: { type: 'jpeg', quality: 0.98 },
  html2canvas: {
    scale: 2,
    useCORS: true,
    width: 1300,
    allowTaint: true,
    // I tried to set it to true, but console logs are empty
    logging: false
  },
  jsPDF: {
    format: 'A4',
    orientation: 'landscape',
    unit: 'mm'
  },
  enableLinks: false
});

Answer 1

嘿，我试图根据给定的参考资料制作代码笔。它工作正常，因为 pdf 的输出与 js 代码中配置的相同。

var element = document.getElementById("print");
var opt = {
  margin: 1,
  filename: "myfile.pdf",
  image: { type: "jpeg", quality: 0.98 },
  html2canvas: { scale: 2 },
  jsPDF: { unit: "in", format: "letter", orientation: "portrait" }
};

html2pdf(
  element,
  {
    margin: 3,
    filename: "output.pdf",
    image: { type: "jpeg", quality: 0.98 },
    enableLinks: false
  },
  opt
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<div id="print">
  <div id="print" style="display: inline-block; padding: 12px; background-color:darkgreen; color:white; font-size: .8rem">
    Title
  </div><br>
  <div id="print" style="display: inline-block; padding-bottom: 2px; border-bottom: 4px solid #000000;">
    テスト２
  </div>
</div>

https://codepen.io/dakshank/pen/PoyzXVX