LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

.NET 实现Html 生成图片或PDF

admin
2024年2月27日 18:36 本文热度 591

前言


本文将使用PuppeteerSharp组件、实现Html代码片段生成Jpg照片

PuppeteerSharp地址

https://github.com/hardkoded/puppeteer-sharp

1、安装引用PuppeteerSharp

使用Nuget界面管理器

搜索 "PuppeteerSharp",找到对应的包点安装即可。

2、实现一段Html页面

<body>
  <div class="box">
    <h1>考场号:&nbsp;&nbsp;&nbsp;01</h1>
    <h1>座位号:&nbsp;&nbsp;&nbsp;01</h1>
    <div class="center-box">
      <h4>&nbsp; &nbsp;&nbsp;名:&nbsp; &nbsp;花卷</h4>
      <h4>身份证号:&nbsp; &nbsp;545645456456465</h4>
      <h4>准考证号:&nbsp; &nbsp;54564545454</h4>
    </div>
    <div class="botom-box">
      <h2>温馨提示:</h2>
      <h3>请核对信息无误后,张贴在准考证指定位置!</h3>
    </div>
  </div>
</body>
<style>
  .box{
    box-sizing: border-box;
    padding-top10px;  
    text-align: center;
    font-family: fangsong;
  }
  .box>h1 {
    font-size46px;
  }
  .center-box {
    text-align: left;
    width:290px;
    margin:60px auto;
}
   .center-box > h4{
    font-size18px;
   }
  .botom-box {
    text-align: center;
    margin-left20px;
}
</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>考场号:&nbsp;&nbsp;&nbsp;01</h1>
        <h1>座位号:&nbsp;&nbsp;&nbsp;01</h1>
        <div class=\""center-box\"">
        <h4>姓&nbsp; &nbsp;&nbsp;名:&nbsp; &nbsp;花卷</h4>
        <h4>身份证号:&nbsp; &nbsp;545645456456465</h4>
        <h4>准考证号:&nbsp; &nbsp;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 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved