现在有许多将HTML导出PDF的第三方包，这里介绍使用的是 Select.HtmlToPdf.NetCore

使用Select.HtmlToPdf.NetCore

1. 整体思路是将cshtml内容读出来，然后再转为Pdf文档

2. 读取cshtml内容有两种方法，第一种使用第三方包 RazorEngine.NetCore，第二种使用官方方法进行读取。（注意两种方法的cshtml内容略有不同）

效果图展示

在线演示地址

我把所有的源代码都上传到了我的个人Github，有需要的请自取：https://github.com/WeiMing0803/ExportPdf

首先使用 ChatGPT生成个人简历信息

代码部分

HomeController.cs :

1. public async Task<IActionResult> ToPdf()

2. {

3.    PdfDocument pdfDocument = new PdfDocument();

4.    HtmlToPdf converter = new HtmlToPdf();//实例化一个html到pdf转换器对象

5.    converter.Options.PdfPageOrientation = PdfPageOrientation.Portrait;//设置页面方向

6.    converter.Options.PdfPageSize = PdfPageSize.A4;//设置页面大小

7.    converter.Options.MarginTop = 10;//设置页边距

8.    converter.Options.MarginBottom = 10;

9.    converter.Options.MarginLeft = 10;

10.    converter.Options.MarginRight = 10;

12.    PdfReportModel model = new PdfReportModel { Name = "彭于晏", Email = "pengyuyan@outlook.com" };

13.    //string htmlResult = readByEngineRazor(model);//第一种方法，使用RazorEngine.NetCore读取Cshtml文件

14.    string htmlResult = await readCshtml(model);//第二种方法

16.    if (!string.IsNullOrEmpty(htmlResult))

17.    {

18.        pdfDocument = converter.ConvertHtmlString(htmlResult);

19.    }

21.    string savePath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.Desktop), $@"ExportPDF\{DateTime.Now.ToString("yyyyMMdd")}");

22.    Directory.CreateDirectory(savePath);

23.    string filename = Path.Combine(savePath, $"{DateTime.Now.ToString("yyyyMMddHHmmssffff")}.pdf");

24.    pdfDocument.Save(filename);

26.    byte[] bytes = System.IO.File.ReadAllBytes(filename);

27.    return File(bytes, "application/pdf", Path.GetFileName(filename));

28. }

30. private string readByEngineRazor(PdfReportModel model)

31. {

32.    string template = System.IO.File.ReadAllText("Views/Report/PdfReport.cshtml");

33.    string htmlResult = Engine.Razor.RunCompile(template, "PdfReport", typeof(PdfReportModel), model);

34.    return htmlResult;

35. }

37. private async Task<string> readCshtml(PdfReportModel model)

38. {

39.    string htmlResult = await _viewRenderService.RenderToStringAsync("Report/PdfReport", model);

40.    return htmlResult;

41. }

TemplateGadgetProvider.cs :

1. public class TemplateGadgetProvider

2. {

3.    public static TemplateGadgetProvider _instance;

4.    public static TemplateGadgetProvider Instance

5.    {

6.        get

7.        {

8.            if (_instance == null)

9.                _instance = new TemplateGadgetProvider();

10.            return _instance;

11.        }

12.    }

14.    public string Load(string virtualPath)

15.    {

16.        return File.ReadAllText(virtualPath);

17.    }

18. }

pdfReport.css :

Css样式文件：点击查看详细内容

1. html {

2.    font-family: 'Open Sans', sans-serif;

3.    background: whitesmoke;

4. }

6. a {

7.    text-decoration: none;

8.    color: black;

9. }

11. hr {

12.    background: grey;

13. }

15. #container {

16.    position: relative;

17.    display: flex;

18. }

20. #profile {

21.    flex: 15%;

22.    display: block;

23.    position: relative;

24.    margin: 5% 2% 0 10%;

25.    width: 100%;

26.    height: 100%;

27. }

29. #info-cards {

30.    flex: 55%;

31.    display: block;

