威海教育行业网站建设,灯光设计师培训,wordpress吐槽源码,wordpress自定义主题在浏览器中使用javascript打印HTML中指定Div带背景图片内容生成PDF电子证书查询的解决方案 一、指定内容打印二、背景图片打印1.CSS背景图片设置2.div相对定位居中 三、完整案例展示1.CSS样式表2.HTML容器构建 一、指定内容打印
要调用浏览器中的打印功能#xff0c;并指定需… 在浏览器中使用javascript打印HTML中指定Div带背景图片内容生成PDF电子证书查询的解决方案 一、指定内容打印二、背景图片打印1.CSS背景图片设置2.div相对定位居中 三、完整案例展示1.CSS样式表2.HTML容器构建 一、指定内容打印
要调用浏览器中的打印功能并指定需要打印的内容为特定的DIV内的内容你可以使用JavaScript来实现。下面是一种实现方法
首先在需要打印的DIV标签上添加一个唯一的ID属性例如
div idprint-content!-- 这里是需要打印的内容 --
/div接下来在JavaScript中使用window.print()方法来调用浏览器的打印功能并指定打印的内容为指定的DIV。
scriptfunction printDiv() {var printContents document.getElementById(print-content).innerHTML;var originalContents document.body.innerHTML;document.body.innerHTML printContents;window.print();document.body.innerHTML originalContents;}
/script然后在页面中添加一个触发打印的按钮并绑定上面定义的printDiv()函数。
button onclickprintDiv()打印/button现在当用户点击打印按钮时浏览器将会打印出指定的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相对定位居中要将一个 div 元素相对定位并水平居中你可以使用以下 CSS 样式
style.centered {position: relative;left: 50%;transform: translateX(-50%);}
/style在上面的示例中我们给目标 div 添加了一个名为 .centered 的类并设置了相对定位以及水平居中的样式。position: relative; 声明了相对定位left: 50%; 通过将元素的左边距设置为父元素宽度的一半将其移到了水平中间位置。transform: translateX(-50%); 这一行样式通过应用 translateX 变换将元素在水平方向上向左平移了自身宽度的一半实现了水平居中。
接下来你可以将该类应用到需要水平居中的 div 元素上例如
div classcentered!-- 这里是需要水平居中的内容 --
/div水平居中是相对父元素进行的所以父元素应该具有明确的宽度。如果父元素的宽度是根据内容自适应的请确保父元素可以容纳居中的子元素。
三、完整案例展示 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容器构建
div idprint-boxdiv classprint-bgimg srcimages/main.jpg alt width1005/divdiv classprint-contentp stylemargin-top: 100px;span classcom_name漏刻有时/span/pp stylefont-size: 28px;开展 img srcimages/adi.png alt height30 抖音直播销售服务本公司保证所售产品均为品牌正品。/pp stylefont-size: 28px;label stylefont-weight: bold;授权期限/label2023年8月8日至2024年8月7日/pp styletext-align: right;padding-right: 50px;margin-top: 280px;font-size: 20px;宁波漏刻文化科技有限公司/pp styletext-align: right;padding-right: 50px;font-size: 20px;2023年8月8日/p/div
/div
div idnon-print非打印区域/div
button idbtn onclickprintDiv()打印/button漏刻有时
