调用浏览器打印预览以及textarea文本框显示（springboot+maven）

最新推荐文章于 2024-02-13 19:10:23 发布

星旅zl

最新推荐文章于 2024-02-13 19:10:23 发布

阅读量2k

点赞数

分类专栏： web开发

本文链接：https://blog.csdn.net/nzzl54/article/details/81773237

版权

本文介绍了如何使用JavaScript调用浏览器打印功能，并展示了在SpringBoot+Maven项目中设置textarea无边框且可拉长的CSS方法。通过示例代码展示Controller的映射以及包含iframe的HTML页面，同时提及对input和textarea的事件监听配置。

摘要由CSDN通过智能技术生成

这里记录下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 i