html 页面实现打印（jqprint）

最新推荐文章于 2024-05-17 07:46:48 发布

stong_xd

最新推荐文章于 2024-05-17 07:46:48 发布

阅读量8.6k

点赞数 1

分类专栏： jquery 文章标签： jquery打印

本文链接：https://blog.csdn.net/qq_20783251/article/details/72782176

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

很不错的轻量打印 js 库
jQprint.
下载地址：http://download.csdn.net/detail/qq_20783251/9854331
演示地址：http://sc.chinaz.com/jiaobendemo.aspx?downloadid=1432201700153

使用的一些问题：
出现Cannot read property ‘opera’ of undefined错误问题是juqery版本兼容问题
解决方法：加入迁移辅助插件jquery-migrate-1.0.0.js可解决版本问题
(上面的下载中包含这些文件)

<script src="js/jquery/jquery-migrate-1.2.1.min.js"></script>

实际上是打印页面中的某个 html 下的所有元素。所以打印的时候需要把这个元素调整到打印的大小
如果是打印 A4 可以设置打印元素（最外层）widht:210mm;height:297mm这样就刚好是A4大小。
（元素的非行内样式会忽略。打印的时候自带行内样式）
那么如何支持 css 连接

<link media="print" rel="stylesheet" type="text/css" href="XXX.css">

使用过程：
引用jquery和，jqprint到您的页面

<script language="javascript" src="jquery-1.4.4.min.js"></script>
<script language="javascript" src="jquery.jqprint-0.3.js"></script>

调用方方法：

<script language="javascript">
function  a(){
        $("#ddd").jqprint();
    }
</script>

页面：

<div id="ddd">
    <table>
        <tr>
            <td>test</td>
            <td>test</td>
            <td>test</td>
            <td>test</td>
            <td>test</td>
        </tr>
    </table>
</div>

<input type="button" onclick=" a()" value="打印"/>

具体一点的参数：

$("#printContainer").jqprint({
//如果是true则可以显示iframe查看效果（iframe默认高和宽都很小，可以再源码中调大），默认是false
     debug: false, 
      //true表示引进原来的页面的css，默认是true。（如果是true，先会找$("link[media=print]")，若没有会去找$("link")中的css文件）
     importCSS: true,
      //表示如果原来选择的对象必须被纳入打印（注意：设置为false可能会打破你的CSS规则）。
     printContainer: true,
     //表示如果插件也必须支持歌opera浏览器，在这种情况下，它提供了建立一个临时的打印选项卡。默认是true
     operaSupport: true
});