下载为 PDF 文档但用于查看报告时 HTML 中断答案

【问题标题】：HTML breaking when downloading as PDF document but working for view report下载为 PDF 文档但用于查看报告时 HTML 中断
【发布时间】：2021-09-01 04:13:35
【问题描述】：

下面的 HTML 代码逻辑是用 sql 编写的，并从 ASP.net 页面调用，该页面提供了用于查看报告和下载为 PDF 的选项。查看报告工作正常，但下载的报告工作异常下面的第一个输出来自正确的视图报告。我将 pdf 中的输出与视图报告中的输出相同。

<table class="Grid_Text" style="width: 100%; height: 100%; padding: 2px; border: 0;"><tr><td class="NoWrap" style="width: 25%;"><span style="font-style: italic;">Item Number</span>&nbsp;</td><td style="width: 20%;"><span style="font-style: italic;">Quantity Ordered</span>&nbsp;</td><td style="width: 20%;"><span style="font-style: italic;">Price</span>&nbsp</td><td style="width: 20%;"></td><td style="width: 25%;"></td></tr></table><table class="Grid_Text" style="width: 100%; height: 100%; padding: 0px; border: 0;"><tr><td class="NoWrap" style="width: 25%;"><span style="font-weight: bold;">049</span>&nbsp;</td><td style="width: 20%;">40</td><td style="width: 20%;">36.00000</td><td style="width: 20%;">CA</td><td style="width: 25%;"></td></tr><tr><td></td></tr><tr><td class="NoWrap" style="width: 25%;"> UPC Case Code: </td><td class="NoWrap">060412</td></tr><tr><td class="NoWrap" style="width: 25%;"> Vendor Item: </td><td class="NoWrap"></td></tr></table>
<hr />
<table class="Grid_Text" style="width: 100%; height: 100%; padding: 2px; border: 0;"><tr><td class="NoWrap" style="width: 25%;"><span style="font-style: italic;">Item Number</span>&nbsp;</td><td style="width: 20%;"><span style="font-style: italic;">Quantity Ordered</span>&nbsp;</td><td style="width: 20%;"><span style="font-style: italic;">Price</span>&nbsp</td><td style="width: 20%;"></td><td style="width: 25%;"></td></tr></table><table class="Grid_Text" style="width: 100%; height: 100%; padding: 0px; border: 0;"><tr><td class="NoWrap" style="width: 25%;"><span style="font-weight: bold;">273</span>&nbsp;</td><td style="width: 20%;">40</td><td style="width: 20%;">42.40000</td><td style="width: 20%;">CA</td><td style="width: 25%;"></td></tr><tr><td></td></tr><tr><td class="NoWrap" style="width: 25%;"> UPC Case Code: </td><td class="NoWrap">00413</td></tr><tr><td class="NoWrap" style="width: 25%;"> Vendor Item: </td><td class="NoWrap"></td></tr></table>
<hr />
<table class="Grid_Text" style="width: 100%; height: 100%; padding: 2px; border: 0;"><tr><td class="NoWrap" style="width: 25%;"><span style="font-style: italic;">Item Number</span>&nbsp;</td><td style="width: 20%;"><span style="font-style: italic;">Quantity Ordered</span>&nbsp;</td><td style="width: 20%;"><span style="font-style: italic;">Price</span>&nbsp</td><td style="width: 20%;"></td><td style="width: 25%;"></td></tr></table><table class="Grid_Text" style="width: 100%; height: 100%; padding: 0px; border: 0;"><tr><td class="NoWrap" style="width: 25%;"><span style="font-weight: bold;">598</span>&nbsp;</td><td style="width: 20%;">48</td><td style="width: 20%;">28.80000</td><td style="width: 20%;">CA</td><td style="width: 25%;"></td></tr><tr><td></td></tr><tr><td class="NoWrap" style="width: 25%;"> UPC Case Code: </td><td class="NoWrap">000911</td></tr><tr><td class="NoWrap" style="width: 25%;"> Vendor Item: </td><td class="NoWrap"></td></tr></table>
<hr />
<table class="Grid_Text" style="width: 100%; height: 100%; padding: 2px; border: 0;"><tr><td class="NoWrap" style="width: 25%;"><span style="font-style: italic;">Item Number</span>&nbsp;</td><td style="width: 20%;"><span style="font-style: italic;">Quantity Ordered</span>&nbsp;</td><td style="width: 20%;"><span style="font-style: italic;">Price</span>&nbsp</td><td style="width: 20%;"></td><td style="width: 25%;"></td></tr></table><table class="Grid_Text" style="width: 100%; height: 100%; padding: 0px; border: 0;"><tr><td class="NoWrap" style="width: 25%;"><span style="font-weight: bold;">251856</span>&nbsp;</td><td style="width: 20%;">40</td><td style="width: 20%;">54.00000</td><td style="width: 20%;">CA</td><td style="width: 25%;"></td></tr><tr><td></td></tr><tr><td class="NoWrap" style="width: 25%;"> UPC Case Code: </td><td class="NoWrap">0000910</td></tr><tr><td class="NoWrap" style="width: 25%;"> Vendor Item: </td><td class="NoWrap"></td></tr></table>
<hr />
<table class="Grid_Text" style="width: 100%; height: 100%; padding: 2px; border: 0;"><tr><td class="NoWrap" style="width: 25%;"><span style="font-style: italic;">Item Number</span>&nbsp;</td><td style="width: 20%;"><span style="font-style: italic;">Quantity Ordered</span>&nbsp;</td><td style="width: 20%;"><span style="font-style: italic;">Price</span>&nbsp</td><td style="width: 20%;"></td><td style="width: 25%;"></td></tr></table><table class="Grid_Text" style="width: 100%; height: 100%; padding: 0px; border: 0;"><tr><td class="NoWrap" style="width: 25%;"><span style="font-weight: bold;">239</span>&nbsp;</td><td style="width: 20%;">40</td><td style="width: 20%;">63.60000</td><td style="width: 20%;">CA</td><td style="width: 25%;"></td></tr><tr><td></td></tr><tr><td class="NoWrap" style="width: 25%;"> UPC Case Code: </td><td class="NoWrap">0000908</td></tr><tr><td class="NoWrap" style="width: 25%;"> Vendor Item: </td><td class="NoWrap"></td></tr></table>
</td></tr></table>'

