JavaScript 使用 Css 打印特定区域

标签 javascript html css

我正在尝试打印包含 css 的特定 div。我尝试了下面的代码,但是当我添加 css 行时,它打印出一个空白页,根本没有任何内容。删除 css 行打印没有任何 css 的页面

 function PrintElem(elem){
    Popup($('<div/>').append($(elem).clone()).html());
 }

 function Popup(data){

 var mywindow = window.open();
 mywindow.document.write('<html><head><title>my div</title>');
 mywindow.document.write('<link rel="stylesheet" href="./css/casestudy.css" type="text/css">');
 mywindow.document.write('<link rel="stylesheet" href="./css/side-menu.css" type="text/css">');

 mywindow.document.write('</head><body>');
 mywindow.document.write(data);
 mywindow.document.write('</body></html>');

 mywindow.print();
}

我该如何解决这个问题。我想打印所有包含的 css。

最佳答案

你可以试试css

<style type="text/css">
    @media print {
        body * { visibility: hidden; }
        .printme* { visibility: visible; }
        .printme { position: absolute; top: 40px; left: 30px; }
    }
</style>

关于JavaScript 使用 Css 打印特定区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39870744/

相关文章:

html - Bootstrap .container-fluid 布局为 ".container-like"

javascript - 使用过渡更改宽度时将文本区域 Bootstrap 到视口(viewport)之外

javascript - 在 JS 中,获取 SVG 路径的实际(计算)笔划宽度

javascript - 更改iframe src而不刷新父页面

javascript - 将图像插入到 DOM,大小调整为其宽度/高度的 50%

Javascript - 原语是如何工作的

javascript - 背景图片有问题?

javascript - 如何从 jQuery 脚本调用外部 JS 函数?

html - Flexbox CSS 在 Featherlight Light Box 中不起作用。我还能如何在 Lightbox 中定位元素,或修复 Flexbox?

html - 我们可以在同一个 div 中使用 row 和 col-md-12 吗?或者它应该在父子 div 中?