为什么我的 PDF 中出现两个引号字符？

Question

我使用 api2pdf

生成 pdf

我在桌子前看到两个引号字符

我怎样才能删除这个以及它为什么会出现？

代码：

    const d = await clientPDF.chromeHtmlToPdf(`
      <h1>Stundenzettel</h1>

      <section>
        <p>Name: james test</p>
        <p>Zeitraum: 3 2024</p>
        <p>Gesamtstunden: 80</p>
      </section>

      <table id="customers">
        <tr>
          <th>Datum</th>
          <th>Auftrag</th>
          <th>Beginn</th>
          <th>Ende</th>
          <th>Pause</th>
          <th>Gesamt</th>
        </tr>
          ${ calculateAllPauseTimesArrayToMinutes.map((el => (
            `
            <tr>
            <td>${format(el.start_time, 'PP', {  locale: de } )}</td>
            <td class="text-ellips">${el.location_name ?? '/'}</td>
            <td>${format(el.start_time, 'p', {  locale: de } )}</td>
            <td>${format(el.end_time, 'p', {  locale: de } )}</td>
            <td>${el.pause_times.length > 0 ? el.pause_times.reduce((a, b) => a + b, 0) : '/'}</td>
            <td>${parseFloat((differenceInMinutes(el.end_time, el.start_time) / 60).toFixed(2))}</td></tr>`
          )))
          }
      </table>
      `, { options: options });

我删除了 tr td 中映射它的空格，但它也没有消失。我不知道为什么会出现我希望任何人都可以给我问题所在的答案

€：当我删除地图时，它就会消失，所以它与地图功能有关

Answer 1

那些不是引号字符，它们是逗号。

map

返回一个数组，当您将数组强制放入字符串上下文中时，这将导致数组元素隐式

join

，并在它们之间使用逗号作为分隔符。

因此，您在这里有效地创建了

<tr>...</tr>,<tr>...</tr>,<tr>...</tr>

形式的 HTML。但是，由于表格行之间不允许使用非空白字符，因此浏览器在解析整个结构时将它们移动到表格上方，这个小例子很容易证明这一点：

<table>
  <tr>
    <td>foo</td>
  </tr>,
  <tr>
    <td>bar</td>
  </tr>,
  <tr>
    <td>baz</td>
  </tr>
</table>

要让这些数组元素以“无”连接，您需要显式调用

join

方法，并使用空字符串作为分隔符。

${ calculateAllPauseTimesArrayToMinutes.map(...).join('') }