预期输出

项目编号订购数量价格&nbsp049 4036.00000CA UPC 案例代码：060412 供应商项目：

项目编号订购数量价格&nbsp273 4042.40000CA UPC 案例代码：00413 供应商项目：

项目编号订购数量价格&nbsp598 4828.80000CA UPC 案例代码：000911 供应商项目：

项目编号订购数量价格&nbsp251856 4054.00000CA UPC 案例代码：0000910 供应商项目：

项目编号订购数量价格&nbsp239 4063.60000CA UPC 案例代码：0000908 供应商项目：

wrong output from PDF as below:(only one row of sample is given here)

【问题讨论】：

标签： html css sql asp.net html-table

【解决方案1】：

我注意到关于您的 HTML 的一件事，您的最后一行有 3 个未配对的标签 </td></tr></table>，所以删除它们。

我不确定这是否正是您要寻找的，但它是一种获取 PDF 的方法，并且输出的结果符合您的预期。

我创建了一个打印按钮，点击时打印窗口。将表格包裹在 <div id="printable-page"></div> 中，其中包含您要打印的内容，然后您可以单击按钮打开打印预览窗口，并将窗口/文件打印为 PDF，如下所示： https://i.stack.imgur.com/QlGZQ.png

$('a.printPage').click(function(){
          $('#printable-page').show();
             window.print();
             return false;
  });