32.    margin-top: 5%;

33.    margin-right: 10%;

34.    width: 100%;

35.    height: 100%;

36. }

38. #image {

39.    position: relative;

40.    overflow: hidden;

41. }

43. #image,

44. #profile-photo {

45.    position: relative;

46.    width: 80px;

47.    height: 80px;

48.    border-radius: 10px;

49. }

51.    #image > a {

52.        position: absolute;

53.        top: 0;

54.        left: 0;

55.        background: rgba(0, 0, 0, 0.5) !important;

56.        height: 100%;

57.        width: 100%;

58.        display: none;

59.    }

61.        #image > a > i {

62.            -webkit-text-stroke: 1px #ffffffdd;

63.            padding: 40%;

64.        }

66.    #image:hover a {

67.        display: block;

68.    }

70. #name {

71.    font-size: 23px !important;

72.    line-height: 20px !important;

73. }

75. #about,

76. .card > ul > li {

77.    padding: 0 0 0 15px;

78.    position: relative;

79.    display: inline-block;

80.    width: 100%;

81. }

83. #about {

84.    font-size: 20px !important;

85.    padding: 0 !important;

86. }

88.    #name,

89.    #about > p {

90.        font-weight: bolder;

91.        font-family: 'Open Sans', sans-serif;

92.    }

94. #email {

95.    font-size: 15px !important;

96.    font-weight: bold !important;

97.    font-family: 'Cutive Mono', monospace;

98. }

100. #college,

101. #email,

102. #year-graduation,

103. #education,

104. #more-about,

105. #telephone,

106. #fax {

107.    color: #555;

108.    font-size: 13.5px;

109. }

111. strong,

112. span {

113.    color: black;

114.    font-size: 16px;

115. }

117. #social-links,

118. #about {

119.    display: inline-block;

120. }

122. #social-links {

123.    margin-bottom: 12px;

124. }

126.    #social-links a {

127.        margin: 0 10px;

128.    }

130. #edit-intro {

131.    display: block;

132.    color: #097bbf;

133.    font-family: 'Nunito', sans-serif;

134. }

136. .fab {

137.    font-size: 1.1em;

138. }

140. .fab,

141. .fas {

142.    color: whitesmoke;

143. }

145. #about > a {

146.    top: 4px;

147.    right: 8px;

148. }

150. .edit {

151.    top: 19px;

152.    right: 10px;

153. }

155. #about > a,

156. .edit {

157.    position: absolute;

158.    font-size: 15px !important;

159. }

161. .stroke-transparent {

162.    -webkit-text-stroke: 1px #000;

163.    -webkit-text-fill-color: transparent;

164. }

166. .blue {

167.    color: #097bbf !important;

168.    font-size: 13px;

169. }

171. .stroke-transparent-blue {

172.    -webkit-text-stroke: 1px #097bbf;

173.    -webkit-text-fill-color: transparent;

174. }

176. .card {

177.    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .1);

178.    overflow-x: hidden;

179.    margin-bottom: 30px;

180.    padding: 15px 30px 30px 30px;

181.    background-color: #fff;

182. }

184.    .card > p {

185.        color: #0e141e;

186.        font-weight: bolder;

187.        font-size: 18px;

188.        line-height: 2;

189.    }

191.        .card > p > i {

192.            font-size: 18px;

193.        }

195.    .card > a {

196.        font-weight: 400;

197.        font-size: 15px;

198.        margin: 0;

199.        margin-left: 25px;

200.        padding: 0;

201.        border: 0;

202.        height: auto;

203.        background: transparent;

204.        color: #097bbf;

205.        outline: none;

206.        cursor: pointer;

207.    }

209.    .card > ul {

210.        list-style-type: none;

211.    }

213. .tags {

214.    font-size: 17px;

215.    font-weight: bolder;

216. }

218.    .tags ~ a {

219.        display: none !important;

220.    }

222.    .tags span {

223.        font-size: 14px;

224.        font-weight: normal;

225.        color: #0e141e;

226.    }

