Jquery、Js實現網頁列印，及列印樣式的自定義
阿新 • • 發佈：2019-01-03
<!DOCTYPE html> <html lang="en" style="height: 100%"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css" media="print"> html{ height: 100%; width: 100%; } </style> </head> <body style="padding: 0;margin: 0;height: 100%;width: 100%;"> <div id="printBody" style="width: 100%;height: 100%;"> </div> <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> var pdata = [ {"id":"productId","top":"95","left":"20"}, {"id":"customer","top":"120","left":"80"}, {"id":"dfadfa","top":"150","left":"50"} ] var infoHtml = ''; for (var i = 0;i<pdata.length;i++){ var top1 = (pdata[i].top/176)*100+'%'; var left = (pdata[i].left/261)*100+'%'; infoHtml += '<span style="display:block;position:absolute;top:'+top1+';left:'+left+';">'+pdata[i].id+'</span>'; } $("#printBody").html(infoHtml); window.print(); </script> </body> </html>