page { size:  auto; margin: 25mm 25mm 25mm 25mm; } 
@media print {
  #search,
  .printPage {
    display: none !important;
  }
 }
 .printbtn{
  display: inline-block;
  padding-left: 0px; 
  padding-top: 10px;
  text-align: center;
  border-radius: 5px;
}
.printPage {
  background-color: #104723;
  color: #b3ab7d;
  text-decoration: none;
  border-radius: 5px;
  height: 18px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<div class="printbtn">
    <a class="printPage" href="#">Print Page</a>
</div>


<div id="printable-page">
<table class="Grid_Text" style="width: 100%; height: 100%; padding: 2px; border: 0;"><tr><td class="NoWrap" style="width: 25%;"><span style="font-style: italic;">Item Number</span>&nbsp;</td><td style="width: 20%;"><span style="font-style: italic;">Quantity Ordered</span>&nbsp;</td><td style="width: 20%;"><span style="font-style: italic;">Price</span>&nbsp</td><td style="width: 20%;"></td><td style="width: 25%;"></td></tr></table><table class="Grid_Text" style="width: 100%; height: 100%; padding: 0px; border: 0;"><tr><td class="NoWrap" style="width: 25%;"><span style="font-weight: bold;">049</span>&nbsp;</td><td style="width: 20%;">40</td><td style="width: 20%;">36.00000</td><td style="width: 20%;">CA</td><td style="width: 25%;"></td></tr><tr><td></td></tr><tr><td class="NoWrap" style="width: 25%;"> UPC Case Code: </td><td class="NoWrap">060412</td></tr><tr><td class="NoWrap" style="width: 25%;"> Vendor Item: </td><td class="NoWrap"></td></tr></table>
<hr />
<table class="Grid_Text" style="width: 100%; height: 100%; padding: 2px; border: 0;"><tr><td class="NoWrap" style="width: 25%;"><span style="font-style: italic;">Item Number</span>&nbsp;</td><td style="width: 20%;"><span style="font-style: italic;">Quantity Ordered</span>&nbsp;</td><td style="width: 20%;"><span style="font-style: italic;">Price</span>&nbsp</td><td style="width: 20%;"></td><td style="width: 25%;"></td></tr></table><table class="Grid_Text" style="width: 100%; height: 100%; padding: 0px; border: 0;"><tr><td class="NoWrap" style="width: 25%;"><span style="font-weight: bold;">273</span>&nbsp;</td><td style="width: 20%;">40</td><td style="width: 20%;">42.40000</td><td style="width: 20%;">CA</td><td style="width: 25%;"></td></tr><tr><td></td></tr><tr><td class="NoWrap" style="width: 25%;"> UPC Case Code: </td><td class="NoWrap">00413</td></tr><tr><td class="NoWrap" style="width: 25%;"> Vendor Item: </td><td class="NoWrap"></td></tr></table>
<hr />
<table class="Grid_Text" style="width: 100%; height: 100%; padding: 2px; border: 0;"><tr><td class="NoWrap" style="width: 25%;"><span style="font-style: italic;">Item Number</span>&nbsp;</td><td style="width: 20%;"><span style="font-style: italic;">Quantity Ordered</span>&nbsp;</td><td style="width: 20%;"><span style="font-style: italic;">Price</span>&nbsp</td><td style="width: 20%;"></td><td style="width: 25%;"></td></tr></table><table class="Grid_Text" style="width: 100%; height: 100%; padding: 0px; border: 0;"><tr><td class="NoWrap" style="width: 25%;"><span style="font-weight: bold;">598</span>&nbsp;</td><td style="width: 20%;">48</td><td style="width: 20%;">28.80000</td><td style="width: 20%;">CA</td><td style="width: 25%;"></td></tr><tr><td></td></tr><tr><td class="NoWrap" style="width: 25%;"> UPC Case Code: </td><td class="NoWrap">000911</td></tr><tr><td class="NoWrap" style="width: 25%;"> Vendor Item: </td><td class="NoWrap"></td></tr></table>
<hr />
<table class="Grid_Text" style="width: 100%; height: 100%; padding: 2px; border: 0;"><tr><td class="NoWrap" style="width: 25%;"><span style="font-style: italic;">Item Number</span>&nbsp;</td><td style="width: 20%;"><span style="font-style: italic;">Quantity Ordered</span>&nbsp;</td><td style="width: 20%;"><span style="font-style: italic;">Price</span>&nbsp</td><td style="width: 20%;"></td><td style="width: 25%;"></td></tr></table><table class="Grid_Text" style="width: 100%; height: 100%; padding: 0px; border: 0;"><tr><td class="NoWrap" style="width: 25%;"><span style="font-weight: bold;">251856</span>&nbsp;</td><td style="width: 20%;">40</td><td style="width: 20%;">54.00000</td><td style="width: 20%;">CA</td><td style="width: 25%;"></td></tr><tr><td></td></tr><tr><td class="NoWrap" style="width: 25%;"> UPC Case Code: </td><td class="NoWrap">0000910</td></tr><tr><td class="NoWrap" style="width: 25%;"> Vendor Item: </td><td class="NoWrap"></td></tr></table>
<hr />
<table class="Grid_Text" style="width: 100%; height: 100%; padding: 2px; border: 0;"><tr><td class="NoWrap" style="width: 25%;"><span style="font-style: italic;">Item Number</span>&nbsp;</td><td style="width: 20%;"><span style="font-style: italic;">Quantity Ordered</span>&nbsp;</td><td style="width: 20%;"><span style="font-style: italic;">Price</span>&nbsp</td><td style="width: 20%;"></td><td style="width: 25%;"></td></tr></table><table class="Grid_Text" style="width: 100%; height: 100%; padding: 0px; border: 0;"><tr><td class="NoWrap" style="width: 25%;"><span style="font-weight: bold;">239</span>&nbsp;</td><td style="width: 20%;">40</td><td style="width: 20%;">63.60000</td><td style="width: 20%;">CA</td><td style="width: 25%;"></td></tr><tr><td></td></tr><tr><td class="NoWrap" style="width: 25%;"> UPC Case Code: </td><td class="NoWrap">0000908</td></tr><tr><td class="NoWrap" style="width: 25%;"> Vendor Item: </td><td class="NoWrap"></td></tr></table>
</div>

【讨论】：

【解决方案2】：

在解决问题的所有静态值中添加分号后，它在两种情况下都有效

【讨论】：