js print方法自定义打印

最新推荐文章于 2025-03-13 11:45:54 发布

五只小狗

最新推荐文章于 2025-03-13 11:45:54 发布

阅读量5.1k

点赞数 2

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_43898141/article/details/110447603

版权

js 专栏收录该内容

11 篇文章

订阅专栏

<!DOCTYPE html>
<html charset="utf8">
<head> 
</head>
<body>
<!--stylestart
 style样式
 打印的时候左下角文件有时会出现url地址添加下面的css就不会出现： @page { margin: 0; }
 
  
styleend-->
<!--startprint-4-->
<span>需要打印的代码</span>
<!--endprint-4-->
<iframe id="iframe" style="display: none;width: 100%;"></iframe>
</body>
</html>
 /*文件打印*/
        function jsprint(){
           //获取当前页的html代码 body中所有代码
           var bodyhtml = window.document.body.innerHTML;
           /*获取css样式 也就是通过拆分把css取出来*/
           var styleHtml = bodyhtml.substring(bodyhtml.indexOf("<!--stylestart")+14,bodyhtml.indexOf("styleend-->"));
           /*打印的代码 和上面的同理*/  
           var printhtml =    printhtml = bodyhtml.substring(bodyhtml.indexOf("<!--startprint-4-->"),bodyhtml.indexOf("<!--endprint-4-->"));
           }
           // 生成并打印ifrme
           var f = document.getElementById('iframe');
           /*写入打印的内容*/
           f.contentDocument.write(printhtml);
           /*写入打印的样式*/
           f.contentDocument.write(styleHtml);
           /*关闭文档流*/
           f.contentDocument.close();
           /*打印*/
           f.contentWindow.print();
       }

第二种方法
使用jq封装插件jqprint
学习地址：传送阵
下面是官网的介绍，我照搬的。
2017-2-17更新（修改jQuery官方提供迁移辅助插件jquery-migrate-1.0.0.js失效地址）

请注意!很多朋友遇到 Cannot read property ‘opera’ of undefined错误问题是juqery版本兼容问题。
解决方法：加入迁移辅助插件jquery-migrate-1.0.0.js可解决版本问题

<script src="http://www.jq22.com/jquery/jquery-migrate-1.2.1.min.js"></script>

实现方法
引用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>

html

<div id="ddd">
    <table>
        <tr>
            <td>test</td>
            <td>test</td>
            <td>test</td>
            <td>test</td>
            <td>test</td>
        </tr>
    </table>
</div>
1
<input type="button" onclick=" a()" value="打印"/>

(网友：面具的惊奇编辑) 可以设置一个模版打印，只抽取页面上的几个数据，填入模版，进行打印

相关参数

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

我之前写的改成这样就可以了

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