这里记录下js调用打印和textarea设置无边框定宽可拉长的方法，直接在例子中体现。先上点击打印后的效果图：
这里有两个textarea，都是无边框和可上下拉动的，这部分比较简单，可以在css中设置好：
<style>
textarea {
outline: 0 none; //无边框
border:none; //无边框
display: block;
overflow: hidden;
width: 100%;
min-width: 100%;
max-width:100%;
min-height: 28px; //最小高度，字体设置为了14px，这里是两行左右的高度
font-size: 14px;
font: 14px/0.2; //0.2表示的是行距
line-height: 18px; //行高
padding:2px;
resize: vertical; //表示可以上下拉伸不可左右拉动
}
</style>首页效果图，一个按钮和一个嵌入的iframe，要打印的地方为iframe里的：
接下来上例子的代码，关于怎么配置springboot和Maven项目自己的可以去网上搜，项目例子如下：
1.Controller映射和NewFile.html显示一个按钮和一个iframe
@Controller
public class UrlMappingController {
protected final static Logger logger = LoggerFactory.getLogger(UrlMappingController.class);
@GetMapping("/index")
public String index() {
return "/modelhtml/NewFile";
}
@GetMapping("/testPrint-native")
public String testPrintNative() {
return "/modelhtml/purchase-and-sale-contract";
}
}<body>
<div style = "margin-top: 50px; margin-left: 50px; margin-buttom:20px">
<br></br>
<input id = "button5" type="button" value="点击测试打印" onClick = "testPrintLL()"></input>
<br></br>
<iframe id ="testIframe" style="text-align:center;margin-left: 10px;margin-top:10px"
src = "/testPrint-native" width='1000' height='800'></iframe>
</div>
</body>
<script type="text/javascript">
function testPrintLL(){
var htDoc = document.getElementById('testIframe').contentWindow.document;
var c = htDoc.documentElement.outerHTML;
var printer = document.getElementById("testIframe").contentWindow;
printer.document.body.innerHTML = c;
printer.print();
}
</script>
2.purchase-and-sale-contract.html
<html>
<head>
<meta charset="UTF-8"/>
<style>
p { text-indent:2em; }
font-test { color:#F00; }
.div-contract { height: 80px;}
.div-content { }
.inpt{ border:none;border-bottom:1px solid #999;}
.inpt-red { border:none; border-bottom:1px solid #F00}
.noborder { border:none; }
.bold { font-weight:bold }
textarea {
outline: 0 none;
border:none;
display: block;
overflow: hidden;
width: 100%;
min-width: 100%;
max-width:100%;
min-height: 28px;
font-size: 14px;
font: 14px/0.2;
line-height: 18px;
padding:2px;
resize: vertical;
}
</style>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id = "test-div">
<h1 align="center">
<input type="text" id ="htname" name="test" class="inpt"/><span class = "bold"><font color="#FF0000">测试</font></span>
</h1>
<div class = "div-contract" style = "margin-right: 20px; margin-left: 20px;">
<table class = "noborder" align="right">
<tr >
<td class = "bold" align="left">测试编号：<input type="text" name="contractCode" class="inpt"/></td>
</tr>
</table>
</div>
<div class = "div-content1" style = "margin-right: 20px; margin-left: 20px;">
<span class = "bold">第一条、测试内容</span>
<br></br>
<p>
1、测试名称：<input type="text" id="CGMC_if" class="inpt al-left"/>（全称）
</p>
<p>
2、测试地点：<input type="text" id="GCDD_if" class="inpt al-left"/>
</p>
<p>
3、测试期：从<input type="text" id="GHQKS_if" class="inpt"/>至<input type="text" id="GHQZ_if" class="inpt"/>止。
</p>
<br></br>
<span class = "bold">第二条、测试约定：</span><br></br>
<textarea id = "textarea_id1"></textarea>
</div>
<table border="1" cellpadding="1" cellspacing="0" bordercolor = "#333333" style="width:100%">
<tr >
<td class = "bold" align="center">测试名称</td>
<td class = "bold" align="center" >测试规格型号</td>
<td class = "bold" align="center">测试品牌</td>
</tr>
<tr>
<td><input type="text" class = "noborder" value = "测试"/></td>
<td><input type="text" class = "noborder" value = "测试"/></td>
<td><input type="text" class = "noborder" value = "测试"/></td>
</tr>
<tr>
<td><input type="text" class = "noborder" value = "测试"/></td>
<td><input type="text" class = "noborder" value = "测试"/></td>
<td><input type="text" class = "noborder" value = "测试"/></td>
</tr>
<tr>
<td><input type="text" class = "noborder" value = "测试"/></td>
<td><input type="text" class = "noborder" value = "测试"/></td>
<td><input type="text" class = "noborder" value = "测试"/></td>
</tr>
<tr>
<td><input type="text" class = "noborder" value = "测试"/></td>
<td><input type="text" class = "noborder" value = "测试"/></td>
<td><input type="text" class = "noborder" value = "测试"/></td>
</tr>
<tr>
<td><input type="text" class = "noborder" value = "测试"/></td>
<td><input type="text" class = "noborder" value = "测试"/></td>
<td><input type="text" class = "noborder" value = "测试"/></td>
</tr>
<tr>
<td><input type="text" class = "noborder" value = "测试"/></td>
<td><input type="text" class = "noborder" value = "测试"/></td>
<td><input type="text" class = "noborder" value = "测试"/></td>
</tr>
<tr>
<td colspan="5" align="left" >
<textarea id = "textarea_id2" style ="width:99%">
</textarea>
</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
$(function(){
setListener();
var textareaId1 = document.getElementById("textarea_id1");
var textareaId2 = document.getElementById("textarea_id2");
var string = "免职就是上级组织直接解除领导职务，如同炒鱿鱼；责令辞职就是任免机关认定其已不再适合担任现职，通过一定程序责令其辞去现任领导职务；引咎辞职则是主动辞去领导职务、自我追究过失责任的一种形式，但如果要求其引咎辞职却不答应的话，也一样可以责令其辞职。用形象一点的说法，三者分别类似强制下岗、通知下岗和劝其主动下岗。其中，前两者为被动接受组织处理，而引咎辞职则是督促其主动承担责任的行为。/n";
textareaId1.innerHTML = string+string;
textareaId2.innerHTML = string+string+string+string;
});
function setListener(){
var textElement1 = document.getElementById("textarea_id1");
var textElement2 = document.getElementById("textarea_id2");
if(document.all){
textElement1.onpropertychange=function(){
//操作
}
textElement2.onpropertychange=function(){
//操作
}
}else{
textElement1.oninput=function(){
//操作
}
textElement2.oninput=function(){
//操作
}
}
$("input[type='text']").on("change",function(){
var defaultLength = $(this).offsetWidth;
var length = $(this).val().length*16+10+"px";
$(this)[0].style.width=length;
console.log("input监听测试");
});
}
</script>
</html>这里还设置了input框和textarea的变动监听，监听具体做什么操作可以自己定义了，不需要的可以忽略。
