前言
本文將使用PuppeteerSharp組件、實現Html代碼片段生成Jpg照片
PuppeteerSharp地址
https://github.com/hardkoded/puppeteer-sharp
1、安裝引用PuppeteerSharp
使用Nuget界面管理器
搜索 "PuppeteerSharp"，找到對應的包點安裝即可。
2、實現一段Html頁面
<body>
<div class="box">
<h1>考場號: 01</h1>
<h1>座位號: 01</h1>
<div class="center-box">
<h4>姓 名: 花卷</h4>
<h4>身份證號: 545645456456465</h4>
<h4>準考證號: 54564545454</h4>
</div>
<div class="botom-box">
<h2>溫馨提示:</h2>
<h3>請核對信息無誤后,張貼在準考證指定位置！</h3>
</div>
</div>
</body>
<style>
.box{
box-sizing: border-box;
padding-top: 10px;
text-align: center;
font-family: fangsong;
}
.box>h1 {
font-size: 46px;
}
.center-box {
text-align: left;
width:290px;
margin:60px auto;
}
.center-box > h4{
font-size: 18px;
}
.botom-box {
text-align: center;
margin-left: 20px;
}
</style>
Html預覽效果
C#實現代碼
await new BrowserFetcher().DownloadAsync(BrowserFetcher.DefaultChromiumRevision);
var browser = await Puppeteer.LaunchAsync(new LaunchOptions
{
Headless = true
});
string destFilePath = AppDomain.CurrentDomain.BaseDirectory + "TestImgCreate\\";
if (!Directory.Exists(destFilePath))
{
Directory.CreateDirectory(destFilePath);
}
string outputFile = destFilePath + DateTime.Now.ToString("yyyyMMddHHmmss") + ".jpg";
using (var page = await browser.NewPageAsync())
{
await page.SetViewportAsync(new ViewPortOptions
{
Width = 425,//圖片寬度
Height = 635//圖片高度
});
await page.SetContentAsync(@"
<html>
<body>
<div class=\""box\"">
<h1>考場號: 01</h1>
<h1>座位號: 01</h1>
<div class=\""center-box\"">
<h4>姓 名: 花卷</h4>
<h4>身份證號: 545645456456465</h4>
<h4>準考證號: 54564545454</h4>
</div>
<div class=\""botom-box\"">
<h2>溫馨提示:</h2>
<h3>請核對信息無誤后,張貼在準考證指定位置！</h3>
</div>
</div>
</body>
</html>
<style>
.box{
box-sizing: border-box;
padding-top: 10px;
text-align: center;
font-family: fangsong;
}
.box>h1 {
font-size: 46px;
}
.center-box {
text-align: left;
width:290px;
margin:60px auto;
}
.center-box > h4{
font-size: 18px;
}
.botom-box {
text-align: center;
margin-left: 20px;
}
</style>");
ScreenshotOptions screenshotOptions = new ScreenshotOptions();
screenshotOptions.FullPage = true; //是否截取整個頁面
screenshotOptions.OmitBackground = false;//是否使用透明背景，而不是默認白色背景
screenshotOptions.Quality = 100; //截圖質量 0-100（png不可用）
screenshotOptions.Type = ScreenshotType.Jpeg; //截圖格式
await page.ScreenshotAsync(outputFile, screenshotOptions);
}
生成之后發現樣式沒有進行渲染，效果如下
發現html中的樣式丟失了,后將Html中的雙引號替換成單引號后，樣式可以正常展示，效果如下
如果需要生成PDF文件，只需要進行以下修改
await page.ScreenshotAsync(outputFile, screenshotOptions);
->
await page.PdfAsync(outputFile);
文件名稱修改成PDF后綴
轉自：小吳的成長之路
鏈接：cnblogs.com/wuyongfu/p/17243490.html
該文章在 2024/2/27 18:36:15 編輯過
400 186 1886
