问题描述
我在电子邮件模板上有一个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 @R_946_4045@ion 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:[email protected]" style="text-decoration: underline; color: #56004E;">[email protected]</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 @R_946_4045@ion is available at:
<br>
<a href="https://www.janssen-pi.co.uk/en/product-@R_946_4045@ion/32" target="_blank" rel="noopener noreferrer" style="text-decoration: underline; color: #56004E;">https://www.janssen-pi.co.uk/en/product-@R_946_4045@ion/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/[email protected]/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/[email protected]/dist/html2pdf.min.js"></script>
</body>解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）