如何解决生成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 举报,一经查实,本站将立刻删除。