window.print没有背景颜色的问题

最新推荐文章于 2024-04-18 10:17:46 发布
最新推荐文章于 2024-04-18 10:17:46 发布
阅读量7.6k 收藏
点赞数 2
文章标签： 浏览器 internet 报表 工具 div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tuwen/article/details/5049177
版权

一打印：
（1） 在实际应用中！特别是一些公司需要报表输出和打印！这个时候我们就会用到JS的打印和报表输出功能！当然打印很简单就是window.print();你也可以在按钮的onclick事件中写上return print()可以实现打印效果！这个时候打印你会发现打印出来的是整个页面，包裹着网站的logo和一些其他不需要的按钮！这个时候我们可以使用div控制一下。把不需要打印的东西用不 打印的内容 然后

这个时候就可以实现打印时不打印其他信息的效果！

说明:
1.除去页眉页脚:通过浏览器的"页面设置"选项把其中的"页眉"和"页脚"的内容清空即可.
2.打印出背景色:通过浏览器的"工具"-"internet选项"-"高级"-"打印"-"打印背景色和图像"选中即可

tuwen
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS打印报表控件
04-07
不错的js表报打印控件,试用简单.好用,找了好久,只有上传到空间才能用. 找了很久.基本打印功能都能实现,分页打印.打印预览. google浏览器测试效果不错.
bootstrap-print：管理Twitter Bootstrap v3的打印介质
02-05
Bootstrap Print通过CSS样式和媒体查询来区分这两种情况，使得网页在打印时能自动隐藏不必要的元素（如导航栏、侧边栏等），保留关键内容，并调整字体大小、颜色和间距，以适应纸张的物理限制。 在技术层面，...
vue 使用print-js 打印html页面
热门推荐
weixin_36965072的博客
07-24 1万+
Print.js 官网 官网 优点：可以打印多种格式的内容（pdf、json、html等） 打印json时可以添加表头。打印html页时可以继承原有页面的样式，局部打印，过滤掉要打印的元素，及其方便。 一、vue安装命令： npm install print-js --save 二、引入 这个引入不需要在main.js中，直接在使用的.vue中引入即可 这里颜色虽然是灰色，但是也要添加，否则会报错。 三、编码 我这里要打印 html 中的div ，调用函数找到 div 的 id。 ![.](https:
打印插件 Print.js
sun
04-15 4184
https://printjs.crabbly.com/
JS打印和报表输出
坚持,才是力量.老实做人,踏实做事.
12-16 1440
一打印：（1） 在实际应用中！特别是一些公司需要报表输出和打印！这个时候我们就会用到JS的打印和报表输出功能！当然打印很简单就是window.print();你也可以在按钮的onclick事件中写上return print()可以实现打印效果！这个时候打印你会发现打印出来的是整个页面，包裹着网站的logo和一些其他不需要的按钮！这个时候我们可以使用div控制一下。把不需要打印的东西用不 打印的内容
js 打印网页时没有背景色，window.print打印背景色丢失
橙-极纪元-cplvfx-JJY.Cheng
04-18 507
js 打印网页时没有背景色，window.print打印背景色丢失
window.print打印背景色丢失，谷歌、火狐解决方案。同求IE解决方案
wunengneng的博客
11-20 2536
近期在看打印,由于window.print调用的是浏览器的打印功能，所以发现在打印时出现背景色丢失的现象。经过查询一些资料，解决了在谷歌和火狐上背景色丢失的问题。 谷歌打印背景色丢失解决方案 在div的style中添加 -webkit-print-color-adjust: exact; <style type="text/css" media="print,screen"> div{ //webkit 为Google Chrome、Safari等浏览器内核 -webkit-pr
JS中window.print()不支持背景色
aeoliancrazy的博客
04-25 7774
JS中window.print()不支持背景色 除去，在网上其他帖子的说法是：css背景+图片实现 原地址传送门：https://www.cnblogs.com/ranran/p/js_print.html 我遇到的问题是，checkbox要用背景色进行填充选中项， 最开始用background-color，怎么都调不出来 最后直接用 border实现，把border的厚度（宽度）设置的...
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
09-19
### PyQt4 Treewidget 选择改变颜色及设置可编辑性的方法 #### 一、概述 在使用PyQt进行GUI开发时，`QTreeWidget`是一个非常实用的组件，它可以用来展示层级关系的数据结构。本文主要介绍如何实现`QTreeWidget`的...
javascript常用特效.doc
02-28
5. **超级变色**: 文档背景颜色可以通过JavaScript动态改变，如`document.bgColor=int(256*256*256*rnd)`，这里的`rnd`是随机数函数，使得背景颜色随机变化。 6. **透明样式**: CSS滤镜可以实现图像的透明效果，...
JavaScript技巧大全.doc
06-09
16. **根据选项改变页面颜色**：可以编写JavaScript代码来监听用户的选择，并根据选择改变页面的背景颜色或其他样式。 以上都是JavaScript在网页交互设计中的实用技巧，它们极大地增强了用户的体验，使得网页更加...
Javascript技巧大集合时间.docx
02-23
12. **打印功能**：`window.print()`函数可以触发浏览器的打印对话框，允许用户打印当前网页。 13. **全选输入框**：`onFocus`和`onMouseOver`事件结合`this.select()`可以实现用户聚焦或鼠标悬停时自动选中输入框...
js打印(转于 颜‰咸的 的博客)
ai_33的专栏
07-22 1111
 一打印：（1） 在实际应用中！特别是一些公司需要报表输出和打印！这个时候我们就会用到JS的打印和报表输出功能！当然打印很简单就是window.print();你也可以在按钮的onclick事件中写上return print()可以实现打印效果！这个时候打印你会发现打印出来的是整个页面，包裹着网站的logo和一些其他不需要的按钮！这个时候我们可以使用div控制一下。把不需要打印的东西用不
如何实现报表直接打印需求
RQlyc的博客
05-14 1073
直接打印是常见的报表打印需求，即点击打印按钮后直接把结果输出到打印机，使用户的操作更加简便。润乾报表提供了三种不同的打印方式，都可以实现直接打印功能，下面我们就来看一下每一种方式的具体实现方法。 一、直接打印效果 1、applet 打印 Applet 打印目前只支持 IE 内核浏览器，且需要客户端至少正确安装配置了 jre 环境。 在 IE 内核浏览器进行直接打印时，会直接把报表结果输出到...
JS 打印报表
weixin_30556959的博客
11-13 101
<script type="text/javascript"> window.print(); </script> 前台页面： <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Maxuni.Entity.VOutP...
js的window.print()功能 有些背景色设置和背景图片无法显示的问题
Mr_pets的博客
04-06 2507
js的window.print()功能 有些背景色设置和背景图片无法显示的问题 写在前面：需求需要调用浏览器原生的print功能；下载保存为pdf，出现了 部分样式消失的情况 方法一：(此方法实测，针对我出现的情况，可用) //打印机媒体查询 @media print { body{ -webkit-print-color-adjust:exact; -moz-print-color-adjust:exact; -ms-print-color-a
Print.js实现打印报表
qq_37471721的博客
08-16 1万+
因项目需要，需实现报表打印功能，如图 最终实现打印功能采用的时Print.js库（https://printjs.crabbly.com/），这个库可以实现打印预览、打印设置、打印指定内容等强大的功能。该库具体引用方法可访问以上链接。最终实现如下： 开发中遇到的问题记录： 纵向打印时，表格内容可铺满整个页面，但是横向打印，明明设置了表格宽度100%,可打印预览的时候右侧仍留有空白，很不美观。...
【中科院1区】Matlab实现天鹰优化算法AO-RF锂电池健康状态估计算法研究.rar
最新发布
08-02
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
window.print打印参数设置
06-28
### 回答1： window.print()是JavaScript中的一个方法，用于在浏览器中打印当前页面。它不需要任何参数设置，只需要在需要打印的页面中调用即可。但是，可以通过CSS样式来设置打印时的一些参数，例如打印页眉、页脚、背景颜色等。具体的设置方法可以参考CSS的@media print规则。 ### 回答2： 在网页中使用 window.print() 方法可以快速实现页面的打印，但是如何设置打印参数呢？下面我们来详细介绍一下。 首先，可以在 window.print() 方法中传入一个参数，该参数是一个对象，包含各种打印参数的设置。 以下是一些可用的参数及其作用： 1. mediaType：设置打印输出的介质类型，可以是 all、print、screen 等。 2. orientation：设置打印页面的方向，可以是 landscape（横向）或 portrait（纵向）。 3. pageSize：设置打印页面的大小，可以是 A4、Letter 或其他自定义大小。 4. printBackground：设置是否打印网页中的背景图和颜色，默认为 false，不打印。 5. scale：设置打印页面的缩放比例。 示例代码如下： ``` window.print({ mediaType: 'print', orientation: 'landscape', pageSize: 'A4', printBackground: true, scale: 0.5 }); ``` 除了在 window.print() 方法中传入参数进行打印参数的设置外，也可以通过 CSS 样式来设置。 以下是一些常用的打印 CSS 样式： 1. @page：设置打印页面的属性，如大小、方向等。 2. @media print：设置在打印页上显示或隐藏的元素。 示例代码如下： ``` @page { size: A4; margin: 1cm; orientation: landscape; } @media print { body { visibility: hidden; } .printable-area { visibility: visible; } } ``` 以上就是关于 window.print 打印参数设置的介绍。需要注意的是，不同浏览器可能存在兼容性问题，具体使用时需要进行测试。 ### 回答3： window.print() 是一个 JavaScript 方法，用于在浏览器中打印当前页面。该方法不需要任何参数，但是可以通过设置浏览器的一些打印属性来实现打印效果的更改。 一般来说，我们可以通过 CSS 来设置打印效果，包括字体大小、颜色、背景、间距等。CSS 打印属性与常规网页样式有所不同，它们只在打印时有效，不会影响常规浏览。 以下是一些常用的 CSS 打印属性： 1. page-break-before / page-break-after: 设置打印页面的换页方式，可选值为 auto（自动分页）、always（总是分页）和 avoid（禁止分页）。 2. @page: 这是一个 CSS at-rule，用于定义打印页面的一些属性，包括大小、边距、背景、头部、尾部等。例如： @page { size: A4; /* 打印尺寸 */ margin: 2cm; /* 页边距 */ padding: 1cm; /* 内边距 */ footer: "Page " counter(page); /* 页脚 */ } 3. @media print: 这是另一个 CSS at-rule，用于指定在打印模式下应用的样式。例如： @media print { body { font-size: 14pt; /* 字体大小 */ color: black; /* 字体颜色 */ } img { max-width: 100%; /* 图片宽度 */ height: auto; /* 图片高度自适应 */ } } 除此之外，我们还可以使用 JavaScript 来设置打印页面的一些属性，例如修改页面标题、隐藏或显示特定元素等。例如： window.document.title = "My Printed Page"; // 修改页面标题 var elem = document.getElementById("logo"); // 获取元素 if (window.matchMedia("print").matches) { // 判断打印模式 elem.style.display = "none"; // 隐藏元素 } else { elem.style.display = "block"; // 显示元素 } 总之，通过设置 CSS 和 JavaScript 参数，我们可以轻松地定制页面的打印效果，以满足不同的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值