在浏览器中使用javascript打印HTML中指定Div带背景图片内容生成PDF电子证书查询的解决方案

您所在的位置:网站首页 打印网页怎么打印背景 在浏览器中使用javascript打印HTML中指定Div带背景图片内容生成PDF电子证书查询的解决方案

在浏览器中使用javascript打印HTML中指定Div带背景图片内容生成PDF电子证书查询的解决方案

2024-07-12 16:40:11| 来源: 网络整理| 查看: 265

在浏览器中使用javascript打印HTML中指定Div带背景图片内容生成PDF电子证书查询的解决方案 一、指定内容打印二、背景图片打印1.CSS背景图片设置2.div相对定位居中 三、完整案例展示1.CSS样式表2.HTML容器构建

一、指定内容打印

要调用浏览器中的打印功能,并指定需要打印的内容为特定的DIV内的内容,你可以使用JavaScript来实现。下面是一种实现方法:

首先,在需要打印的DIV标签上添加一个唯一的ID属性,例如: 接下来,在JavaScript中使用window.print()方法来调用浏览器的打印功能,并指定打印的内容为指定的DIV。 function printDiv() { var printContents = document.getElementById("print-content").innerHTML; var originalContents = document.body.innerHTML; document.body.innerHTML = printContents; window.print(); document.body.innerHTML = originalContents; } 然后,在页面中添加一个触发打印的按钮,并绑定上面定义的printDiv()函数。 打印

现在,当用户点击"打印"按钮时,浏览器将会打印出指定的DIV内的内容。请注意,由于涉及到浏览器的打印功能,以上方法可能在不同的浏览器中略有差异。

二、背景图片打印 1.CSS背景图片设置

将图片设置在CSS设置为背景图片时,会被打印默认选项“背景图形”的影响,增加了用户端的复杂度。

#print-content { width: 700px; line-height: 30px; background: url('images/main.jpg') no-repeat top left; }

在这里插入图片描述

2.div相对定位居中

即:将背景图片,单独建立DIV作为底层显示,文字层设置z-index的优先级别。 div相对定位居中:要将一个 元素相对定位并水平居中,你可以使用以下 CSS 样式:

.centered { position: relative; left: 50%; transform: translateX(-50%); }

在上面的示例中,我们给目标 添加了一个名为 .centered 的类,并设置了相对定位以及水平居中的样式。position: relative; 声明了相对定位,left: 50%; 通过将元素的左边距设置为父元素宽度的一半,将其移到了水平中间位置。transform: translateX(-50%); 这一行样式通过应用 translateX 变换,将元素在水平方向上向左平移了自身宽度的一半,实现了水平居中。

接下来,你可以将该类应用到需要水平居中的 元素上,例如:

水平居中是相对父元素进行的,所以父元素应该具有明确的宽度。如果父元素的宽度是根据内容自适应的,请确保父元素可以容纳居中的子元素。

三、完整案例展示

在这里插入图片描述

1.CSS样式表 body { margin: 0; padding: 0; font-size: 16px; } #print-box { position: relative; width: 1000px; left: 50%; transform: translateX(-50%); } .print-bg { position: absolute; z-index: 99; } .print-content { position: absolute; width: 100%; line-height: 32px; top: 500px; z-index: 9999; text-align: center; } .print-content > p { width: 90%; margin: 40px auto; text-align: center; } .com_name { font-size: 38px; color: #865800; font-weight: bold; } #non-print { position: fixed; border-radius: 10px 10px 0 0; margin-top: 80px; width: 100%; height: 80px; bottom: 0px; line-height: 30px; background-color: #0066cc; color: #f1f1f1; text-align: center; z-index: 9999; } #btn { position: fixed; width: 80px; height: 30px; right: 0; top: 50px; background-color: #0066cc; border-radius: 30px 0 0 30px; color: #f1f1f1; cursor: pointer; border: none; } 2.HTML容器构建 漏刻有时 开展 抖音直播销售服务,本公司保证所售产品均为品牌正品。 授权期限:2023年8月8日至2024年8月7日 宁波漏刻文化科技有限公司 2023年8月8日 非打印区域 打印

@漏刻有时



【本文地址】

公司简介

联系我们

今日新闻


点击排行

实验室常用的仪器、试剂和
说到实验室常用到的东西,主要就分为仪器、试剂和耗
不用再找了,全球10大实验
01、赛默飞世尔科技(热电)Thermo Fisher Scientif
三代水柜的量产巅峰T-72坦
作者:寞寒最近,西边闹腾挺大,本来小寞以为忙完这
通风柜跟实验室通风系统有
说到通风柜跟实验室通风,不少人都纠结二者到底是不
集消毒杀菌、烘干收纳为一
厨房是家里细菌较多的地方,潮湿的环境、没有完全密
实验室设备之全钢实验台如
全钢实验台是实验室家具中较为重要的家具之一,很多

推荐新闻


图片新闻

实验室药品柜的特性有哪些
实验室药品柜是实验室家具的重要组成部分之一,主要
小学科学实验中有哪些教学
计算机 计算器 一般 打孔器 打气筒 仪器车 显微镜
实验室各种仪器原理动图讲
1.紫外分光光谱UV分析原理:吸收紫外光能量,引起分
高中化学常见仪器及实验装
1、可加热仪器:2、计量仪器:(1)仪器A的名称:量
微生物操作主要设备和器具
今天盘点一下微生物操作主要设备和器具,别嫌我啰嗦
浅谈通风柜使用基本常识
 众所周知,通风柜功能中最主要的就是排气功能。在

专题文章

    CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