打印二维码和图片pdf

简介: 打印二维码和图片pdf
学习过程中将笔记整理跟大家分享,希望对大家也有所帮助,共同成长进步💪~\
如果大家喜欢,可以点赞或留言💕 ~~,谢谢大家⭐️⭐️⭐️~

html部分

<img class="imgs" src="../../img/qrcode.png" />
<div id="wimage">

</div>
<div id="qrcodeTable"></div>
<p class="aqw">Render in table</p>
<!--<div id="dayin">打印</div>-->
<input type="button" value="打印本页" onclick="printpage()" />

js部分

$("#wimage").qrcode({
        render: "canvas", //默认,可以不写
        width: 100, //宽度
        height: 100, //高度
        text: "630null20220", //任意内容
        colorDark: "#000000",
        colorLight: "#ffffff",
});
//无法打印的解决办法
//var canvas = $('#wimage canvas');
//var img = canvas[0].toDataURL("image/png");
//$('#wimage').html("<img src='" + img + "'>");
//var str="Visit Runoob!"; 
//console.log(string.search(si))
function printpage() {
        window.print()
}

var beforePrint = function() {   //打印前
        console.log('1111');
};
var afterPrint = function() {   //打印完成后
        console.log('22222');

};
//if(window.matchMedia) {
//    var mediaQueryList = window.matchMedia('print');
//    mediaQueryList.addListener(function(mql) {
//        if(mql.matches) {
//            beforePrint();
//        } else {
//            afterPrint();
//        }
//    });
//}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;

完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        .aqw {
            background-image: url(../../img/qrcode.png);
            /*background: red;*/
        }
        .imgs {
            width: 100px;
            height: 80px;    
        }
    </style>
    <body>
        <img class="imgs" src="../../img/qrcode.png" />
        <div id="wimage">
        </div>
        <div id="qrcodeTable"></div>
        <p class="aqw">Render in table</p>
        <!--<div id="dayin">打印</div>-->
        <input type="button" value="打印本页" onclick="printpage()" />
        <script type="text/javascript" charset="utf-8" src="plug-in/qrcode/jquery.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="plug-in/qrcode/qrcode.min.js"></script>
        <script src="https://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="https://wow.techbrood.com/libs/jquery/jquery.qrcode.js"></script>
        <script type="text/javascript" src="https://wow.techbrood.com/libs/jquery/qrcode.js"></script>
        <script>
            
            $("#wimage").qrcode({
                render: "canvas", //默认,可以不写
                width: 100, //宽度
                height: 100, //高度
                text: "630null20220", //任意内容
                colorDark: "#000000",
                colorLight: "#ffffff",
            });
            ////无法打印的解决办法
            //var canvas = $('#wimage canvas');
            //var img = canvas[0].toDataURL("image/png");
            //$('#wimage').html("<img src='" + img + "'>");
            //var str="Visit Runoob!"; 
            //console.log(string.search(si))
            function printpage() {
                window.print()
            }
            var beforePrint = function() {   //打印前
                console.log('1111');
            };
            var afterPrint = function() {   //打印完成后
                console.log('22222');
            };
//            if(window.matchMedia) {
//                var mediaQueryList = window.matchMedia('print');
//                mediaQueryList.addListener(function(mql) {
//                    if(mql.matches) {
//                        beforePrint();
//                    } else {
//                        afterPrint();
//                    }
//                });
//            }
            window.onbeforeprint = beforePrint;
            window.onafterprint = afterPrint;
        </script>
    </body>

</html>

效果图:

image.png

image.png

我这里只是简单的写了一下demo,大家可以根据自己的需求更改哦,我这里的样式很丑请见谅~ ~ 我之前做的需求是打印卡片,卡片上有二维码和文字等信息,仅此参考。
目录
相关文章
|
4月前
|
XML 缓存 JSON
为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载
为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载
276 0
|
3月前
|
Python
Python办公自动化:提取pdf文件中的图片
Python办公自动化:提取pdf文件中的图片
26 0
|
4月前
|
数据安全/隐私保护 Python Windows
三种方法,Python轻松提取PDF中全部图片
三种方法,Python轻松提取PDF中全部图片
|
4月前
|
Python
Python——批量将PDF文件转为图片
Python——批量将PDF文件转为图片
40 2
|
4月前
|
Java
JAVA PDF 截取N页,生成新文件,转图片,多个PDF 合并
JAVA PDF 截取N页,生成新文件,转图片,多个PDF 合并
90 0
|
4月前
|
Python
[python]将多张图片合并为单个pdf文件
[python]将多张图片合并为单个pdf文件
|
6月前
|
文字识别 开发工具 数据安全/隐私保护
印刷文字识别产品使用合集之可以识别一张电子发票有多页(多张图片,或者一个PDF文件)的这种发票吗
印刷文字识别产品,通常称为OCR(Optical Character Recognition)技术,是一种将图像中的印刷或手写文字转换为机器编码文本的过程。这项技术广泛应用于多个行业和场景中,显著提升文档处理、信息提取和数据录入的效率。以下是印刷文字识别产品的一些典型使用合集。
|
6月前
|
编解码 文字识别
印刷文字识别操作报错合集之在尝试将PDF文件转换为图片时出现了问题,具体的错误代码是415,该怎么处理
在使用印刷文字识别(OCR)服务时,可能会遇到各种错误。例如:1.Java异常、2.配置文件错误、3.服务未开通、4.HTTP错误码、5.权限问题(403 Forbidden)、6.调用拒绝(Refused)、7.智能纠错问题、8.图片质量或格式问题,以下是一些常见错误及其可能的原因和解决方案的合集。
|
7月前
|
文字识别 测试技术 数据安全/隐私保护
案例:批量区域识别内容重命名,批量识别扫描PDF区域内容识别重命名,批量识别图片区域内容重命名图片修改图片名字,批量识别图片区域文字并重命名,批量图片部分识别内容重命文件,PDF区域内容提取重命名
该内容介绍了如何使用区域识别重命名软件高效整理图片,例如将图片按时间及内容重命名,适用于简历、单据等识别。文中提供了软件下载链接(百度云盘和腾讯网盘),并列出软件使用的几个关键条件,包括文字清晰、文件名长度限制等。示例展示了银行单据和公司工作单据的识别情况。文章还提及OCR技术在图片文字识别中的应用,强调了识别率、误识率和用户友好性等评估指标。如有类似需求,读者可留言或下载软件测试,并提供图片以获取定制的识别方案。
336 2
|
7月前
分享:批量多目录图片如何转换PDF,一次性转换多级目录批量的PDF的转换,合并,输出另存等问题,图片转PDF文件,批量图片转PDF文件,多级目录的图片转PDF文件,并且保存到不同的地方,全部搞定
本文介绍了如何高效地将图片转换为PDF,包括单张、多张及多级目录下的图片转换和合并。提供了软件下载链接(百度网盘、腾讯云盘),软件操作简便,支持保存原目录或自定义新目录。转换选项包括单个文件、多个文件夹单独转换以及合并转换。用户可通过双击路径访问源图片和转换结果。该工具特别解决了多级目录图片批量转换的难题,实现保存地址的自由设定,满足不同业务需求。
420 0