使用api2pdf生成PDF时表格前出现双引号的问题排查

使用API2PDF生成PDF时，表格前出现两个引号字符。移除map函数后引号消失，但移除map生成的tr/td中的空格无法解决问题。

问题代码 #

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 });

原因分析 #

Array.map()返回的是数组，直接在模板字符串中插入数组时，JavaScript会自动将数组转为字符串，默认用逗号分隔每个元素。这些逗号在API2PDF的Chrome渲染引擎中被解析成了可见的引号字符，最终出现在表格前。

解决方法 #

在map调用后添加.join('')，将数组转为无分隔符的字符串，避免逗号被渲染成异常字符：

${ 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>`
))).join('') }

这样数组中的所有tr字符串会直接拼接在一起，不会产生多余的分隔符，引号问题即可解决。

内容的提问来源于stack exchange，提问作者Rick James