Question

目前我有一个Web应用程序，其中包含很多div，菜单和许多其他布局人员。但是，当用户单击打印时，我想要的只有两个图像或某些情况下的一个图像。假设我已经获得了两个图像网址，如何删除整个页面的CSS并按预期执行打印？这是我尝试的一些代码，它似乎会将整个页面从Web应用程序布局更改为仅2个图像？我能预防吗？感谢：

print.css

<style type="text/css" media="print">
    .img{
        padding:5%;
        height:100%;
        width:40%;
    }
    #img1{
        left:0px;
    }
</style>

JS

$("#printBtn").click(function() {
    $("link[media='screen']").attr("href", "print.css");
    window.print();
});

更新

更准确地说，我要做的是获取当前页面的图像编号，并且只打印这两个图像。如何执行这样的功能？

假设我已经获得了两个img的id。首先，我需要在这两项中动态添加class ='img'吗？下一步是什么，直到印刷完成？感谢

<img id="img_34" src="demo/medium/Web081112_P034_medium.jpg" alt="flip book">
<img id="img_35" src="demo/medium/Web081112_P034_medium.jpg" alt="flip book">

Answer 1

你可以隐藏整个页面（即）。

使用CSS：

body {
visiblilty:hidden;
}

然后使div可见（渲染图像的位置）

#yourdiv{
visibility:visible;
}

然后使用window.print（）;这将打印#yourdiv

Answer 2

为什么要将<link media='screen' />更改为print.css样式表？

如果您只是并排使用screen和print样式表，这是更好的做法。不需要Javascript / jQuery：

<!-- Default styling -->
<link rel="stylesheet" type="text/css" href="/css/default.css" media="screen" />

<!-- This styling is only used for printing -->
<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />

要回答您的问题，您只需在页面底部添加一个div，例如<div id='print-wrap'></div>，然后将所有原创内容放在那里。

然后，在你的CSS中你会做类似的事情：

<强> default.css

#print-wrap { display: none; }

<强> print.css

img { display: none; }
#print-wrap { display: block; }
#img_34 { display: block !important; }
#img_35 { display: block !important; }

更新

更新了与更新后的问题相对应的答案。如果您只想在打印页面上看到两个图像，只需使用display: none;隐藏所有其他图像，并使用display: block !important;

显示您要打印的图像

Answer 3

当您在屏幕（网页）上时，print css和screen css将不会一起使用，打印媒体时，打印CSS将被仅引用（打印））。

每当发出打印命令时，print css与screen css一起引用，打印特定的css属性具有更高的优先级。
每当您完成并返回同一页面时，页面将按照发出打印命令之前的状态返回。

来自W3，

打印

用于分页材料和在屏幕上查看的文档   在打印预览模式下。

在您的特定情况下，您只想打印2张图像，而不是全部图像。所以，

print.css :

img { display: none; } #img_34, #img_35 { /*Image id's*/ display: block; }

要使用print css测试页面，只需在浏览器中进行打印预览即可了解其外观，然后按 Esc 返回页面。

如果您有兴趣阅读有关print css和指南的更多信息， this 是一篇很好的文章SmashingMagazine

打印功能不使用jquery和css打印整个页面

3 个答案:

更新