Asp.Net Core MVC中jsreport Chrome-PDF页脚局部视图页码失效求助

我之前在Asp.Net Core MVC里用jsreport Chrome-PDF配方时也碰到过一模一样的页码问题，给你几个亲测有效的解决方案：

• 确保启用Chrome-PDF的页眉页脚并设置足够边距
  Chrome需要明确开启页眉页脚显示，并且要有足够的页面边距来容纳它们，否则页码元素根本不会被渲染。在你调用jsreport渲染的代码里，要配置Chrome的相关参数：

  var report = await _jsreportService.RenderAsync(new RenderRequest
  {
      Template = new Template
      {
          Content = await _htmlRenderer.RenderViewToStringAsync("YourReportView", model),
          Engine = Engine.None, // 根据你的实际引擎调整，比如Handlebars
          Recipe = Recipe.ChromePdf,
          Chrome = new Chrome
          {
              DisplayHeaderFooter = true,
              // 页脚需要的边距，根据你的页脚高度调整，比如1.5cm
              MarginBottom = "1.5cm",
              MarginTop = "1cm", // 页眉如果不需要可以设小一点
              // 其他必要配置
          }
      }
  });
  

• 将局部视图作为Chrome的FooterTemplate传递，而非放在主体内容中
  Chrome-PDF的页码替换逻辑只对专门指定的页眉/页脚模板生效，放在报表主体里的pageNumber和totalPages不会被处理。你需要先把局部视图渲染成字符串，再赋值给Chrome的FooterTemplate属性：

  // 先渲染页脚局部视图为HTML字符串
  var footerHtml = await _htmlRenderer.RenderViewToStringAsync("YourFooterPartial", null);
  
  var report = await _jsreportService.RenderAsync(new RenderRequest
  {
      Template = new Template
      {
          Content = await _htmlRenderer.RenderViewToStringAsync("YourReportView", model),
          Engine = Engine.None,
          Recipe = Recipe.ChromePdf,
          Chrome = new Chrome
          {
              DisplayHeaderFooter = true,
              MarginBottom = "1.5cm",
              MarginTop = "1cm",
              FooterTemplate = footerHtml // 这里传入页脚的HTML
          }
      }
  });
  

• 注意Chrome页眉页脚的样式限制
  Chrome对页眉页脚模板的样式支持有限，必须使用内联样式（不能引用外部CSS文件），你的局部视图里已经用了内联样式，这点没问题，但要避免过于复杂的布局，比如嵌套过深的表格，可能会导致渲染异常。可以先简化页脚内容，比如只保留<span class="pageNumber"></span> of <span class="totalPages"></span>，测试能正常显示页码后再逐步添加日期、品牌名称等内容。

• 避免报表视图使用布局页
  如果你的报表视图引用了全局布局页，布局页的内容可能会干扰jsreport对页眉页脚的识别，建议给报表视图单独设置Layout = null;，确保渲染的内容只有报表主体和你指定的页脚模板。

• 检查jsreport版本
  确保你使用的jsreport.AspNetCore包是最新稳定版，旧版本的Chrome-PDF配方可能存在页码替换的bug，更新到最新版能解决不少兼容性问题。

内容的提问来源于stack exchange，提问作者Sohaib Afzal