228.        .tags span span {

229.            color: #738f93;

230.        }

232. @media screen and (max-width:1090px) {

233.    #profile {

234.        margin-left: 5%;

235.    }

236. }

238. @media screen and (max-width:850px) {

239.    #container {

240.        display: block;

241.    }

243.    #profile {

244.        width: 90%;

245.    }

247.    .card {

248.        margin: 0 5%;

249.        margin-bottom: 30px;

250.    }

251. }

PdfReport.cshtml :

使用 RazorEngine.NetCore需要修改下面两处地方

1. 删除 @modelPdfReportModel

2. 将 @Html.Raw(@style) 修改为 @@Raw(@style)

视图文件：点击查看详细内容

1. @using exportPdf.common

2. @model PdfReportModel  

4. <!DOCTYPE html>

5. <html lang="en">

6. <head>

7.    <meta charset="UTF-8">

8.    <meta http-equiv="X-UA-Compatible" content="IE=edge">

9.    <meta name="viewport" content="width=device-width, initial-scale=1.0">

10.    <title>Document</title>

11.    @{

12.        string style = TemplateGadgetProvider.Instance.Load(@"wwwroot\css\pdfReport.css");

13.    }

14.    <style>@Html.Raw(@style)</style>

15. </head>

17. <body>

18.    <div id="inner-nav"></div>

19.    <div id="container">

20.        <div id="profile">

21.            <div id="image">

22.                <img id="profile-photo" src="https://img2023.cnblogs.com/blog/233608/202303/233608-20230308165653594-2049775608.jpg" alt="Profile-Image">

23.                <a href="#"><i class="fas fa-pen stroke-transparent"></i></a>

24.            </div>

25.            <p id="name">@Model.Name<br><span id="email">@Model.Email</span></p>

26.            <p id="designation">前端开发工程师<br><span id="college">天将降大任于斯人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为也，所以动心忍性，增益其所不能。——《孟子》 </span></p>

27.            <div id="social-links"><a href="#"><i class="fab fa-facebook-f stroke-transparent"></i></a><a><i

28.                        class="fab fa-twitter stroke-transparent"></i></a><a><i

29.                        class="fab fa-linkedin-in stroke-transparent"></i></a><a><i

30.                        class="fab fa-github stroke-transparent"></i></a></div>

31.            <a id="edit-intro" href="#"><i class="fas fa-pen-alt blue"></i>&nbsp;&nbsp;</a>

32.            <hr width="100%">

33.            <div id="about">

34.                <p style="display:inline;">个人详情</p>

35.                <a href="#"><i class="fas fa-pen stroke-transparent-blue"></i></a>

36.            </div>

37.            <p id="year-graduation">预计毕业年份<br><strong>2023年6月</strong></p>

38.            <p id="education">学历<br><strong>湖南大学 本科</strong></p>

39.            <p id="more-about">专业<br><strong> 计算机科学与技术专业</strong></p>

40.            <p id="telephone">电话<br><strong>0532-2271351</strong></p>

41.            <p id="fax">传真<br><strong>+91-532-25453441</strong></p>

42.        </div>

43.        <div id="info-cards">

44.            <div class="card">

45.                <p><i class="fas fa-briefcase stroke-transparent"></i>&nbsp;&nbsp;&nbsp;专业技能</p>

46.                <ul>

47.                    <li>

48.                        <p class="tags">1. 熟练掌握HTML、CSS、JavaScript等前端基础技术</p>

49.                    </li>

50.                    <li>

51.                        <p class="tags">2. 熟悉jQuery、Bootstrap等常用前端框架和库</p>

52.                    </li>

53.                    <li>

54.                        <p class="tags">3. 了解Node.js、Express等后端开发技术</p>

55.                    </li>

56.                    <li>

57.                        <p class="tags">4. 掌握Git、Webpack等常用开发工具</p>

58.                    </li>

59.                    <li>

60.                        <p class="tags">5. 具备良好的编码风格和文档习惯</p>

61.                    </li>

