提交 c009548d 编写于 作者: 奋斗的小菜菜's avatar 奋斗的小菜菜 🥊

打印

上级 3c2c0bab
......@@ -56,13 +56,27 @@
<option name="number" value="Default" />
<option name="presentableId" value="Default" />
<updated>1620216533091</updated>
<workItem from="1620216548613" duration="610000" />
<workItem from="1620216548613" duration="1219000" />
<workItem from="1620910298994" duration="76000" />
</task>
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
<option name="version" value="1" />
</component>
<component name="Vcs.Log.Tabs.Properties">
<option name="TAB_STATES">
<map>
<entry key="MAIN">
<value>
<State>
<option name="COLUMN_ORDER" />
</State>
</value>
</entry>
</map>
</option>
</component>
<component name="ideajad">
<property name="annotate" value="false" />
<property name="annotateFully" value="false" />
......
(function( $ ){
$.fn.qrcode = function(options) {
// if options is string,
if( typeof options === 'string' ){
options = { text: options };
}
// set default values
// typeNumber < 1 for automatic calculation
options = $.extend( {}, {
render : "canvas",
width : 75,
height : 75,
typeNumber : -1,
correctLevel : QRErrorCorrectLevel.L,
background : "#ffffff",
foreground : "#000000"
}, options);
var createCanvas = function(){
// create the qrcode itself
var qrcode = new QRCode(options.typeNumber, options.correctLevel);
qrcode.addData(options.text);
qrcode.make();
// create canvas element
var canvas = document.createElement('canvas');
canvas.width = options.width;
canvas.height = options.height;
var ctx = canvas.getContext('2d');
// compute tileW/tileH based on options.width/options.height
var tileW = options.width / qrcode.getModuleCount();
var tileH = options.height / qrcode.getModuleCount();
// draw in the canvas
for( var row = 0; row < qrcode.getModuleCount(); row++ ){
for( var col = 0; col < qrcode.getModuleCount(); col++ ){
ctx.fillStyle = qrcode.isDark(row, col) ? options.foreground : options.background;
var w = (Math.ceil((col+1)*tileW) - Math.floor(col*tileW));
var h = (Math.ceil((row+1)*tileW) - Math.floor(row*tileW));
ctx.fillRect(Math.round(col*tileW),Math.round(row*tileH), w, h);
}
}
var image=new Image();
image.src=canvas.toDataURL("image/png");
image.id="qrcode";
// return just built canvas
return image;
}
// from Jon-Carlos Rivera (https://github.com/imbcmdth)
var createTable = function(){
// create the qrcode itself
var qrcode = new QRCode(options.typeNumber, options.correctLevel);
qrcode.addData(options.text);
qrcode.make();
// create table element
var $table = $('<table></table>')
.css("width", options.width+"px")
.css("height", options.height+"px")
.css("border", "0px")
.css("border-collapse", "collapse")
.css('background-color', options.background);
// compute tileS percentage
var tileW = options.width / qrcode.getModuleCount();
var tileH = options.height / qrcode.getModuleCount();
// draw in the table
for(var row = 0; row < qrcode.getModuleCount(); row++ ){
var $row = $('<tr></tr>').css('height', tileH+"px").appendTo($table);
for(var col = 0; col < qrcode.getModuleCount(); col++ ){
$('<td></td>')
.css('width', tileW+"px")
.css('background-color', qrcode.isDark(row, col) ? options.foreground : options.background)
.appendTo($row);
}
}
// return just built canvas
return $table;
}
return this.each(function(){
var element = options.render == "canvas" ? createCanvas() : createTable();
$(element).appendTo(this);
});
};
})( jQuery );
此差异已折叠。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world</title>
</head>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.qrcode.js"></script>
<body>
<!--数据的响应式 -->
<button id="dayin">打印</button>
</body>
<script type="text/javascript">
$("#dayin").click(function() {
alert("======")
var createCanvas = function() {
// create the qrcode itself
var qrcode = new QRCode(options.typeNumber, options.correctLevel);
qrcode.addData(options.text);
qrcode.make();
// create canvas element
var canvas = document.createElement('canvas');
canvas.width = options.width;
canvas.height = options.height;
var ctx = canvas.getContext('2d');
// compute tileW/tileH based on options.width/options.height
var tileW = options.width / qrcode.getModuleCount();
var tileH = options.height / qrcode.getModuleCount();
// draw in the canvas
for (var row = 0; row < qrcode.getModuleCount(); row++) {
for (var col = 0; col < qrcode.getModuleCount(); col++) {
ctx.fillStyle = qrcode.isDark(row, col) ? options.foreground : options.background;
var w = (Math.ceil((col + 1) * tileW) - Math.floor(col * tileW));
var h = (Math.ceil((row + 1) * tileW) - Math.floor(row * tileW));
ctx.fillRect(Math.round(col * tileW), Math.round(row * tileH), w, h);
}
}
var image = new Image();
image.src = canvas.toDataURL("image/png");
image.id = "qrcode";      
return image;
// return canvas
}
})
</script>
</html>
\ No newline at end of file
<html lang="zh-ch">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A sample webpage showing how to print to a Zebra printer via javascript and XMLHttpRequest">
<meta name="author" content="Robin West">
<title>HTTP Post Sample</title>
</head>
<body>
Printer IP Address: <br>
<input type="text" id="ip_addr" style="width:500px"><br><br> Script: <br>
<textarea id="zpl" style="width:500px" rows='20'>^XA^PW400^LL200^FO20,20^A0N,30,30^FDThis is a TEST^FS我是中文^XZ</textarea><br><br>
<button onclick="print(); return false;">Print</button>
<div id="output"></div>
<script>
function print() {
var zpl = document.getElementById("zpl").value;
var ip_addr = document.getElementById("ip_addr").value;
var output = document.getElementById("output");
var url = "http://" + ip_addr + "/pstprnt";
var method = "POST";
var async = true;
var request = new XMLHttpRequest();
request.onload = function() {
var status = request.status; // HTTP response status, e.g., 200 for "200 OK"
var data = request.responseText; // Returned data, e.g., an HTML document.
output.innerHTML = "Status: " + status + "<br>" + data;
}
request.open(method, url, async);
request.setRequestHeader("Content-Length", zpl.length);
// Actually sends the request to the server.
request.send(zpl);
}
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册