Javascript导出/打印到PDF
[英]Javascript Export/Print to PDF
问题描述
I'm trying to export / print a div to PDF, however the "div" format in the PDF is not what I really want. 
我正在尝试将div导出/打印为PDF，但是PDF中的“ div”格式并不是我真正想要的。 I'm having two problems: 我有两个问题：
1st Problem: 第一个问题：
When I click the print button, it opens a page already with the pdf, but the first line, it fills everything. 当我单击打印按钮时，它已经打开了一个带有pdf的页面，但是第一行填充了所有内容。 See picture to see what I mean. 看图片明白我的意思。
2nd problem 第二个问题
In the div I have included ACTIONS ... I want you to do the export / print ... this "section is deleted and does not appear because it is not necessary. See image to see what I want. 在div中，我包括了ACTIONS ...我希望您进行导出/打印...此“部分已被删除，因为没有必要，所以它不会出现。请参阅图像以查看我想要的内容。
HTML HTML
<table id="table_id" class="table">
<thead>
<tr>
<th>
ID_Cliente
</th>
<th>
Nome
</th>
<th>
Morada
</th>
<th>
Telemóvel
</th>
<th>
Email
</th>
<th>
Ações
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.ID_Cliente)
</td>
<td>
@Html.DisplayFor(modelItem => item.Nome)
</td>
@if (User.IsInRole("Administrador"))
{
<td>
@Html.DisplayFor(modelItem => item.Morada)
</td>
<td>
@Html.DisplayFor(modelItem => item.Telemovel)
</td>
<td>
@Html.DisplayFor(modelItem => item.Email)
</td>
}
else
{
<td>
xxxxxxx
</td>
<td>
xxxxxxx
</td>
<td>
xxxxxxx
</td>
}
<td class="buttons">
<div class="buttons" role="group" aria-label="Botões">
<a href='@Url.Action("Edit","Clientes",new { id=item.ID_Cliente }, Request.Url.Scheme)' class="btn btn-sm btn-warning"><span class="glyphicon glyphicon-edit"></span> Editar</a>
<a href='@Url.Action("Details","Clientes", new { id=item.ID_Cliente }, Request.Url.Scheme)' class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-info-sign"></span> Detalhes</a>
<a href='@Url.Action("Delete","Clientes", new { id=item.ID_Cliente }, Request.Url.Scheme)' class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-trash"></span> Eliminar</a>
</div>
</td>
</tr>
}
</tbody>
</table>
JavaScript JavaScript的
<script type="text/javascript">
$("#btnPrint").on("click", function () {
var divContents = $("#table_id").html();
var printWindow = window.open('', '', 'height=400,width=800');
printWindow.document.write('<html><head><title>Lista de Clientes</title>');
printWindow.document.write('</head><body >');
printWindow.document.write(divContents);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
});
</script>
1 个解决方案
解决方案1
0 已采纳 2018-09-08 12:30:40
You are stripping the " <table> " tag from the table element, that should be around the divContents variable for the table to display correctly. 您正在从表格元素中删除“ <table> ”标记，该标记应位于divContents变量周围，表格才能正确显示。
For the last columns, you can simply hide them before getting the divContents variable and display them afterwards. 对于最后几列，您可以简单地在获取divContents变量之前将其隐藏，然后再显示它们。 If you are up for it you can also clone the table element and remove the last column, and use the html() on the cloned element. 如果您愿意，也可以克隆表格元素并删除最后一列，然后在克隆的元素上使用html（）。
For simply hiding/showing the last column your code would be: 为了简单地隐藏/显示最后一列，您的代码将是：
$("#btnPrint").on("click", function () {
$("#table_id th:last-child, #table_id td:last-child").hide();
var divContents = $("#table_id").html();
$("#table_id th:last-child, #table_id td:last-child").show();
var printWindow = window.open('', '', 'height=400,width=800');
printWindow.document.write('<html><head><title>Lista de Clientes</title>');
printWindow.document.write('</head><body >');
printWindow.document.write('<table>' + divContents + '</table>');
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.