整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
的朋友T圣誕前幾天找到我，問是否能幫忙制作一個圣誕賀卡郵件發(fā)送給客戶。
我趕緊在腦海中遍歷一遍如何制作賀卡郵件，發(fā)現(xiàn)沒有答案，于是趕腳去谷歌了一下，竟然意外發(fā)現(xiàn)了個大寶藏。
傳統(tǒng)的郵件
與國外客戶打交道，避免不了郵件的往來，尤其是節(jié)假日，可能要發(fā)一點祝賀等郵件，祝賀一下圣誕快樂或者新年快樂的，普通的郵件可能就是一段文字的祝福，或者直接在郵件客戶端插入一張圖片。
不過你有沒有想過把郵件做的更好看一點呢？像下圖這樣：
如果你也想做成這樣的郵件，那么這篇文章你就不要錯過了，接下來就跟著我一步一步如何制作一個這樣的郵件吧！
如何制作漂亮的郵件
漂亮的郵件不僅在排版布局上吸引用戶的點擊，而且還能體現(xiàn)你的與眾不同，增加你的品牌記憶。
我訂閱了很多國外的博客郵件，其中印象最深刻的就是Shopify的郵件
這是shopify日常的博文郵件，幾乎每天都在推送，相對于其他普通的郵件的話，我更愿意看這種郵件中的文章。
這種郵件呢有個專業(yè)術(shù)語，叫HTML郵件，那什么是HTML呢？
HTML是Hyper Text Markup Language的簡寫，翻譯成中文就是超文本語言，通俗來說就是能讓圖片、文字和視頻排版好看的語言，通常它長這個樣子：
第一次看有可能密集恐懼癥會發(fā)作！
難道做一個漂亮的郵件必須要接觸這些天書似的HTML嗎？
當(dāng)然不用，這里我找到了完全避免手工制作HTML郵件的方法，那就是可視化編輯制作HTML郵件。
可視化編輯看到字面意思我們就知道，只需拖拽編輯。
我們只用拖拽對應(yīng)的元素到編輯器中即可實現(xiàn)想要的效果，比如要插入圖片，拖一張圖片元素進(jìn)來，要添加一個按鈕，拖一個按鈕元素進(jìn)來。
可視化編輯是未來制作網(wǎng)頁和郵件的大趨勢，這種方法只要你會移動鼠標(biāo)就能制作內(nèi)容的方法，當(dāng)然能極大的提高你的辦公效率。
那么有什么工具能夠可視化編輯HTML郵件呢？不著急，打起精神來，接下來我將帶領(lǐng)你一步一步的實操。
如何尋找好用的在線工具
當(dāng)我想找新的使用工具的時候，會使用英文去谷歌搜索，因為國外的郵件使用場景畢竟會更多一點，選擇的余地也會更多一點。
不過在搜索的時候我遇到了一個難敵，可視化編輯的英文是什么？
沒關(guān)系，我們使用最簡單描述法，我們要找的是郵件編輯器，郵件編輯器英文我會，就是email builder，ok，那就在谷歌里面輸入入best email builder的時候，不著急回車，我們查看下拉框看看有沒有什么驚喜，果然找到了一個核心關(guān)鍵詞best drag and drop email builder-最好的拖拽郵件編輯器，這個詞和可視化郵件編輯器的意思基本一致了，搜之。
通過這個搜索方法我們能快速定位自己想要找的工具，先輸入簡單的描述單詞，然后在下拉框中尋找更詳細(xì)的描述，因為谷歌會在下拉框中推送全球人民最關(guān)心的問題！
通過上面的方法我們找到了一大堆的郵件編輯工具，以下是我搜集到的網(wǎng)址，當(dāng)然你也可以試試，也許能找到更多驚喜：
?beefree.io/bee-free?stripo.email/templates?freeemaileditor.com?mosaico.io?chamaileon.io?litmus.com/email-builder
經(jīng)過多輪篩選測試，我選擇了beefree.io來制作HTML郵件。
最好用的在線HTML郵件編輯器
beefree.io/templates/ 的官網(wǎng)告訴我，它們目前有200+個郵件模板，當(dāng)我看到這些模板時，口水都流了一地，而當(dāng)我知道大部分都不用注冊免費使用的時候，趕緊點開一個郵件查看起來：
制作郵件賀卡的主題是圣誕節(jié)，所以我選擇了一個相關(guān)的主題，點開看之:
##編輯郵件 這款圣誕主題的郵件里面有個bling bling的彩燈，看起來節(jié)日氣氛就不錯，就選它了，初步分析素材，我需要準(zhǔn)備5張圖片，包括：
?logo一張?主產(chǎn)品一張?其他產(chǎn)品三張
上圖的第3部分我暫時不需要，就刪除了，那么剩下的主要就是圖片與文案的準(zhǔn)備了，先來看看圖片如何設(shè)置。
首先我來替換一下主產(chǎn)品圖，由于主產(chǎn)品圖片要一張PNG，PNG格式的圖片背景必須是透明色，所以我要扣一下圖。
這時我選擇在線摳圖工具remove.bg，只需上傳一張圖片即可完成摳圖，建議純色底摳圖更干凈。
嗯，摳的完美！
回到beefree，在左邊點擊選中主圖，然后右側(cè)出現(xiàn)的Change image點擊一下：
然后點擊一個文件夾進(jìn)入，接著點擊Upload，即可上傳剛才摳好的圖片，最后點擊圖片insert即可。
點擊植入之后可以在右側(cè)調(diào)整圖片大小，位置，都是很方便的，drag&drop 很NICE！
特別注意，圖片下面的alertnate text一定要填寫，這個部分當(dāng)圖片無法加載出來時，alertnate text會告訴用戶該圖片講的是什么
這一欄屬于自我介紹或者公司介紹部分，暫時不需要直接刪除
然后依次把剩下的幾張產(chǎn)品圖片上傳，修改標(biāo)題添加按鈕鏈接等操作
然后把其他的社交鏈接都加上
這里要特別注意，由于我們使用的是免費操作，我們只能下載zip壓縮包到本地
如果你已經(jīng)購買付費版，那么無需接下來的操作，付費版可以直接轉(zhuǎn)化為html或者導(dǎo)入mailchimp edm系統(tǒng)中直接發(fā)送郵件。
beefree的價格是月15美金，價格適中，長期制作的話建議購買付費版。
免費版的額外操作
由于沒有使用付費套餐，我們只能下載一個壓縮包，在解壓之后可以看到兩個文件：
我們點擊這個.html結(jié)尾的文件，即可在瀏覽器中看到我們的郵件主體了：
但是這個郵件只能在自己的電腦上看到，該如何將弄到郵件里面去呢？
接著操作！以下手法比較hacker，請仔細(xì)操作。
壓縮文件夾中的圖片
想要把文件弄到在線的郵件里面，首先我們要做的就是把圖片上傳到在線。想了半天，圖片應(yīng)該放到在線哪里呢？我總結(jié)了一下，你可以把圖片上傳到：
?網(wǎng)站后臺媒體庫?mailchimp媒體庫?其他圖床
那么我就示范一下圖片上傳到自己的網(wǎng)站后臺吧，不過在上傳圖片之前我建議大家將圖片進(jìn)行無損壓縮一下。
電腦本地的圖片都在image文件夾中
這里的圖片格式有g(shù)if/jpg/png，jpg和png我們可以使用tinypng.com進(jìn)行無損壓縮
gif圖片比較特殊，是一種動態(tài)圖片，我們也可以使用另外一個在線工具壓縮：https://www.iloveimg.com/zh-cn/compress-image/compress-gif 不過gif壓縮可能會導(dǎo)致較小的gif變成png，請額外注意一下。
壓縮圖片是為了郵件加載速度更快一點
然后我們整理一下壓縮過后的圖片，千萬注意，圖片名稱不要更改。
將圖片上傳至我們的網(wǎng)站后臺，這里以wordpress網(wǎng)站演示：
然后打開圖片，復(fù)制一下圖片的鏈接：
圖片鏈接格式一般是：
https://keentalking.com/wp-content/uploads/2020/01/Excavator1.jpg
我們刪除后面的圖片名稱，只保留前面的部分，后面要用到：
https://keentalking.com/wp-content/uploads/2020/01/
使用subline text批量替換圖片鏈接
這里用到的最好一個工具是subline text，官網(wǎng)是sublimetext.com/3，這是一款代碼編輯工具，我們利用它來批量替換HTML文件中的圖片鏈接。
首先下載subline text，官網(wǎng)下載的有個人免費版，安裝好之后打開html文件：
然后用快捷鍵ctrl+f或者command+f
1.打開查找2.下方搜索框內(nèi)輸入"images/"3.點擊find All
這時候你會發(fā)現(xiàn)所有包含"images/"的選項全部選中了：
接著按一下鍵盤上的左方向鍵，選中的文字變成了光標(biāo)，然后按幾下鍵盤的右方向鍵，移動光標(biāo)到"images/"后面，點擊Delete鍵，向前全部刪除"images/" 。說起來比較復(fù)雜，但做起來很簡單，請看動圖操作演示
最后一步，粘貼我們之前的鏈接
https://keentalking.com/wp-content/uploads/2020/01/
我們發(fā)現(xiàn)所有的圖片鏈接都換成了自己的官網(wǎng)圖片鏈接
點擊快捷鍵ctrl+s或command+s保存。
驗證圖片是否替換成功
我們驗證一下這些圖片是否都替換成功了。
這里我推薦使用qq郵箱來檢測一下。
打開qq郵箱，寫信創(chuàng)建一個空白郵件，然后點擊“格式”，出現(xiàn)的工具欄中點擊""
全選subline text中的所有代碼：
并粘貼到qq郵箱空白郵件處，粘貼完畢點擊返回可視化編輯：
出現(xiàn)完整的HTML即表示成功！
接下來發(fā)送給自己的工作郵箱，然后轉(zhuǎn)發(fā)給用戶等等都是輕車熟路啦！或者你可以直接把代碼放入mailchimp等EDM發(fā)信系統(tǒng)也是可以的。
（來源：理清外貿(mào)）
以上內(nèi)容屬作者個人觀點，不代表雨果網(wǎng)立場！本文經(jīng)原作者獨家授權(quán)供稿，轉(zhuǎn)載需經(jīng)雨果網(wǎng)授權(quán)同意。
上雨果網(wǎng)搜索“跨境資料庫”,領(lǐng)取歐美/東南亞各國市場商機(jī)、各大平臺熱銷品報告、跨境電商營銷白皮書！
友誼卡》教案
學(xué)生課前準(zhǔn)備https://www.shimengyuan.com/nianji/716.html
一、卡紙、剪刀、膠水、彩筆等用具。
二、課前查閱有關(guān)賀卡來歷和意義的資料，摘抄記錄一些有關(guān)祝福的語句。
教學(xué)目標(biāo)
1、通過活動，讓學(xué)生了解賀卡的意義，明確贈送的對象，掌握制作步驟，做成精美的賀卡。
2、通過欣賞、制作、書寫賀詞、評比等研究性學(xué)習(xí)活動，培養(yǎng)學(xué)生探究性學(xué)習(xí)的方法及創(chuàng)新意識和創(chuàng)新能力，人際交往能力。
3、通過活動開展對學(xué)生滲透感恩教育。
教學(xué)過程https://www.renjiaoshe.com/jiaocai/381.html
1．激情導(dǎo)入（展示賀卡，幫助學(xué)生了解）。
（1）、同學(xué)們，你收到或者送過賀卡嗎？當(dāng)你收到賀卡或贈送給別人賀卡時有什么樣的感受？
（2）、學(xué)生交流討論，了解賀卡的內(nèi)容和意義等。
（3）、同學(xué)們，我們應(yīng)該用自己的雙手和誠心，自己動手制作禮物送給我們敬愛的人。我提議我們今天每人做一張賀卡，來作為禮物送給自己敬愛的人，大家說好嗎？
2．學(xué)做賀卡。
（1）介紹制作賀卡的程序和手法制作程序。
a、構(gòu)思起稿，確定主題內(nèi)容
b、設(shè)計形式，安排圖形文字
c、動手制作，選用材料，進(jìn)行描繪，配色、制作手法a、繪畫法b、剪貼法
①討論：仔細(xì)觀察老師展示的賀卡，認(rèn)真觀察包括什么內(nèi)容。
②指導(dǎo)：同學(xué)們，老師的這幾張賀卡，精美嗎？要想做張式樣好的賀卡，就得多花心思，仔細(xì)揣摩。可以把卡紙對折，也可以經(jīng)過剪、裁、貼制作一張更為特別的賀卡。
（2）學(xué)生試制賀卡 請同學(xué)們按照老師介紹的方法，自己試著做一張賀卡。
①教師巡視指導(dǎo)。
②出示學(xué)生做的賀卡，評價激勵。
（3）學(xué)寫賀詞。
a、所寫賀詞，力求情真意切。蘊(yùn)含著對敬愛的人的感激和愛戴的優(yōu)美語句。
b、學(xué)生試說。 ①指名學(xué)生說說。 ②學(xué)習(xí)小組互說，老師巡回指導(dǎo)。
（4）、同學(xué)們，今天你們親手做了一張賀卡，送給你們所敬愛的人。我想當(dāng)他們收到你們的賀卡時，一定非常的高興，為你們自豪，回家后就讓我們行動起來吧！把你們的賀卡盡快送到朋友們的手中，好不好？課外延伸 其實，賀卡的內(nèi)容很廣泛，我們回去后也可以動手做做賀年卡、圣誕卡、生日卡等。你們有信心做好嗎？那么我們就試試吧。
教學(xué)注意事項
1、讓學(xué)生把方法寫出來比較耗時，可以改成口頭交流，比較省時，效果也應(yīng)該會不錯。
2、低年級學(xué)生制作花了大量的時間，是否可以尋找更好的方法。
們在開發(fā)各種管理系統(tǒng)的時候，不免需要將一些報表導(dǎo)出為PDF，這使用率應(yīng)該來說是還相當(dāng)廣的，今天，小編將給大家推薦一個HTML轉(zhuǎn)PDF的利器，神器，有了他，如虎添翼。
什么html2pdf,pdflib,FPDF這些可能也有不少人用過，但，我推薦的不是這個，也是我們的：wkhtmltopdf
wkhtmltopdf并且wkhtmltoimage是開源的（LGPLv3）命令行工具來渲染HTML到使用Qt WebKit渲染引擎PDF和各種圖像格式。這些運行完全“無頭”，不需要顯示或顯示服務(wù)。
還有一個C庫，如果你是這樣的事情。
我如何使用它？
下載預(yù)編譯的二進(jìn)制文件或從源代碼構(gòu)建
創(chuàng)建您想要轉(zhuǎn)換為PDF（或圖像）的HTML文檔
通過該工具運行您的HTML文檔。
例如，如果我真的很喜歡Google今天對他們的徽標(biāo)所做的處理，并希望以PDF形式永久捕獲它：
wkhtmltopdf http://google.com google.pdf
其他選項
這很好，我一直想把Google的主頁變成PDF，但是我也想要一個目錄。
有很多命令行選項。查看自動生成的wkhtmltopdf手冊。
獲取核心
命令行工具很棒，但我想要一個C庫。
沒問題。檢查圖書館的文件。
真實世界的例子？
正如我們所說，如果您今天真的很喜歡Google的主頁，并且希望將其保存為PDF，則可以使用wkhtmltopdf。
說真的，你可以用它來生成發(fā)票，生成生日賀卡，或其他各種有趣的事情。只是用你的想象力！
wkhtmltopdf，wkhtmltopdf可以直接把任何一個可以在瀏覽器中瀏覽的網(wǎng)頁直接轉(zhuǎn)換成一個pdf，首先說明一下它不是一個C#類 其他語類的方法封裝，而是一個把html頁面轉(zhuǎn)換成pdf的一個軟件（需要安裝在服務(wù)器上），但是它并不是一個簡單的桌面軟件，而且它直接cmd批處理的，我們可以很簡便的調(diào)用它。
今天我通過一個asp .net core mvc的例子給大家介紹下他的使用方法：
首先，我們先在https://wkhtmltopdf.org/downloads.html 下載相應(yīng)的服務(wù)器系統(tǒng) wkhtmltopdf軟件
當(dāng)然，在https://github.com/wkhtmltopdf/wkhtmltopdf 我們也可以查到一些具體的應(yīng)用例子
我在先nuget添加了：https://github.com/cp79shark/Shark.PdfConvert，這個封裝了.net core調(diào)用wkhtmltopdf的常用操作方法，可以直接快速引用。
什么是Shark.PdfConvert？
Shark.PdfConvert是WkHtmlToPdf工具的一個簡單的.NET Core（也是目標(biāo)net451）包裝器。大多數(shù)選項通過PdfConversionSettings對象公開，其他可以通過使用自定義覆蓋來指定所需的配置區(qū)域。
轉(zhuǎn)換設(shè)置默認(rèn)值是為Windows環(huán)境設(shè)置的，并假定您已安裝WkHTMLToPDF（x64）工具。您可以通過重寫PdfConversionSettings來覆蓋工具的路徑。PdfToolPath。
您將需要安裝/下載WkHtmlToPdf，它不嵌入在NuGet包中
示例1：靜態(tài)HTML內(nèi)容
PdfConvert.Convert(new PdfConversionSettings{
Title = "My Static Content",
Content = @"<h1>Lorem ipsum dolor sit amet consectetuer adipiscing elit
I SHOULD BE RED BY JAVASCRIPT</h1>
<script>document.querySelector('h1').style.color = 'rgb(128,0,0)';</script>",
OutputPath = @"C:\temp\temp.pdf"});示例2：從URL獲取內(nèi)容
PdfConvert.Convert(new PdfConversionSettings{
Title = "My Static Content from URL",
ContentUrl = "http://www.lipsum.com/",
OutputPath = @"C:\temp\temp-url.pdf"});示例3：使用流進(jìn)行輸出和輸入
PdfConversionSettings config = new PdfConversionSettings{
Title = "Streaming my HTML to PDF"};using (var fileStream = new FileStream(Path.GetTempFileName() + ".pdf", FileMode.Create)){
var task = new System.Net.Http.HttpClient().GetStreamAsync("http://www.google.com");
task.Wait();
using (var inputStream = task.Result)
{
PdfConvert.Convert(config, fileStream, inputStream);
}}樣品4：混合和匹配
PdfConversionSettings config = new PdfConversionSettings{
Title = "A little bit of Everything",
GenerateToc = true,
TocHeaderText = "Table of MY Contents",
PageCoverUrl = "https://blackrockdigital.github.io/startbootstrap-landing-page/",
ContentUrl = "http://www.lipsum.com/",
PageHeaderHtml = @"
<!DOCTYPE html>
<html><body>
<div style=""background-color: red; color: white; text-align: center; width: 100vw;"">SECRET SAUCE</div>
</body></html>"};using (var fileStream = new FileStream(Path.GetTempFileName() + ".pdf", FileMode.Create)){
PdfConvert.Convert(config, fileStream);}示例5：MVC控制器操作中的用法
public IActionResult ConvertToPdf([FromBody] PdfConversionSettings model) {
// TAKE CARE WHEN Accepting the Conversion Settings from user land, it would be best
// to just NOT DO it, accept your own custom model and map the parameters as needed.
// If you insist, then you could do something like the following to prevent malicious code execution
// in my testing the Custom*Args members are not a valid attack vector, PdfToolPath certainly is, never* trust
// the client#if DEBUG
// set path to executable, UNSAFE DEBUG USE ONLY FOR TESTING
model.PdfToolPath = model.PdfToolPath ?? _host.ContentRootPath + @"\wkhtmltopdf.exe";#else
// set path to executable
model.PdfToolPath = _host.ContentRootPath + @"\wkhtmltopdf.exe";#endif
if (model.OutputFilename.EndsWith(".pdf") == false) model.OutputFilename = model.OutputFilename + ".pdf";
var memoryStream = new MemoryStream();
PdfConvert.Convert(model, memoryStream);
return new FileContentResult(memoryStream.ToArray(), MimeTypes.Pdf)
{
FileDownloadName = model.OutputFileName
};}在Controller中的
[HttpPost]
public async Task<IActionResult> ExportPdf(PdfConversionSettings model)
{
var saveFilePath = "/upload/"+ model.Title + ".pdf";
model.PdfToolPath = FileHelper.MapPath("wkhtmltox/wkhtmltopdf.exe");
model.OutputPath = FileHelper.MapPath(saveFilePath);
FileHelper.DeleteFile(saveFilePath);
var ms= new MemoryStream();
var head = @"
<!DOCTYPE html><head><meta http-equiv=""Content-Type"" content=""text/html; charset=utf-8"" />
<meta name=""viewport"" content=""width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no"">
<meta name=""apple-mobile-web-app-capable"" content=""yes"" />
<title></title>
<link rel=""stylesheet"" type=""text/css"" href=""/lib/art-dialog/css/dialog.css"" />
<link rel=""stylesheet"" type=""text/css"" href=""/admin/skin/icon/iconfont.css"" />
<link rel=""stylesheet"" type=""text/css"" href=""/admin/skin/default/style.css"" />
<style type=""text/css"">
h1{line-height:70px;margin-top:20px;font-size:40px;font-weight:bold;text-align:center;}
body,div,p {line-height:50px; font-family: 'Microsoft YaHei';font-size:25px;}
img{text-align:center;width:120%;height:400px;}
table,tr,td{height:40px;}
</style></head><body>";
model.PageWidth = 210;
model.PageHeight = 297;
//model.Margins = new PdfPageMargins { Top = 100, Left = 20 };
//model.Size = PdfPageSize.A4;
model.Content = head + model.Content + "</body></html>";
PdfConvert.Convert(model, ms);
FileStream fileStream = null;
try
{
fileStream = new FileStream(model.OutputPath, FileMode.Create);
ms.WriteTo(fileStream);
}
catch(Exception ex)
{
return Json(new
{
status = 0,
message = "導(dǎo)出PDF出錯！" + ex.Message
});
}
finally
{
ms.Close();
fileStream.Close();
}
return Json(new
{
status = 1,
message = "PDF導(dǎo)出成功！",
url = Request.Scheme + "://" + Request.Host.ToUriComponent() + "/" + saveFilePath
});
}
這就是我的具體生成實現(xiàn)方法。
導(dǎo)出PDF界面
導(dǎo)出后的PDF
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
