首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >从HTML模板打印页面

从HTML模板打印页面
EN

Stack Overflow用户
提问于 2013-08-14 16:38:31
回答 1查看 3.1K关注 0票数 0

我有一个HTML页面,它在顶部显示数据摘要,在底部显示网格。我在顶部有一个按钮,它必须以某种格式打印页面上的信息。为了展示这种特定的格式并使其得到企业的认可,我创建了一个额外的HTML页面,它由div和一个表组成。单击第1页中的打印按钮时,将执行以下代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function print() {   
    $.get('PrintLayout.html', function (data) {
        var $data = $(data);
        $data.find('#field1').text($('#field1').text() + ' (' + $('#field2').text() + ')');
        $data.find('#field3').text($('#field3').text());
        $data.find('#field4').text($('#field4').text());
        $data.find('#field5').text(kendo.toString(field5, 'dd MMMM yyyy'));
        $data.find('#field6').text($('#field6').text());
        $data.find('#grid').append($('#grid').html());
        var html = $('<div>').append($data.clone()).remove().html(),
            width = 1120,
            height = 600,
            left = (screen.width / 2) - (width / 2),
            top = (screen.height / 2) - (height / 2),
            printPage = window.open('', 'Print', 'scrollbars=yes, width=' + width + ', height=' + height + ', left=' + left + ', top=' + top);
        printPage.document.open();
        printPage.document.write(html);
        printPage.document.close();
        printPage.focus();
        printPage.print();
        printPage.close();
        return false;
    });
}

此代码的作用是获取打印布局页面的HTML,并将字段值添加到该页面上的特定元素中。

当我查看弹出窗口和视图源代码的标记时,我注意到甚至没有html或head元素。弹出的窗口包含所有正确位置的所有信息,但在纸上,我的网格标题和列显示不对齐。我知道如果页面的标记被更正,打印输出也会看起来是正确的。

我该如何解决这个问题呢?请注意,PrintLayout.html页面确实有适当的标记,只是$data JQuery不知何故没有提取出来。

我想要的就是获得PrintLayout.html页面的超文本标记语言,将值插入到该页面的占位符中,在弹出窗口中显示结果标记并打印出来。我想我把它复杂化了,但是找不到更简单的方法。

EN

回答 1

Stack Overflow用户

发布于 2013-08-14 16:57:52

我不太确定你的HTML是如何工作的,但一种更简单的方法是在你的CSS中添加一个单独的媒体。然后你只需要你的原始页面,不需要打开弹出窗口和移动数据:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@media print {
   /*Put the way you want to format your page on printing here*/
}

请参阅W3C reference here

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/18237434

复制
相关文章
NodeJS 防止xss攻击 🎨
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第30天,点击查看活动详情
德育处主任
2022/09/09
1.6K0
NodeJS 防止xss攻击 🎨
XSS编码浅析
文章首发于:奇安信攻防社区 https://forum.butian.net/share/831
亿人安全
2022/06/30
4330
XSS编码浅析
XSS编码剖析
作者 0xExploit 0×00 引言 很多不了解html、js编码的童鞋挖掘xss漏洞时,都是一顿乱插,姿势对了,就能获得快感,姿势不对,就么反应。另外在freebuf里,有很多文章介绍过跨站编码,有兴趣的,可以搜索下。 本文介绍常见的编码方法,能力不足,如有其他意见,请指正。 0×01 常用编码 URL编码:一个百分号和该字符的ASCII编码所对应的2位十六进制数字,例如“/”的URL编码为%2F(一般大写,但不强求) HTML实体编码: 命名实体:以&开头,分号结尾的,例如“<”的编码是“&lt;”
FB客服
2018/02/05
1.6K0
XSS编码剖析
怎么防止跨站脚本攻击(XSS)?
跨站脚本攻击(Cross-site scripting,XSS)是攻击者向网站注入恶意脚本,等待用户访问网站并自动运行恶意脚本发起攻击的过程。不同的脚本可以实现不同目的:
Learn-anything.cn
2021/11/24
1.1K0
Dos攻击原理_防止xss攻击方法
Technorati 标签: DoS, 攻击, 网络防御, TCP, SYN_Flood
全栈程序员站长
2022/11/10
1.8K0
Dos攻击原理_防止xss攻击方法
ASP防止XSS跨站脚本攻击
我的ASP的程序,一直以来只注重SQL注入攻击的防御,一直认为XSS跨站没有SQL注入那么严重,直到最近被攻破了,不得已,必须的修补。如何防御XSS跨站脚本攻击,最重要的就是要过滤掉用户输入的风险字符,和SQL注入类似,只是一个针对的是数据库,一个针对的是HTML脚本。
世纪访客
2018/08/02
3.3K0
ASP防止XSS跨站脚本攻击
javascript 防止重复点击
var debounce = function (func, wait, lossless) { var lastTimeout, alreadyDo = false; if (typeof lossless == 'undefined') lossless = true; return function () { var context = this, args =
IT架构圈
2018/05/31
1.7K0
Go-防止跨站脚本攻击(XSS)
跨站脚本攻击(Cross-Site Scripting, XSS)是一种常见的 Web 攻击类型,它利用恶意脚本来绕过网站的安全机制,对用户造成危害。为了防止 XSS 攻击,开发人员需要采取措施来过滤和转义输入内容,并在输出时确保安全。Go 语言中,可以通过中间件的方式来实现防止 XSS 攻击。
堕落飞鸟
2023/04/23
3K0
XSS攻击理解与预防
👨‍💻个人主页: 才疏学浅的木子 🙇‍♂️ 本人也在学习阶段如若发现问题,请告知非常感谢 🙇‍♂️ 📒 本文来自专栏: 计算机网络 🌈 每日一语:真正的勇气是:做出决定,全力以赴! 🌈 XSS攻击理解与预防 什么是XSS攻击 XSS攻击的危害 XSS攻击的类型 反射型XSS攻击 存储型XSS攻击 DOM型XSS攻击 什么是XSS攻击 XSS跨站脚本攻击(Cross Site Scripting)的本质是攻击者在web页面插入恶意的script代码,当用户浏览该网页之时,嵌入其中的script代
才疏学浅的木子
2022/11/13
6770
XSS攻击理解与预防
JavaScript编码规范
JavaScript在百度一直有着广泛的应用,特别是在浏览器端的行为管理。本文档的目标是使JavaScript代码风格保持一致,容易被理解和被维护。
java攻城狮
2020/10/10
1.2K0
轻松理解 X-XSS-Protection
首先我们来理解一下什么是“X-XSS-Protection”,从字面意思上看,就是浏览器内置的一种 XSS 防范措施。
信安之路
2018/08/08
6.9K0
轻松理解 X-XSS-Protection
Nginx 防止 SQL 注入、XSS 攻击的实践配置方法
通过服务器 waf 的日志记录分析得出基本都是 SQL 注入、XSS 攻击范畴,这些攻击都绕过了 CDN 缓存规则直接回源请求,这就造成 PHP、MySQL 运算请求越来越多,服务器负载飙升就是这个原因造成的,在日志里可以看到几乎大部分都是 GET/POST 形式的请求,虽然 waf 都完美的识别和拦截了,但是因为 Nginx 层面应对措施,所以还是会对服务器负载形成一定的压力,于是在 Nginx 里也加入了防止 SQL 注入、XSS 攻击的配置,没有想到效果竟然出奇的好。
Z4
2020/04/22
6.8K0
【Django | 安全防护】防止XSS跨站脚本攻击
🤵‍♂️ 个人主页: @计算机魔术师 👨‍💻 作者简介:CSDN内容合伙人,全栈领域优质创作者。 🌐 推荐一款找工作神器网站: 宝藏网站 |笔试题库|面试经验|实习招聘内推| 该文章收录专栏 ✨—【Django | 项目开发】从入门到上线 专栏—✨ 文章目录 一、XSS攻击过程原理 二、假设我是一名攻击者🐱‍👤 三、修复漏洞🔨 一、XSS攻击过程原理 创建一个 XXS脚本漏洞作为演示 我们创建视图函数返回模型对象的字段 创建视图函数 """ 直接返回 HTML内容的视图,(存在X
计算机魔术师
2022/08/19
9160
【Django | 安全防护】防止XSS跨站脚本攻击
【Django | 安全防护】防止XSS跨站脚本攻击
我们可以用函数html.escape()对其做一个转义,最建议的方法是使用系统的render方法,用django自带模板机制渲染页面。
计算机魔术师
2023/10/07
2450
Springboot 防止XSS攻击,包含解决RequestBody 的Json 格式参数
最近项目做安全测试,发现存在XSS攻击的可能,于是乎上网找找看,找了很多基本都是继承HttpServletRequestWrapper,对getParam、getQueryString等获取参数的方法进行重写,对参数进行html转义,马上找一个加上试了试,可是发现保存的对象还是没有转义的,后来才想到项目是前后端分离,基本都是@RequestBody注解接收application/json格式参数,通过以上方法是获取不到参数的。
全栈程序员站长
2022/07/05
2.3K1
Springboot 防止XSS攻击,包含解决RequestBody 的Json 格式参数
反射型xss解决方法,增加过滤器,防止反射型 XSS攻击漏洞
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/139826.html原文链接:https://javaforall.cn
全栈程序员站长
2022/08/24
1.1K0
[网络安全] 六.XSS跨站脚本攻击靶场案例九题及防御方法-2
当我们输入<script>alert('Eastmount') 时,并没有弹出窗体,运行结果如下图所示:
Eastmount
2021/12/02
5.5K0
[网络安全] 六.XSS跨站脚本攻击靶场案例九题及防御方法-2
Javascript编码规范建议
示例: 解释: 声明包含元素的数组与对象,只有当内部元素的形式较为简单时,才允许写在一行。元素复杂的情况,还是应该换行书写。 示例:
Clearlove
2019/08/29
1.4K0
Javascript编码规范建议
JavaScript编码规范(1)
由此可见养成一个良好的编码形象是至关重要的,而本文主要讲解的是基于JavaScript的编码形象,即基于JavaScript的编码风格和编码规范。
山河木马
2019/03/05
4080
点击加载更多

相似问题

防止XSS的Javascript

24

用前环防止XSS

10

防止Javascript和XSS攻击

39

防止XSS攻击并正确编码字符

25

HTML编码能防止各种XSS攻击吗?

96
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文