js实现页面部分内容打印功能
2021-02-26 本文已影响0人
Jesse_001
为了实现页面某个部分的div内容打印，并且打印时样式可能需要修改一下，总结如下方法自用。
页面样式设置注意事项
<style type="text/css" media="print">
/**控制打印的横纵向，landscape:横向；portrait:纵向**/
@page{size:portrait;}
</style>
js部分代码
function print () {
var dom = document.getElementById('*****');
var win_print = window.open('','_blank','width='+(window.screen.availWidth)+',height='+(window.screen.availHeight)+',top=0,left=0');
var str = '<!DOCTYPE html>';
str += '<html>';
str += '<head>';
str += '<meta charset="utf-8">';
str += '<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">';
str += '</head>';
str += '<style media="print">'
str += '@page{size:portrait;}';
str += '@media print{body{-webkit-print-color-adjust:exact;-moz-print-color-adjust:exact;-ms-print-color-adjust:exact;print-color-adjust:exact;}}';
str += '</style>';
str += '<body>';
str += dom;
str += '</body></html>';
// 打印
win_print.document.write(str);
win_print.print();
win_print.close();
}
需要修改的样式代码直接拼接到上面的str字符串即可
另：input框，包括输入框，复选、单选框的值再打印时可能显示不出来，单独解决和分析，保证渲染好很重要。angularjs的复选框用ng-check属性可以，别的尚未尝试。
