Question

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

电子邮件是HTML格式的，因为许多人关闭了电子邮件客户端中的图像，我正在调查使用<pre>标记在邮件正文中显示QR码。

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

这是我到目前为止所做的：

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



     ███████  █  █ ███████     
     █     █ █  █  █     █     
     █ ███ █  █    █ ███ █     
     █ ███ █ █  █  █ ███ █     
     █ ███ █   ███ █ ███ █     
     █     █ ███ █ █     █     
     ███████ █ █ █ ███████     
               ███             
     █████ ████  ██ █ █ █      
     █ █ █   ██  █  █  █       
     █ █  ███████ █  █ █
     ██  █   ██     ██ ███     
      ███  █    █ █  █ ██      
             █  ████  █        
     ███████ █ █ █ ██    █     
     █     █   █████  █        
     █ ███ █ ██  █  █  █       
     █ ███ █ ██  █  █  █       
     █ ███ █ ██ █ █  ███       
     █     █ ███    ██ ██      
     ███████ ████ █  ███       



</pre>

这在Outlook中几乎看起来不错，但在gmail中看起来很糟糕：

pre tag in email reader

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

有没有办法让gmail观察线高？
有更好的字体可供使用吗？我正在使用'Lucida Console'，它给了我一个8px x 6px的矩形，但我理想地想要一个方形的等宽字体。

Answer 1

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

然而，我确实设法将图像嵌入到电子邮件中，因此它显示在outlook和gmail中，而无需用户下载图像。

如果其他人试图将QR码（或其他图片）嵌入电子邮件中以便立即显示，我会在此处提供解决方案。

重要的是使用链接资源并在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);
    }
}

Answer 2

这是一个相当不错的主意！

您的问题主要是邮件程序问题。你应该看一下this answer，问题与你的有关。您可能必须使用表格单元格（黑色背景？）。

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

2 个答案: