gpt4 book ai didi

javascript - 使用当前 css 打印 html 页面

转载 作者:行者123 更新时间:2023-11-28 06:12:28 24 4
gpt4 key购买 nike

我想用当前的 CSS 在 html 页面中打印一些已识别的 div。

当我尝试通过“ctrl+p”打印页面时,包含了 css。但是,如果我通过按钮执行此操作,则打印屏幕不包含 css。

有什么建议吗?谢谢..

我的代码示例;

<head>
<link rel="stylesheet" href="bootstrap.css" type="text/css" media="screen">
<link rel="stylesheet" href="bootstrap.css" type="text/css" media="print">

<link rel="stylesheet" href="cssFile.css" type="text/css" media="screen">
<link rel="stylesheet" href="cssFile.css" type="text/css" media="print">
</head>

我使用相同的 css 文件链接,包括屏幕媒体属性和打印媒体属性。这种方法合适吗?我应该为 js 函数中的打印编写一个新的 css 吗?

我也试过在js函数中加入css文件。

<script>
$( document ).ready(function() {
$("#button").click(function(){
var divId = "div";

window.frames["print_frame"].document.head.innerHTML='<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="print"> <link rel="stylesheet" href="css/cssFile.css" type="text/css" media="print">';
window.frames["print_frame_ssd"].document.body.innerHTML=document.getElementById(divId).innerHTML;
window.frames["print_frame"].window.focus();
window.frames["print_frame"].window.print();
});
});
</script>

.

<div id="div">
content..
<iframe name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>
</div>

最佳答案

为了确保样式表没问题,你可以查看这篇文章

https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/

以及你可以尝试的功能

var prtContent = document.getElementById("your div id");
var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();

试一试,让我知道它对你有用:)

关于javascript - 使用当前 css 打印 html 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36085074/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com