62.                </ul>

63.            </div>

64.            <div class="card">

65.                <p><i class="fas fa-briefcase stroke-transparent"></i>&nbsp;&nbsp;&nbsp;工作检验</p>

66.                <ul>

67.                    <li>

68.                        <p class="tags">1. 依帆网站首页制作（个人项目）<br>

69.    - 使用HTML、CSS、JavaScript实现了一个响应式的网站首页<br>

70.    - 使用Bootstrap进行布局和样式美化，使用jQuery实现轮播图和导航栏效果<br>

71.    - 使用Webpack进行打包和优化，使用Git进行版本控制和部署</p>

72.                    </li>

73.                    <li>

74.                        <p class="tags">2. 艺风网站后台管理系统（实习项目）<br>

75.    - 参与了一个基于Node.js和Express的后台管理系统的开发<br>

76.    - 负责前端页面的编写，使用EJS模板引擎渲染数据<br>

77.    - 使用Ajax和Fetch进行数据交互，使用Element UI组件库提升用户体验<br>

78.    - 遵循MVC架构，使用Mongoose操作MongoDB数据库</p>

79.                    </li>

80.                </ul>

81.            </div>

82.            <div class="card">

83.                <p><i class="fas fa-graduation-cap stroke-transparent"></i>&nbsp;&nbsp;&nbsp;自我评价</p>

84.                <ul>

85.                    <li>

86.                        <p class="tags">具备较强的学习能力和逻辑思维能力，喜欢接触新技术和新知识</p>

87.                    </li>

88.                    <li>

89.                        <p class="tags">具备良好的沟通能力和团队协作能力，能够积极配合团队完成任务</p>

90.                    </li>

91.                    <li>

92.                        <p class="tags">具备一定的创新能力和解决问题能力，能够针对不同需求提出合理方案</p>

93.                    </li>

94.                </ul>

95.                <a href="#">+ Add new</a>

96.            </div>

97.        </div>

98.    </div>

99. </body>

100. </html>

ViewRenderService :

1. public class ViewRenderService

2. {

3.    private readonly IRazorViewEngine _razorViewEngine;

4.    private readonly ITempDataProvider _tempDataProvider;

5.    private readonly IServiceProvider _serviceProvider;

7.    public ViewRenderService(IRazorViewEngine razorViewEngine,

8.        ITempDataProvider tempDataProvider,

9.        IServiceProvider serviceProvider)

10.    {

11.        _razorViewEngine = razorViewEngine;

12.        _tempDataProvider = tempDataProvider;

13.        _serviceProvider = serviceProvider;

14.    }

16.    public async Task<string> RenderToStringAsync(string viewName, object model)

17.    {

18.        var httpContext = new DefaultHttpContext { RequestServices = _serviceProvider };

19.        var actionContext = new ActionContext(httpContext, new RouteData(), new ActionDescriptor());

21.        using (var sw = new StringWriter())

22.        {

23.            var viewResult = _razorViewEngine.FindView(actionContext, viewName, false);

25.            if (viewResult.View == null)

26.            {

27.                throw new ArgumentNullException($"{viewName} does not match any available view");

28.            }

30.            var viewDictionary = new ViewDataDictionary(new EmptyModelMetadataProvider(), new ModelStateDictionary())

31.            {

32.                Model = model

33.            };

35.            var viewContext = new ViewContext(

36.                actionContext,

37.                viewResult.View,

38.                viewDictionary,

39.                new TempDataDictionary(actionContext.HttpContext, _tempDataProvider),

40.                sw,

41.                new HtmlHelperOptions()

42.            );

44.            await viewResult.View.RenderAsync(viewContext);

45.            return sw.ToString();

46.        }

47.    }

48. }

Program.cs :

1. builder.Services.AddTransient<ViewRenderService>();

以上就是使用 Select.HtmlToPdf.NetCore将HTML导出为PDF的全部内容！

原文地址：使用Net将HTML简历导出为PDF格式 - 百宝门的博客 (baibaomen.com)