使用 <pre> 标签格式化 HTML 电子邮件中的 QR 码

Question

我正在编写一个在线预订系统，该系统发送二维码作为确认电子邮件/电子机票的一部分。

\n\n

该电子邮件采用 HTML 格式，并且由于许多人关闭了电子邮件客户端中的图像，因此我正在研究使用标签在邮件正文中显示 QR 代码<pre>。

\n\n

这样，无论电子邮件客户端设置是否显示图像，都会显示二维码。

\n\n

这是我到目前为止所拥有的：

\n\n

<pre style="font-family: \'Lucida Console\', Monaco, monospace; font-size: 8px; font-weight: 900; padding: 0; letter-spacing: 0; line-height: 8px; ">\n\n\n\n     \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88  \xe2\x96\x88  \xe2\x96\x88 \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88     \n     \xe2\x96\x88     \xe2\x96\x88 \xe2\x96\x88  \xe2\x96\x88  \xe2\x96\x88     \xe2\x96\x88     \n     \xe2\x96\x88 \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88 \xe2\x96\x88  \xe2\x96\x88    \xe2\x96\x88 \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88 \xe2\x96\x88     \n     \xe2\x96\x88 \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88 \xe2\x96\x88 \xe2\x96\x88  \xe2\x96\x88  \xe2\x96\x88 \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88 \xe2\x96\x88     \n     \xe2\x96\x88 \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88 \xe2\x96\x88   \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88 \xe2\x96\x88 \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88 \xe2\x96\x88     \n     \xe2\x96\x88     \xe2\x96\x88 \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88 \xe2\x96\x88 \xe2\x96\x88     \xe2\x96\x88     \n     \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88 \xe2\x96\x88 \xe2\x96\x88 \xe2\x96\x88 \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88     \n               \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88             \n     \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88 \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88  \xe2\x96\x88\xe2\x96\x88 \xe2\x96\x88 \xe2\x96\x88 \xe2\x96\x88      \n     \xe2\x96\x88 \xe2\x96\x88 \xe2\x96\x88   \xe2\x96\x88\xe2\x96\x88  \xe2\x96\x88  \xe2\x96\x88  \xe2\x96\x88       \n     \xe2\x96\x88 \xe2\x96\x88  \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88 \xe2\x96\x88  \xe2\x96\x88 \xe2\x96\x88\n     \xe2\x96\x88\xe2\x96\x88  \xe2\x96\x88   \xe2\x96\x88\xe2\x96\x88     \xe2\x96\x88\xe2\x96\x88 \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88     \n      \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88  \xe2\x96\x88    \xe2\x96\x88 \xe2\x96\x88  \xe2\x96\x88 \xe2\x96\x88\xe2\x96\x88      \n             \xe2\x96\x88  \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88  \xe2\x96\x88        \n     \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88 \xe2\x96\x88 \xe2\x96\x88 \xe2\x96\x88 \xe2\x96\x88\xe2\x96\x88    \xe2\x96\x88     \n     \xe2\x96\x88     \xe2\x96\x88   \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88  \xe2\x96\x88        \n     \xe2\x96\x88 \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88 \xe2\x96\x88 \xe2\x96\x88\xe2\x96\x88  \xe2\x96\x88  \xe2\x96\x88  \xe2\x96\x88       \n     \xe2\x96\x88 \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88 \xe2\x96\x88 \xe2\x96\x88\xe2\x96\x88  \xe2\x96\x88  \xe2\x96\x88  \xe2\x96\x88       \n     \xe2\x96\x88 \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88 \xe2\x96\x88 \xe2\x96\x88\xe2\x96\x88 \xe2\x96\x88 \xe2\x96\x88  \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88       \n     \xe2\x96\x88     \xe2\x96\x88 \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88    \xe2\x96\x88\xe2\x96\x88 \xe2\x96\x88\xe2\x96\x88      \n     \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88 \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88 \xe2\x96\x88  \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88       \n\n\n\n</pre>\n

\n\n

这在 Outlook 中看起来几乎没问题，但在 Gmail 中看起来很糟糕：

\n\n

\n\n

我有几个问题，希望有人能指出正确的方向：

\n\n

\n
1. 有没有什么技巧可以让gmail观察行高？
\n
2. 有没有更好的字体可以使用？我正在使用“Lucida Console”，它给了我一个 8px x 6px 的矩形，但我理想情况下想要一个方形的等宽字体。
\n

\n

Answer 1

最后我放弃了将 QR 码表示为 HTML 的尝试。有太多问题无法克服，包括 Chrome 不喜欢在表格中打印背景颜色，因此无法打印二维码。

不过，我确实设法将图像嵌入到电子邮件中，以便它显示在 Outlook 和 Gmail 中，而无需用户下载图像。

如果其他人试图将二维码（或其他图像）嵌入到电子邮件中以便立即显示，我会将我的解决方案放在这里。

重要的是使用链接资源并在 HTML 中正确引用它：

...
<p><img src=""cid:{0}"" alt=""booking barcode"" /><br></p>
...

我使用了以下参考资料：

using System.Drawing.Imaging;
using System.IO;
using System.Linq;
using System.Net.Mail;
using System.Net.Mime;

创建我的电子邮件时：

public class BookingConfirmation : MailMessage
{
    public BookingConfirmation( ... )
    {
        To.Add( ... );
        Subject = "...";

        // create some html for the email
        var html = String.Format(
        @"<!DOCTYPE HTML PUBLIC ""-//W3C//DTD XHTML 1.0 Strict//EN"" 
        ""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"">
        <html xmlns=""http://www.w3.org/1999/xhtml\"">
        <head>
        <meta http-equiv=""Content-Type"" content=""text/html; charset=utf-8"" />
        <meta name=""viewport"" content=""width=device-width, initial-scale=1.0"" />
        <title>My Title</title>
        </head>
        <body style=""font-family: Arial, sans-serif; font-size: 12px;"">
        <p><img src=""cid:{0}"" alt=""booking barcode"" /><br></p>
        </body>
        </html>","myuniqueid1234" );

        // create an html view
        var htmlView = AlternateView.CreateAlternateViewFromString(html, 
                                                                   Encoding.UTF8, 
                                                                   MediaTypeNames.Text.Html);

        // get an image as a memory stream
        var memoryStream = new MemoryStream();
        var qrCodeImage =  ... however you want to access your image ...;
        qrCodeImage .Save(memoryStream, ImageFormat.Jpeg);
        memoryStream.Position = 0;

        // add it as a linked resource to the alternate view
        var linkedImage = new LinkedResource(memoryStream, MediaTypeNames.Image.Jpeg)
        {
            ContentId = "myuniqueid1234" // this needs to match for <img src=""cid:{0}""
        }; 

        // add the linked resource to the html format alternate view
        htmlView.LinkedResources.Add(linkedImage) ;
        AlternateViews.Add(htmlView);
    }
}