生成PDF时图像没有反映

问题描述

我在电子邮件模板上有一个CTA按钮。当我单击它时,它应该重定向到登录页面并以pdf格式下载。

当我下载pdf时,除图像外,所有内容均已生成。 如果我使用常规图像,则无法正常工作,但是如果我使用data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANcAAADIBAMAAACJ02nIAAAAG1BMVEUAZon///8feZdfn7W/2OHf6/A/jKZ/ssSfxdJ7/V+IAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABK0lEQVR4nO3UsU6DQACH8btDoCOcVdfjDRh8AKIOjhqkOjJ0cMRE4oomvLd3wGAJ0eXA5ftNl3+afG2PVggAAAAAAAAAAAAAAAAAAAD8Qqvkn2NrvYHlWLFhbC02Jq/L497Yz9PvjRxP0+YW0d5oEVedl5gQ8vBWHgshduV7IYeTjQ2bW+KrVov+48VXLM/yyH6ZYR0lsnEnGxs2t4R5rJUWmfEUq6UZbk69JrJWY2zc7JIZpaM0TWtPMTPGosf7ZDzZ2LC5JbOvCS6qKvcbk42axaZFR56e2B+xzASzmFvCPNDq0t+dTbHwtj8/jbklGJ/GJw+tkzururvZndlFtKX7nX35iP0pWu2fcsFZt3vYLBanabNZTHw+b9cCAAAAAAAAAAAAAAAAgAXffqEq+5io6pQAAAAASUVORK5CYII=,则可以正常工作。

将我的代码放在下面。如果我能得到任何帮助的话,那真是太好了。 谢谢

window.onload = function() {
  var url_string = window.location.href; //window.location.href
  var url = new URL(url_string);
  var getName = url.searchParams.get("name");
  var getDate = url.searchParams.get("date");
  var getTime = url.searchParams.get("time");
  document.getElementById("name").innerHTML = getName;
  document.getElementById("date").innerHTML = getDate;
  document.getElementById("time").innerHTML = getTime;


  console.log("document.onload");
  var container = document.getElementsByClassName('container')[0];
  var att = document.createAttribute('id');
  att.value = 'container';
  container.setAttributeNode(att);
  const element = document.getElementById('container');
  html2pdf().from(element).set(options).save();
}
<body class="elq-lp" style="min-width:260px; min-height:100%; padding:0; margin:0 auto; background: #d4d6d7;">
    <div class="color-wrap" style="max-width:600px;width:100%;position:relative;background:;margin:0 auto;">
      <div class="container" style="width:100%;">
        <div class="row row-0" style="background:#ffffff;margin:0 auto;">
          <div class="column col-xs-12 col-sm-12 col-0" style="vertical-align:top;background:transparent;text-align:left;font-size:12px;font-family:Arial,Helvetica,sans-serif;color:#000000;">
            <div style="background-color:transparent;line-height:18px;" class="elq-code-cell cell cell-0">
              <div style="display:inline-block;width:100%;">
              </div>
            </div>
            <div class="elq-image-cell  cell cell-1" style="background-color:transparent;line-height:0;padding:0px 0px 0px 0px;text-align:center;">
              <img src="http://images.inform.janssen-emea.com/EloquaImages/clients/JanssenPharmaceutica/%7Bb81b4e49-3368-4b48-b072-c627debf1d6c%7D_Certificate-of-Attendance-Templatebanner.jpg" alt="Banner" style="width:100%;height:auto;max-width:2480px">
            </div>
            <div style="background-color:transparent;line-height:18px;padding:10px 10px 10px 10px;" class="elq-text-cell cell cell-2">
              <div style="display:inline-block;width:100%;">
                <div style="text-align: center; color: #56004F; font-weight: bold; padding: 50px 10px 0px; font-size: 22px; line-height: normal;">CERTIFICATE OF ATTENDANCE</div>
              </div>
            </div>
            <div style="background-color:#DDE4FF;line-height:18px;padding:20px 10px; margin:20px 40px 10px; border-bottom: 1px dotted #C40833;" class="elq-code-cell cell cell-3 name">
              <div style="display:inline-block;width:100%; text-align: center; color: #C40833; font-size: 25px; font-weight: bold;">
                <div id="name">{{accTitle}} {{accLname}}</div>
              </div>
            </div>
            <div style="background-color:transparent;line-height:18px;padding:30px 10px;" class="elq-text-cell cell cell-4">
              <div style="display:inline-block;width:100%; text-align: center; color: #56004F; font-size: 22px;">
                <div>attended a</div>
              </div>
            </div>
            <div style="background-color:transparent;line-height:18px;padding:10px 10px 10px 10px;" class="elq-text-cell cell cell-5">
              <div style="display:inline-block;width:100%; text-align: center; color: #56004F; font-size: 30px; font-weight: bold;">
                <div>SPRAVATO<sup>®</sup> Virtual Meeting</div>
              </div>
            </div>
            <div style="background-color:transparent;line-height:18px;padding: 30px 10px 30px 10px;" class="elq-text-cell cell cell-6">
              <div style="display:inline-block;width:100%; text-align: center; color: #56004F; font-size: 25px;">
                <div>on</div>
              </div>
            </div>
            <div style="background-color: #DDE4FF;line-height:18px;padding:10px 10px 10px 10px; margin: 0 40px 20px; text-align: center; color: #56004F; font-size: 25px;" class="elq-code-cell cell cell-7">
              <div style="display:inline-block;width:100%;">
                <div class="time-and-date">
                  <p id="time">Date: {{customText(255|CustomerName)}}</p>
                  <p id="date">Time: {{customRichText}}</p>
                </div>
              </div>
            </div>
            <div style="background-color:transparent;line-height:18px;padding: 20px 10px; background-color: #DDE4FF; margin: 40px 40px 20px; text-align: center; color: #56004F; font-weight: bold;" class="elq-text-cell cell cell-8">
              <div style="display:inline-block;width:100%; font-size: 22px;">
                <div>Janssen Neuroscience UK</div>
              </div>
            </div>
            <div style="background-color:transparent;line-height:18px;padding:10px 10px 20px 10px; margin: 0 30px 10px;" class="elq-code-cell cell cell-10">
              <div style="display:inline-block;width:100%;"><button id="exportForm" style="background-color: #56004E; color: #fff; padding: 15px 15px; border: 0; font-size: 16px;">Convert HTML to PDF</button></div>
            </div>
            <div style="background-color:transparent;line-height:18px;padding:10px 10px 10px 10px; margin: 0 20px 30px; border: 1px solid #56004E; text-align: center; font-size: 14px; color: #56004E; line-height: 20px;" class="elq-code-cell cell cell-9">
              <div style="display:inline-block;width:100%;">
                <div class="adverse-events">
                  Adverse events should be reported.<span style="font-size: 16px;">▼</span>This medicinal product is subject to additional monitoring and it is therefore important to report any suspected adverse events related to this medicinal product. Reporting forms and information can be found at <a href="http://www.mhra.gov.uk/yellowcard" target="_blank" rel="noopener noreferrer" style="text-decoration: underline; color: #56004E;">www.mhra.gov.uk/yellowcard</a> or search for MHRA Yellow Card in the Google Play or Apple App Store.
                  <br>
                  Adverse events should also be reported to Janssen-Cilag Limited on 01494 567447 or at <a href="mailto:dsafety@its.jnj.com" style="text-decoration: underline; color: #56004E;">dsafety@its.jnj.com</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row row-1" style="background:#ffffff;margin:0 auto;">
          <div class="column col-xs-12 col-sm-8 col-0" style="vertical-align:top;background:transparent;text-align:left;font-size:12px;font-family:Arial,sans-serif;color:#000000;">
            <div style="background-color:transparent;line-height:18px;padding:10px 10px 10px 10px; margin: 0 10px;" class="elq-code-cell cell cell-0">
              <div style="display:inline-block;width:100%;">
                <div class="pi" style="font-size: 14px; color: #56004E;">
                  <b>
                  Prescribing information is available at:
                  <br>
                  <a href="https://www.janssen-pi.co.uk/en/product-information/32" target="_blank" rel="noopener noreferrer" style="text-decoration: underline; color: #56004E;">https://www.janssen-pi.co.uk/en/product-information/32</a>
                  </b>
                  <p style="padding-top: 0px; margin-top: 5px;">
                    This promotional broadcast meeting was organised and funded by Janssen
                    <br>
                    © Janssen-Cilag Limited 2020
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="column col-xs-12 col-sm-4 col-1" style="vertical-align:top;background:transparent;text-align:left;font-size:12px;font-family:Arial,sans-serif;color:#000000;">
            <div class="elq-image-cell  cell cell-0" style="background-color:transparent;line-height:0;padding:0px 30px 0 0; text-align:center;">
              <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANcAAADIBAMAAACJ02nIAAAAG1BMVEUAZon///8feZdfn7W/2OHf6/A/jKZ/ssSfxdJ7/V+IAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABK0lEQVR4nO3UsU6DQACH8btDoCOcVdfjDRh8AKIOjhqkOjJ0cMRE4oomvLd3wGAJ0eXA5ftNl3+afG2PVggAAAAAAAAAAAAAAAAAAAD8Qqvkn2NrvYHlWLFhbC02Jq/L497Yz9PvjRxP0+YW0d5oEVedl5gQ8vBWHgshduV7IYeTjQ2bW+KrVov+48VXLM/yyH6ZYR0lsnEnGxs2t4R5rJUWmfEUq6UZbk69JrJWY2zc7JIZpaM0TWtPMTPGosf7ZDzZ2LC5JbOvCS6qKvcbk42axaZFR56e2B+xzASzmFvCPNDq0t+dTbHwtj8/jbklGJ/GJw+tkzururvZndlFtKX7nX35iP0pWu2fcsFZt3vYLBanabNZTHw+b9cCAAAAAAAAAAAAAAAAgAXffqEq+5io6pQAAAAASUVORK5CYII=" style="width:100%;height:auto;max-width:789px">
              <p style="font-size: 14px; color: #56004E; padding-top: 10px; text-align: right;">CP-150343 | May 2020</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <script 
      src="https://code.jquery.com/jquery-3.5.1.min.js">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4.2.5/dist/es6-promise.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js"></script>
    <script src="https://fbktnsetnet.000webhostapp.com/wp-content/uploads/2018/04/html2canvas.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/html2pdf.js@0.9.0/dist/html2pdf.min.js"></script>
  </body>

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)

相关问答

依赖报错 idea导入项目后依赖报错,解决方案:https://blog....
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
错误1:gradle项目控制台输出为乱码 # 解决方案:https://bl...
错误还原:在查询的过程中,传入的workType为0时,该条件不起...
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct...