html和js通过window.print()实现调用浏览器打印带背景图片和生成二维码的文件功能

最新推荐文章于 2024-02-27 11:21:59 发布
最新推荐文章于 2024-02-27 11:21:59 发布
阅读量2k 收藏 3
点赞数
文章标签： html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36323996/article/details/109245354
版权

先上效果图：

打印页面（数据皆为瞎扯）：

打印预览：

打印功能是调用window.print()实现；

二维码生成是使用jquery.qrcode插件实现；

完整页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="assets/cssPrint/bootstrap.min.css">
    <link rel="stylesheet" href="assets/cssPrint/font-awesome.min.css">
    <link rel="stylesheet" href="assets/cssPrint/bootstrap-table.min.css">
    <link rel="stylesheet" href="assets/cssPrint/animate.css">
    <link rel="stylesheet" href="assets/cssPrint/newStyle.css">
</head>
<style type="text/css">
    td {
        text-align: center;
        background: white;
        border: 1px solid #000000;
        color: black;
    }

    @media print {
        .print-padding {
            position: absolute;
            padding: 12% 8% 0 3.1%;
            z-index: 10;
        }
    }

    @page {
        margin-top: 0;
        margin-bottom: 0;
    }

    #print_box {
        position: static;
    }

    #print_box > img {
        position: absolute;
        z-index: 5;
        margin: 15px -40px;
    }

    .table {
        margin-bottom: 5px;
    }

    #qrcode {
        position: absolute;
        margin-top: -127px;
        margin-bottom: 0;
    }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <!--startprint-->
    <div class="ibox-content" id="print_box">
        <img src="assets/img/licensebg.png" class="visible-print-block"/>
        <div class="print-padding">
            <div style="float: contour">
                <div style="margin:0 -15px;text-align: center;">
                    <p style="font-family: 宋体; font-weight: bold; font-size: 21pt;color: black;letter-spacing: 0.2em;margin-bottom: 10px;">窝而窝俱乐部</p>
                    <p style="font-family: 宋体;font-weight: bold;font-size: 36pt;color: black;"> 通 行 证</p>
                </div>
            </div>
            <div class="row u3-container" style="margin-bottom: 10px;">
                <div class="col-md-6 col-sm-6 col-xs-6 text-center" style="font-weight: bold;color: black;">许可类型：一般通行许可</div>
                <div class="col-md-6 col-sm-6 col-xs-6 text-center" style="font-weight: bold;color: black;">许可证号：<span>ajax1024</span></div>
            </div>
            <div id="qrcode" class="pull-left">
            </div>
            <div id="contentDiv">
                <table class="table">
                    <tr>
                        <td colspan="2" style="border: 1px solid #000000;">验证网址</td>
                        <td colspan="6" style="border: 1px solid #000000;">https://blog.csdn.net/weixin_36323996/article/details/103480268</td>
                    </tr>
                    <tr>
                        <td colspan="2" style="border: 1px solid #000000;">有效范围</td>
                        <td colspan="6" style="border: 1px solid #000000;">窝而窝俱乐部</td>
                    </tr>
                    <tr>
                        <td colspan="2" style="width: 25%;">通行时间</td>
                        <td colspan="2" style="width: 25%;">2020年10月22日至2020年10月31日</td>
                        <td colspan="2" style="width: 25%;">通行次数</td>
                        <td colspan="2" style="width: 25%;">一次</td>
                    </tr>
                    <tr>
                        <td colspan="2">承运单位</td>
                        <td colspan="6">窝而窝俱乐部</td>
                    </tr>
                    <tr>
                        <td colspan="2">汽车型号</td>
                        <td colspan="2">XC60</td>
                        <td colspan="2">汽车车牌</td>
                        <td colspan="2">窝Ajax1024</td>
                    </tr>
                    <tr>
                        <td colspan="2">车身颜色</td>
                        <td colspan="2">耀目沙金属</td>
                        <td colspan="2">内饰颜色</td>
                        <td colspan="2">米色</td>
                    </tr>
                    <tr>
                        <td colspan="2" style="border: 1px solid #000000;">通行线路</td>
                        <td colspan="6" style="border: 1px solid #000000;">318川藏线、青藏线、滇藏线、丝绸之路河西走廊线、甘南川西线、青海环线、新疆南疆线、四川线、西藏山南线、云贵线。
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" style="border: 1px solid #000000;">备 注</td>
                        <td colspan="6" style="border: 1px solid #000000;"></td>
                    </tr>
                    <tr>
                        <td rowspan="2" colspan="2">发证单位</td>
                        <td colspan="2">窝而窝俱乐部</td>
                        <td>签 发 人</td>
                        <td colspan="3">窝而窝俱乐部</td>
                    </tr>
                    <tr>
                        <td rowspan="1" colspan="2" style="text-align: right;border-top: none;">（签章）</td>
                        <td>发证时间</td>
                        <td colspan="3">2020年09月27日 11时42分</td>
                    </tr>
                    <tr>
                        <td colspan="2" style="border: 1px solid #000000;">注意事项</td>
                        <td colspan="6" style="border: 1px solid #000000;text-align: left;">
                            <p style="margin-bottom: 2px;">1.申请人必须服从管理人员的检查、鉴定、指挥；</p>
                            <p style="margin-bottom: 2px;">2.必须按照本证规定的时间、路线行驶，不得擅自变更；</p>
                            <p style="margin-bottom: 2px;">3.该证不得涂改、伪造、租借、转让，过期无效，违者按有关规定处理；</p>
                            <p style="margin-bottom: 2px;">4.申请人可在网络自行打印本证；</p>
                            <p>5.扫描本证左上角二维码或登录验证网址输入许可证号实现验证。</p>
                        </td>
                    </tr>
                </table>
                <div class="row">
                    <div class="col-md-12">
                        <div class="pull-left u3-container" style="font-size:12pt;">窝而窝俱乐部监制</div>
                        <div class="pull-right u3-container" style="font-size:12pt;">打印日期：<span id="printTime">2020年09月27日 11时42分</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--endprint-->
    <div class="container hidden-print" style="margin-bottom: 15px;padding-right: 0;text-align: right;">
        <input id="protocolCheck" name="checkbox1" type="checkbox" style="vertical-align:top;cursor:pointer;"><span> 我已仔细阅读并接受<a target="_blank"><ins>《免责声明》</ins></a></span>
        <button id="printBtn" type="button" disabled="disabled" class="btn btn-success btn-xs col-md-offset-1">
            <i class="fa fa-print" aria-hidden="true"></i> 打印
        </button>
    </div>
</div>
<!-- /footer -->
<!-- Scripts -->
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.qrcode.min.js"></script>
<!-- /Scripts -->
<script>
    //打印通行证
    $("#printBtn").click(function () {
        window.print();
    });

    // 免责声明多选框的点击事件
    $("#protocolCheck").click(function () {
        var checked = $(this).prop("checked");
        if (checked) {
            $("#printBtn").removeAttr("disabled");
            $("#saveEnclosure").removeAttr("disabled");
        } else {
            $("#printBtn").attr("disabled", "disabled");
            $("#saveEnclosure").attr("disabled", "disabled");
        }
    });

    //中文编码格式转换
    function utf16to8(str) {
        var out, i, len, c;
        out = "";
        len = str.length;
        for (i = 0; i < len; i++) {
            c = str.charCodeAt(i);
            if ((c >= 0x0001) && (c <= 0x007F)) {
                out += str.charAt(i);
            } else if (c > 0x07FF) {
                out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
            } else {
                out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
            }
        }
        return out;
    }

    //生成二维码
    $("#qrcode").qrcode({
        //render: "table",  渲染方式有table方式（IE兼容）和canvas方式
        width: 100, //宽度
        height: 100, //高度
        text: utf16to8("ajax1024"), //内容
        typeNumber: -1,//计算模式
        correctLevel: 1,//二维码纠错级别
        background: "#ffffff",//背景颜色
        foreground: "#000000"  //二维码颜色

    });
</script>
</body>
</html>

demo已在csdn上传，下载地址：

https://download.csdn.net/download/weixin_36323996/13026257

Go_Zzz
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js window.print() 打印图片,图片有时候不显示
张宇的博客
11-01 1万+
window.print() 打印网络资源图片不显示 解决方法 等待网络资源图片加载完成后，在打印 $(doc).find('.qrcode-down').load(function () { iframe.contentWindow.print(); window.location.reload() }) 引用地址 ...
打印功能（JS 调用浏览器）
热门推荐
scdncby的博客
08-29 2万+
1.调用浏览器，完成打印功能（IE，Google都支持【当前时间截点】） 打印当前页面，可以运用css做排版处理，隐藏一些不需要出现的东西   /*打印   */ function printDiv(value) {               window.print(); } html 类属性 class=“Noprn”  隐藏不想打印的内容  @media print 打印cs...
vue3实现浏览器打印（条形码、二维码）
最新发布
weixin_64386986的博客
02-27 660
如果需要打印条形码， 可以使用vue3-barcode插件，但是这个插件不支持同时打印多个，最后一个总会覆盖前面的，如果只是单独打印一个条形码是完全可行性的， 如果需要循环、批量打印的话，建议使用js插件jsBarcode。如果你需要更高级的打印功能，比如打印预览、自定义打印模板等，你可能需要集成第三方库或API，以print-js为例。这个方法接受两个参数：第一个参数是要打印的 HTML 元素的 ID，第二个参数是一个选项对象，用于自定义打印设置。你还可以自定义打印设置。
js window.print实现打印特定控件或内容
10-26
window.print可以打印网页，但有时候我们只希望打印特定控件或内容，怎么办呢？可以把要打印的内容放在div中，然后用下面的代码进行打印，希望对大家有所帮助
javascript实现window.print()去除页眉页脚
10-24
主要介绍了javascript实现window.print()去除页眉页脚的方法以及各参数的设置技巧,需要的朋友可以参考下
window.print打印指定div实例代码
09-04
window.print可以打印网页，但有时候我们只希望打印特定控件或内容，怎么办呢，请看下面的例子
JS打印指定区域内容
潜伏在伤口的专栏
03-10 799
原文function preview(oper) { if (oper < 10) { bdhtml = window.document.body.innerHTML;//获取当前页的html代码 sprnstr = "<!--startprint"+oper+"-->";//设置打印开始区域 eprnstr = "<!--endprint
js实现浏览器调起打印机并且只打印规定内容
weixin_45791806的博客
08-25 1087
【代码】js实现浏览器调起打印机并且只打印规定内容。
js打印window.print()图片打印
D.spring
12-15 2万+
1. 这里用的是A4纸，设置打印表格属性（width:100%,height:980px） 2.由于打印可能存在多页，所以heightt属性必须严格控制。 3.由于自己是先隐藏不需要打印的DIV，然后显示需要打印的DIV。当需要打印的DIV存在图片等资源导致加载较慢时。window.print又是异步的，所以存在图片没加载完就打印的情况。 解决方案：判断图片是否加载完成，加载完成在调用打印。
原生JS打印插件之jQuery.EasyPrint.js使用文档
07-21
原生JS打印插件之jQuery.EasyPrint.js使用文档 调用浏览器自带打印功能，使用JavaScript的 window.print(); 方法。 使用JS实现打印功能；JavaScript 实现打印操作；javascript打印大全；通用；js实现打印的方式；JS怎么实现页面打印呢？JavaScript 实现打印,打印预览,打印设置；JS打印和报表输出；原生js打印插件Print.js；js控制分页打印、打印分页示例；js 打印插件；js使用window.print()实现打印功能；代码仅5kb； 自主研发的一个轻量级超简单的js打印插件。
前端js浏览器打印
秋来九月八
03-14 1529
window.print()是调用浏览器打印的方法。但默认是打印window当前所在页的整个页面，那有没有办法，只打印某一块区域，或者说，只打印某一个Dom元素内的元素呢。 function BrowserPrint （Dom）{ window.document.body.innerHTML = Dom.innerHTML; window.print(); // 打印完成以后一定要重新刷新页面，因为window被要打印的Dom取代了 window.location.reload(
使用CSS设置Chrome打印背景色
weixin_30337157的博客
03-27 727
以下内容适用于Chrome浏览器 打印背景色可以通过在打印预览页面勾选背景图形实现 如果需要在用户不勾选的情况下依然能够打印背景色，可以通过css实现，如，table隔行设置背景色： 1 .data-table tr:nth-child(2n + 1) > td { 2 background: #f2f2f2; 3 -webkit-print-color-adjus...
js 调用浏览器打印
heqinghua217的博客
10-12 1507
本文转自：http://blog.csdn.net/hu_shengyang/article/details/6437698 方法一：     首先想问的是Java打印机制?有这东东吗？     直接把这个(window.print();)复制到js中,就能打印出当前页面中的内容。 [javascript] view plain 
js调用浏览器打印事件Print【vue中使用】
weixin_43023873的博客
09-16 4970
1.常见的打印方法jsPrint（） 2.打印浏览器局部页面 3.上代码 PrintClick() { // window.print();//打印全部 var oldHtml = document.body.innerHTML;//将body内容先行存储 var printbox = document.getElementById("FullOr...
css实现window.print() 带背景图打印
肖毕的专栏
10-28 1163
@media print { body{ -webkit-print-color-adjust:exact; -moz-print-color-adjust:exact; -ms-print-color-adjust:exact; print-color-adjust:exact; } } ...
js的window.print()打印背景图片，打印背景图片无法显示
张宇的博客
11-01 9566
js的window，print()打印背景图片 题目描述 js的window，print()打印背景图片给body加了图片地址之后，非要设置浏览器打印选项里面设置背景图形打印才行，怎么通过js去设置默认的就是打印带背景图像的 方法一 ：css //打印机媒体查询 @media print { body{ -webkit-print-color-adjust:exact; ...
window.print() 前端页面打印与预览PDF
weixin_43865196的博客
08-31 1万+
window.print()打印是浏览器自带的打印，实现原理是将html转换为pdf可以在线预览打印或者导出pdf，在任何网页上可通过Ctil+p快捷键调出浏览器打印程序，它可将整个网页打印出来，在我们开发中，其实并不需要将所有页面打印出来，或者只需要局部的页面做打印，那我我们就自己实现window.print（）打印功能。 浏览器自带的打印窗口（页眉页脚属于自带的，我们无法去掉，但是可以通过css将边距调小，将其覆盖掉） 打印常见的功能与问题处理 打印的功能以及布局全由css控制，在加上一些程序处理的业
获取window.print()打印二维码图片并判断是否打印还是取消打印
05-16
要实现获取二维码图片并打印，可以按照以下步骤： 1. 使用 JavaScript 将二维码图片转换为 base64 编码的字符串。可以使用一个第三方库如 `qrcode.js` 来生成二维码图片并将其转换为 base64 编码。 2. 调用 `window.print()` 方法打印页面，其中二维码图片作为一个 `<img>` 元素插入到页面中。 3. 监听 `window` 对象的 `beforeprint` 和 `afterprint` 事件，以便在打印前和打印后执行相应的操作。 4. 在 `beforeprint` 事件中，可以弹出一个确认框，让用户确认是否要打印二维码图片。如果用户选择取消打印，则可以使用 `event.preventDefault()` 方法取消打印操作。 下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>Print QR Code</title> </head> <body> <h1>Print QR Code</h1> <div id="qrcode"></div> <button id="print-btn">Print</button> <script src="https://cdn.staticfile.org/qrcode-generator/1.4.4/qrcode.min.js"></script> <script> // 生成二维码图片并转换为 base64 编码 var qrcode = new QRCode(document.getElementById("qrcode"), { width: 200, height: 200 }); qrcode.makeCode("https://www.example.com"); var qrimg = document.getElementById("qrcode").getElementsByTagName("img")[0]; var qrdata = qrimg.src.split(",")[1]; // 监听打印事件 window.addEventListener("beforeprint", function(event) { // 弹出确认框，让用户确认是否要打印二维码图片 if (!confirm("Do you want to print the QR code?")) { // 取消打印操作 event.preventDefault(); } }); window.addEventListener("afterprint", function(event) { // 打印完成后的操作 alert("Printing completed."); }); // 绑定打印按钮的点击事件 document.getElementById("print-btn").addEventListener("click", function() { // 插入二维码图片 var img = document.createElement("img"); img.src = "data:image/png;base64," + qrdata; document.body.appendChild(img); // 打印页面 window.print(); }); </script> </body> </html> ``` 在上面的示例中，当用户点击“Print”按钮时，会将二维码图片插入到页面中，并且调用 `window.print()` 方法打印页面。在打印前会弹出一个确认框，让用户确认是否要打印二维码图片。如果用户选择取消打印，则会取消打印操作。在打印完成后，会弹出一个提示框提示打印已完成。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值