You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何解决使用html2pdf.js时移动端与桌面端PDF生成结果不一致问题?

货运标签移动端html2pdf.js生成异常问题

我正在开发一个自动生成货运标签的项目,使用html2pdf.js在桌面端生成的效果正常,但在移动端生成的结果出现异常。

以下是可正常运行的代码:

<html>
  <head>
    <title>Shipping Label</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.js"></script>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
      body {
        font-family: "Inter", sans-serif;
        margin: 0;
      }
      .adres {
        display: flex;
        flex-direction: column;
        /*align-items: center;*/
        justify-content: center;
        padding-left: 100px;
        font-size: 70px;
        width: calc(100% - 100px);
        height: calc(100vh - 100px);
      }
      .postzegelcode {
        position: absolute;
        top: 10px;
        right: 10px;
        border: none;
        padding: 20px;
      }

      .logo {
        position: absolute;
        bottom: 10px;
        left: 10px;
        padding: 20px;
        padding-left: 100px;
        display: flex;
        align-items: center;
        font-size: 30px;
      }

      td {
        width: 50px;
        height: 45px;
        text-align: center;
        border: none;
        font-size: 40px;
      }
    </style>
  </head>
  <body>
    <div class="adres">
      <span style="margin-bottom: 0px"
        >NAME<br />STREET<br />PLACE<br />POSTALCODE</span
      >
    </div>
    <table class="postzegelcode" border="1">
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>4</td>
          <td>5</td>
          <td>6</td>
        </tr>
        <tr>
          <td>7</td>
          <td>8</td>
          <td>9</td>
        </tr>
      </tbody>
    </table>
    <div class="logo">
      domain.com
    </div>

    <script>
      const content = document.body.innerHTML;
      document.body.innerHTML = content; // Reset body to remove any existing content

      const options = {
        filename: "pdf_document.pdf",
        image: { type: "jpeg", quality: 0.98 },
        html2canvas: { scale: 2, windowWidth: 1024 },
        jsPDF: { format: "a4", orientation: "landscape" }
      };

      html2pdf()
        .set(options)
        .from(document.body)
        .toPdf()
        .get("pdf")
        .then((pdf) => {
          const blob = new Blob([pdf.output("blob")], {
        type: "application/pdf"
         });
      const url = URL.createObjectURL(blob);
      window.location.href = url; // Open the PDF in the current tab
      });
    </script>
  </body>
</html>

我曾尝试将内容包裹在div中,并设置div的宽高为A4横向的比例,但未解决问题反而引发更多异常,上述代码是我能提供的唯一可正常运行的版本。


内容的提问来源于stack exchange,提问作者konijnvogel

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.08 08:51:04