网页的横向打印的三种方案(print your page landscape)

最新推荐文章于 2023-03-15 17:35:50 发布

weixin_34324081

最新推荐文章于 2023-03-15 17:35:50 发布

阅读量699

点赞数

关于网页打印，window.print()提供的功能离远离一般的需求，很多情况下需要编程扩展

目前网上有很多关于网页打印的，但大多采用了ActiveX控件或IE内置的一些Object，由于ActiveX的安全性因素，实用性大打折扣

关于网页的横向打印，确切的说，使用标准JS或CSS方法是不可行的，然而，我们可以根据需求来考虑以下三种方案

方案一：CSS滤镜实现

MS为IE浏览器（5.0以上）提供了一套不错的CSS滤镜，能够实现很多效果（见http://www.cnblogs.com/blodfox777/archive/2008/08/14/1267679.html），我们可以利用它和CSS的打印@media来使页面布局，从而模拟横向打印：

Code
<html>
    <head>
        <title>Example</title>
        <style type="text/css" media="print">
            div.PageBreak
            {
                page-break-after:always
            }

            div.page
            {
                writing-mode: tb-rl;
                height: 80%;
                margin: 10% 0%;
            }

            div.page table
            {
                margin-right: 80pt;
                filter: progid:DXImageTransform.Microsoft.BasicImage(Rotat  ion=1);
            }
        </style>
    </head>
    <body>
        <p><h3>Print this!!</h3></p>
        Page one's orientation will be printed in portrait.
         <div class="PageBreak"> </div> 

        <div class="page">
            Page two's orientation will be printed in landscape.
            <table border="1">
                <tr><td>A1</td><td>A2</td><td>A3</td><td>A4</td><td>A5</td></tr>
                <tr><td>B1</td><td>B2</td><td>B3</td><td>B4</td><td>B5</td></tr>
            </table>
        </div>
         <div class="PageBreak"> </div> 

        Page three's orientation will be printed in portrait.
    </body>
</html>

方案二：替换页面

上面的方法只是模拟，而不能等同于真正的"文件"-->"打印"中设置的横打，而且只能在IE中使用，接下来的方法是通过DHTML4和JS1.2 （IE4以上支持）来实现替换打印，也就是说预先做好另一个专门用来打印的页面B，在打印页面A时，实则打印页面B（甚至可以是B.doc），代码很简单，如下：

这个方案虽然比较麻烦，但应该能够兼容各种浏览器吧

Code
<link rel=alternate media=print href="printversion.doc">

方案三：ActiveX控件

实在不行的话，就使用ActiveX控件吧，由于ActiveX控件安全性、版权、兼容性等原因，我个人不是很喜欢，但一些打印控件，比如ScriptX做的确实非常好，下面有一段ScriptX控制打印的例子：

Code
<script defer>
function SetPrintSettings() {
// -- advanced features
factory.printing.SetMarginMeasure(2) // measure margins in inches
factory.SetPageRange(false, 1, 3) // need pages from 1 to 3
factory.printing.printer = "HP DeskJet 870C"
factory.printing.copies = 2
factory.printing.collate = true
factory.printing.paperSize = "A4"
factory.printing.paperSource = "Manual feed"

// -- basic features
factory.printing.header = "This is MeadCo"
factory.printing.footer = "Advanced Printing by ScriptX"
factory.printing.portrait = false
factory.printing.leftMargin = 1.0
factory.printing.topMargin = 1.0
factory.printing.rightMargin = 1.0
factory.printing.bottomMargin = 1.0
}
</script>

Lance Zhang

weixin_34324081

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
网页的横向打印的三种方案(print your page landscape)

关于网页打印，window.print()提供的功能离远离一般的需求，很多情况下需要编程扩展目前网上有很多关于网页打印的，但大多采用了ActiveX控件或IE内置的一些Object，由于ActiveX的安全性因素，实用性大打折扣关于网页的横向打印，确切的说，使用标准JS或CSS方法是不可行的，然而，我们可以根据需求来考虑以下三种方案方案一：CSS滤镜实现MS为IE浏览器（5.0以上...
复制链接

扫一扫