在应用了所有css的HTML中打印div

Question

我正在asp.net MVC中创建一个项目。我想打印一个应用了所有CSS样式的div。此div可能包含一个或多个div。我尝试了很多javascript打印代码，但每个都失败了。我要打印的页面如下所示： Click here to view page。我只想打印包含细节的输入区域下方的区域。但问题是当我使用javascript打印方法时，我的表视图突然消失了。这是我得到的打印预览：Click here to view the print preview page。我尝试了多种方法，但都失败了。请帮忙。提前致谢。下面是我的前端代码文件

saleInvoice.cshtml

let videoFileName = "mysavefile.mp4";

cart.cshtml

let videoFileName = "mysavefile.mov";

Answer 1

这里有很多问题。首先是最重要的。你实际上并没有使用表格。相反，您使用Bootstrap的网格样式来制作表格的近似值。使用实际的HTML表是一个更好的主意，不仅仅是为了它提供的一致性，还为了可访问性。

其次，＆＃34;边界＆＃34;到你的＆＃34;表＆＃34;正在通过背景图像应用。虽然我认为Chrome实际上为用户提供了打印背景图像的选项，但现在，它不是默认设置，而其他浏览器在打印时将完全忽略背景图像。无论长短，这种方法都注定要失败。

第三，在打印时，您实际上正在获取此div的内容并将整个 HTML文档替换为该文档。重要的是，这意味着丢弃任何样式表和文档的一部分。特别是你的问题，那将包括Bootstrap样式表。这是人们过去常常处理打印方式的方式。现在，有一个更好的方法来处理从打印中删除无关内容。您只需添加特定于打印的样式并隐藏您不想要打印的元素（例如页眉）。例如：

@media print {
    #Header { display:none; }
}

您也可以使用相同的方法更改样式以改善打印布局。也许您希望打印时文本更大或更小。您只需在此块中添加body { font-size:12pt; }之类的内容。

您实际需要的唯一JavaScript只是window.print()。您的打印按钮会调用它，并且您的特定于打印的CSS应该接管以修改打印版本中需要修改的内容。