在打印内容前加入样式即可，网上方面很多，有说写入样式文件的但是我测试直接写入样式文件失败了， 所以在打印处直接加入的CSS样式如：
方案1：
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print Content Example</title>
<!-- <link href="styles.css" media="print" rel="stylesheet" /> -->
<style type="text/css" >
#myp table{border: 1px solid black;}
#myp table td,#myp table th{border: 1px solid black;}
#myp h1{color: red;}
</style>
</head>
<body>
<h2>这里不是打印内容</h2>
<div id="myp">
<h1>这里是表格</h1>
<table>
<thead>
<tr>
<th>姓名</th><th>电话</th><th>邮箱</th><th>地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td><td>18716456666</td><td>930230707@qq.com</td><td>测试地址</td>
</tr>
</tbody>
</table>
</div>
<button onclick="printpage()">打印</button>
<script src="scripts.js"></script>
</body>
</html>JS：
//myp为需要打印的元素ID
function printpage(){
var newstr = document.getElementById('myp').innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = '<style type="text/css" media="print">'+
'@media print {#myp h1{color: red;}#myp table{border: 1px solid black;}#myp table td,#myp table th{border: 1px solid black;}}</style>'+'<div id="myp">'+newstr+'</div>';
window.print();
document.body.innerHTML = oldstr;
return false;
}方案2
直接写在一起：
<!DOCTYPE html>
<html data-theme="skin0">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=no">
<title>条形码</title>
<link rel="stylesheet" type="text/css" href="txm.css" />
</head>
<body>
<h1>打印功能测试</h1>
<button type="button" onclick="doPrint()">打印预览</button>
<!--startprint-->
<div id="test">
<div>
<div>
<div>
<div>1</div>
<div><span>姓名：李先生</span><span>性别：男</span><span>班级：七年级1班</span></div>
<div><span>学校：重庆</span></div>
</div>
<div>
<div>2</div>
<div><span>姓名：李先生</span><span>性别：男</span><span>班级：七年级1班</span></div>
<div><span>学校：重庆</span></div>
</div>
</div>
<div>
<div>
<div>3</div>
<div><span>姓名：李先生</span><span>性别：男</span><span>班级：七年级1班</span></div>
<div><span>学校：重庆</span></div>
</div>
<div>
<div>4</div>
<div><span>姓名：李先生</span><span>性别：男</span><span>班级：七年级1班</span></div>
<div><span>学校：重庆</span></div>
</div>
</div>
<h5 id='nihao'>你好， 这是打印内容</h5>
</div>
</div>
<!--endprint-->
<iframe id="printf" src="" width="0" height="0" frameborder="0"></iframe>
</body>
<script src="jquery-1.9.1.js"></script>
<script>
function doPrint() {
//获取当前页的html代码
var bodyhtml = window.document.body.innerHTML;
//设置打印开始区域、结束区域
var startFlag = "<!--startprint-->";
var endFlag = "<!--endprint-->";
// 要打印的部分
//var printhtml = '<link rel="stylesheet" type="text/css" href="txm.css" />' + bodyhtml.substring(bodyhtml.indexOf(startFlag),
var printhtml = '<style type="text/css" media="print">'+
'@media print {#test{color:red}#nihao{text-align:center;margin-top:25px;color:red;}}</style>' + bodyhtml.substring(bodyhtml.indexOf(startFlag),
bodyhtml.indexOf(endFlag));
console.log(printhtml);
// 生成并打印ifrme
var f = document.getElementById('printf');
f.contentDocument.write(printhtml);
f.contentDocument.close();
f.contentWindow.print();
}
</script>
</html>