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

最新推荐文章于 2022-12-10 21:52:33 发布
VIP文章 最新推荐文章于 2022-12-10 21:52:33 发布
阅读量2k 收藏 2
点赞数
分类专栏： web开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nzzl54/article/details/81773237
版权

这里记录下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 = 
最低0.47元/天 解锁文章
星旅zl
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
彻底解决IE9 文本框无法输入文字,IE窗口闪烁问题(亲测)
我为编程狂,我为外语狂
01-10 1万+
问题描述： 1、网页文本框无法输入文字，点击文本框输入总是跳到地址栏那去输入。 2、鼠标滚珠无法实现网页上下滚动，只能单击右边条拖拽。 3、单击网页页面整个IE窗口都在闪烁。 曾经试过重置IE9，重装IE9，各种IE修复工具……都不行。。。 曾尝试此解决方法： 1、进C盘IE9安装文件夹，右键点击iexplore.exe，创建桌面快捷方式 2、右键点击此快捷方式图标，打
关于textarea打印问题
vuturn的专栏
12-04 4057
遇到的问题    textarea 的高度不能自适应，当文本的内容超出文本框时，会出现滚动条，而且部分内容不能显示    如果textarea文本是只读的情况 解决方法：     js调节文本框的高度     document.addEventListener("DOMContentLoaded",function(){ var elem=document.getEl
利用层实现在Textarea文本框插入图片
05-17
内容索引:ASP源码,其它类别,textarea　　以前在论坛上经常会看到有朋友问如何在文本框Textarea中显示图片，感觉很神秘的技术，其实很简单啊，看一看本例你就明白了。当鼠标点击头像的时候，会把头像插入到文本框中，真正显示图片，而不是插入一个地址，让这种技术不再神秘哦，这是利用层技术实现的。
angularjs使用div模拟textarea文本框的方法
12-29
html： <div class=simulate-textarea ng-model=view.text contenteditable=true placeholder=请输入内容></div> Angularjs指令： /** * div模拟textarea输入框双向数据绑定指令 */ .directive('contenteditable', [function() { return { require: 'ngModel', link: function(scope, element, attrs, ctrl) { //view -> m
html点击展开加载页面,html – Textarea框移动点击初始页面加载
weixin_36382265的博客
05-31 219
我有一个textarea框,在页面加载时初次点击时移动.这很奇怪,似乎有点儿麻烦,我甚至不知道从哪里开始调试.有谁之前经历过这个吗？这是一张图片.白色的盒子立即回到textarea,textarea很好.它仅在初始点击时初始加载.这是我的HTML.textarea {display: block;height: 100px;width: 100%;font-size: 24px;}.contain...
需求实现：实现文本框多行展示时显示“全文”的操作
Always_MyHomeTown的博客
07-24 800
在应用开发的过程中，碰到一个需求就是需要在列表中展示文本时，当文本内容过多时，就需要将文本全文展示，这是考虑到当代码需要写到适配器中，而无法与应用的生命周期控制相关时的措施
textarea 显示纯文本_显示textarea内容
weixin_35826166的博客
01-14 1948
超级简单：在一个TextArea中如何限制行数和字符数在网上，已经有很多关于在一个textbox限制允许的字符数量。但是如果需要，在textbox中如何去统计和限制行数呢。这里有一个解决方案，使用客户端的Javascript去限制TextArea的内容为指定的字符数量和指定的行数(不一定就等于TextArea中可见的行数)。我们能通过...文章技术mix呢2018-01-013621浏览量使用SP...
textarea使用指南
张俊娥
04-12 294
textarea是HTML语言。textarea就是我们在论坛中最常见的发言框。在HTML语言中，textarea、input都是属于“文本域”。textarea的属性、各参数如下： 1、cols，垂直列。在没有做样式表设置的情况下，它表示一行中可容纳下的字节。例如cols=80，表示一行中最多可容纳40个汉字。 2、rows，水平列。表示可显示的行数，例如rows=8，表示可显示8行。超过8行...
js实现html点击文本框，弹出文本框功能
知北行的博客
10-27 9375
实现这样一个功能，当一个文本框获得焦点时，弹出一个更大的文本框方便用户输入，当切换焦点时，弹出的文本框就消失，同时保证两个文本框输入的文本值一致 效果如下图： 直接上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title...
textarea输入框随高度随内容撑开
qq_31182399的博客
07-31 535
方法一（jquery）： $('textarea').each(function () { this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;'); }).on('input', function () { this.style.height = 'auto'; this.style.height = (this.scrollHeight) + 'px'; }); 方法二：
JS给Textarea文本框添加行号的方法
01-19
这里使用JS实现让Textarea文本框显示行号的功能，每一行的前面都会有下数字序号，如果用来显示代码的话，可以直接找到某一行，如果不显示行号，则还要自己手功去查，想要此功能，你只需设置好TextArea ID，并加入...
jQuery实现限制textarea文本框输入字符数量的方法
10-24
主要介绍了jQuery实现限制textarea文本框输入字符数量的方法,涉及jQuery键盘事件及页面元素的相关操作技巧,需要的朋友可以参考下
ie 8在打印网页的时候打印预览是空白的
dengshisha4819的博客
05-11 529
win 7专业版系统中的ie 8在打印网页的时候打印预览是空白的，打印出来也是空白的，但是用别的浏览器打印没有问题 根据您的描述，该问题主要是由于保护模式下%Temp%\Low不正常工作引起的。 建议可以尝试以下操作： 方法一：重置IE浏览器 1.打开工具，选择“Internet选项” 2.选择“高级”，点击“重置” 3.重置完成后，点击关闭，再...
将HTML代码格式化成文本框中输入的文字格式
Mars的专栏
06-15 4484
#region 将HTML代码格式化成文本框中输入的文字格式 /// /// 将HTML代码格式化成文本框中输入的文字格式 /// /// /// public static String ToHtml(string Input) { S
html打印预览导致一些监听事件失效处理
lan_学习分享
08-08 2701
最近在iframe嵌入一个html，html中有一些input框和textarea框需要监听变动事件，没有点击打印之前都是可以正常监听得到的，但是调用打印方法以后就监听不到了，在打印的时候调用了alert方法查看打印的html内容，发现原来的script部分本来是写在&lt;/body&gt;标签后面的，结果变成了&lt;/body&gt;标签之前了，这个问题其实展示的就是打印的时候我们把html...
文本超过指定行数折叠
携手天下
11-18 1217
多行文本超过指定行数隐藏超出部分并显示“...查看全部”是一个常遇到的需求，网上也有人实现过类似的功能，不过还是想自己写写看，于是就写了一个Vue的组件，本文简单介绍一下实现思路。 组件可以通过npm安装使用，需要的同学可以尝试一下： 组件地址：https://github.com/Lushenggang/vue-overflow-ellipsis 在线体验：https://wintc.top/laboratory/#/ellipsis ...
html点击文本,HTML5文本/ textarea的点击文本
weixin_30769455的博客
07-12 555
这里有一种方法可以让textarea的某些内容可点击。 这里我们没有使用textarea。相反，我们使用contentEditable = true的div。然后我们改变div的样式，使它看起来像一个文本区域。 现在用JavaScript可以用锚标签替换DIV中的话..#editableDiv {-moz-appearance: textfield;-webkit-appearance: text...
textarea输入框的内容如何原模原样的展示出来？（适用于一些antd design框架以及element ui框架）
qq_53908907的博客
12-10 1712
保持textarea格式展示
html+css3自定义button样式
热门推荐
lan_学习分享
12-12 3万+
原生的按钮有点丑，为此需要改装一下样式，达到适应页面或者美化的作用。 下面的连接是用input做按钮和button做按钮的区别，有兴趣的可以看看。 https://blog.csdn.net/u010458114/article/details/79371304 先上效果图： html+CSS实现如下： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD X...
springboot+vue实现公告
最新发布
05-19
实现公告的功能需要前端和后端配合完成，在此我提供一种使用Spring Boot和Vue.js实现公告的思路。 1. 后端实现 使用Spring Boot开发后端，需要定义公告的数据模型，如： ```java @Entity @Table(name = "announcement") public class Announcement { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String title; private String content; @Column(name = "create_time") private Date createTime; // getter 和 setter 方法 } ``` 然后，使用Spring Data JPA来访问数据库，定义对应的Repository： ```java public interface AnnouncementRepository extends JpaRepository<Announcement, Long> { List<Announcement> findAllByOrderByCreateTimeDesc(); } ``` 在Controller中，提供查询公告列表和新增公告的接口： ```java @RestController @RequestMapping("/api/announcement") public class AnnouncementController { @Autowired private AnnouncementRepository repository; @GetMapping("/list") public List<Announcement> list() { return repository.findAllByOrderByCreateTimeDesc(); } @PostMapping("/add") public Announcement add(@RequestBody Announcement announcement) { announcement.setCreateTime(new Date()); return repository.save(announcement); } } ``` 2. 前端实现 使用Vue.js开发前端，通过axios库访问后端API，实现公告的展示和添加功能。 在Vue组件中，使用data属性存储公告列表和新增公告的表单数据： ```javascript data() { return { announcements: [], newAnnouncement: { title: '', content: '' } } }, ``` 在created钩子函数中，使用axios库获取公告列表： ```javascript created() { axios.get('/api/announcement/list').then(response => { this.announcements = response.data }) }, ``` 在模板中，使用v-for指令渲染公告列表： ```html <template> <div> <h2>公告列表</h2> <div v-for="announcement in announcements" :key="announcement.id"> <h3>{{ announcement.title }}</h3> <p>{{ announcement.content }}</p> <small>{{ announcement.createTime }}</small> </div> <h2>新增公告</h2> <form @submit.prevent="addAnnouncement"> <div> <label>标题:</label> <input v-model="newAnnouncement.title" type="text" /> </div> <div> <label>内容:</label> <textarea v-model="newAnnouncement.content"></textarea> </div> <button type="submit">提交</button> </form> </div> </template> ``` 在methods属性中，定义addAnnouncement方法，通过axios库向后端API发送POST请求，添加新公告： ```javascript methods: { addAnnouncement() { axios.post('/api/announcement/add', this.newAnnouncement).then(response => { this.announcements.unshift(response.data) this.newAnnouncement.title = '' this.newAnnouncement.content = '' }) } } ``` 以上就是使用Spring Boot和Vue.js实现公告的思路，具体实现细节可以根据实际情况进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值