Question

我需要在通过 Perl 脚本发送的电子邮件中获取进度条。

以下是我使用过的 JS 小提琴链接。虽然它在浏览器中可见，但它不会在电子邮件中显示进度条。

这是 Perl 代码片段。

use MIME::Lite;
use strict;

my $mail_body = "";
$mail_body = "
<html lang='en'>
<head>
  <title>Bootstrap Example</title>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>
</head>
<body>

<div class='container'>
  <h2>Progress Bar With Label</h2>
  <div class='progress'>
    <div class='progress-bar' style='width:80%'>80%</div>
  </div>
</div>

</body>
</html> ";
 my $msg = MIME::Lite->new(
           From => "me\@do-not-reply",
           To => "abc\@outlook.com",
            Subject => "TEST EMAIL",                                                                                                        
            Type    => 'multipart/mixed'
                                                                                                                    );
                                    $msg->attach(
                                            Type => 'text/html',
                                            Encoding => 'quoted-printable',
                                            Data => $mail_body,
                                            );
                                    $msg->send;

我什至使用逻辑来创建进度条，没有 JS 和 Bootstrap，只使用 HTML 和 CSS。

请在下面的链接中找到代码。

http://jsfiddle.net/dw34m2j7/

让我知道一种从 Perl 通过电子邮件发送此进度条的方法。

Answer 1

由于一些原因，Bootstrap 不能很好地处理电子邮件。请参阅 so 和 Has anyone gotten HTML emails working with Twitter Bootstrap?。

您在第二个示例中说您没有使用 Bootstrap 或 jQUEry - 但您没有内联样式。您还使用 div 和定位，这不是很好的起点。试试表。在电子邮件中查找哪些有效，哪些无效：Can I use bootstrap for designing HTML Email Templates

您似乎对 HTML 电子邮件不熟悉 -- 您需要重新考虑一下。浏览此资源页面以了解初学者：https://www.caniemail.com/

Answer 2

这是对我有用的解决方案

my $mail_body = "
<html>
<body>
<table cellpadding=\"0\" cellspacing=\"0\" width=\"250\" >
<tr>
  <td col width = 90 bgcolor=\"#f83f83\" style=\" background-color:#f83f83; float:left; height:15px; text-align:center;\">90</td>
  <td col width = 10 bgcolor=\"#cccccc\" style=\" background-color:#cccccc; float:left; height:15px;\"></td>
</tr>
</table>
<br>
<table cellpadding=\"0\" cellspacing=\"0\" width=\"250\"  >
<tr>
  <td col width = \"70\" bgcolor=\"#f83f83\" style=\" background-color:#f83f83; float:left; height:15px;\"></td>
  <td col width = \"30\" bgcolor=\"#cccccc\" style=\" background-color:#cccccc; float:left; height:15px;\"></td>
</tr>
</table>
<br>
<table cellpadding=\"0\" cellspacing=\"0\" width=\"250\"  >
<tr>
  <td col width = \"5\" bgcolor=\"#f83f83\" style=\" background-color:#f83f83; float:left; height:15px;\"></td>
  <td col width = \"95\" bgcolor=\"#cccccc\" style=\" background-color:#cccccc; float:left; height:15px;\"></td>
</tr>
</table>
</body>
</html>";

Outlook 电子邮件中未呈现进度条颜色

2 个答案: