HTML 横向打印页面中的HTML元素

Posted 2021-05-24

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML 横向打印页面中的HTML元素相关的知识，希望对你有一定的参考价值。

embed {
    -webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
     filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

如何在 Chrome 或 Firefox 中打印特定的 HTML 元素而不是整个页面？

【中文标题】如何在 Chrome 或 Firefox 中打印特定的 HTML 元素而不是整个页面？【英文标题】：How to print a specific HTML element and not the full page in Chrome or Firefox? 【发布时间】：2016-07-12 05:41:55 【问题描述】：

假设我想打印（或转换为 PDF）复杂 HTML 页面的特定区域（例如，div）。如何在 Chrome 或 Firefox 中做到这一点？我没有从“检查元素”功能中找到特定选项。

【问题讨论】：

【参考方案1】：

我知道这是一个相当古老的话题，但这里对我有用：

<div id="parent_div">
    <p>NOT to be printed</p>
    <div id="print_div">
        Print this!
    </div>
    <button id="print_now" onclick="PrintDiv('print_div')">
</div>

还有JS函数：

function PrintDiv(div_id) 
    $('body').css("visibility", "hidden");
    $("#"+div_id).css("visibility", "visible");
    window.print();
    $('body').css("visibility", "visible");

如果您不使用 jQuery，您仍然可以使用以下方式更改 CSS：

document.getElementById("body").style.visibility = "hidden";
document.getElementById(div_id).style.visibility = "visible";

【讨论】：

【参考方案2】：

试试这个。我也在***中找到了这个:)

试试这个，这是解决问题的好例子

函数 PrintElem(elem) 弹出($(elem).html());

        function Popup(data) 
        
            var mywindow = window.open('', 'my div', 'height=400,width=600');
            mywindow.document.write('<html><head><title>my div</title>');
            /*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
            mywindow.document.write('</head><body >');
            mywindow.document.write(data);
            mywindow.document.write('</body></html>');

            mywindow.document.close(); // necessary for IE >= 10
            mywindow.focus(); // necessary for IE >= 10

            mywindow.print();
            mywindow.close();

            return true;
        

    </script>
</head>
<body>
    <div id="mydiv">
        This will be printed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a quam at nibh adipiscing interdum. Nulla vitae accumsan ante. 
    </div>
    <div>
        This will not be printed.
    </div>
    <div id="anotherdiv">
        Nor will this.
    </div>
    <input type="button" value="Print Div" onclick="PrintElem('#mydiv')" />
</body>

【讨论】：

没有集成解决方案吗？【参考方案3】：

通过使用仅打印media query，这是introduced in CSS3 的一项功能

假设它由id 或class 选择器标识，则将display: none 应用于它，而不是visibility: hidden，因为显示不仅控制元素的显示，还控制占用的空间在文档中，与可见性不同，可见性隐藏它但仍然让它占据它的空间。

所以它应该看起来像这样：

#container 
  background-color: blue;
  padding: 1rem;


#display-test 
  background-color: lightgreen;


#visibility-test 
  background-color: lightblue;


#display-test,
#visibility-test 
  color: white;
  padding: 1rem;
  margin: 1rem 0 1rem 0;


#print-display-test,
#print-visibility-test 
  color: white;
  display: none;


@media only print 
  #display-test 
    display: none;
  
  
  #visibility-test 
    visibility: hidden;
  
  
  #print-display-test,
  #print-visibility-test 
    display: block;

<div id="container">
  <div id="display-test">
    This is a display test
  </div>
  <span id="print-display-test">
    This is going to show at the start of the page
  </span>
  <div id="visibility-test">
    This is a visibility test
  </div>
  <span id="print-visibility-test">
    This is going to show far apart from the text above
  </span>
  <br>
  <button type="button" onclick="window.print()">
    Print this
  </button>
</div>

【讨论】：

以上是关于HTML 横向打印页面中的HTML元素的主要内容，如果未能解决你的问题，请参考以下文章

用html横向、多页的分页打印，打印不出来，怎么办？