css js 打印背景图

参考：https://blog.csdn.net/lidysun/article/details/88995208

如果不对浏览器设置，直接打印时是无法打印背景图的。

方法1：css

@media print {body{-webkit-print-color-adjust:exact;-moz-print-color-adjust:exact;-ms-print-color-adjust:exact;print-color-adjust:exact;}
}

方法2：js

function printPage(){var office = document.getElementsByClassName('office')[0];var imgs = office.getElementsByTagName('img');var img,src;if(!imgs.length){src = window.getComputedStyle(office,null).getPropertyValue('background-image').replace(/(^url)|\(|\)|\"/g,'');img = document.createElement('img');img.src=src;img.height = 150;img.width = 150;office.style.backgroundImage = 'none';office.appendChild(img);}window.print();//取消打印还原setTimeout(function(){office.removeChild(img);office.style.backgroundImage = 'url("'+ src +'")';},100)
}

全部代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>js打印背景图</title><style>*{margin:0;padding:0;}.wrap{position:relative;text-align: right;padding:50px;}.office{position: absolute;right: 50px;bottom: 10px;width: 150px;height: 150px;background-image: url(./official_urlseal.png);background-position:center;background-repeat:no-repeat;background-size: cover;}
@media print {body{-webkit-print-color-adjust:exact;-moz-print-color-adjust:exact;-ms-print-color-adjust:exact;print-color-adjust:exact;} button{display:none;}
}</style>
</head>
<body><div class="wrap"><p>dsfsdfsdf</p><p>dsfsdfsdf</p><p>dsfsdfsdf</p><p>dsfsdfsdf</p><p>dsfsdfsdf</p><p>dsfsdfsdf</p><p>dsfsdfsdf</p><p>dsfsdfsdf</p><p>dsfsdfsdf</p><p>dsfsdfsdf</p><div class="office"></div></div><p style="text-align:right;margin:100px 50px 0 0;"><button onclick="printPage()" >打印</button></p><script type="text/javascript">
function printPage(){var office = document.getElementsByClassName('office')[0];var imgs = office.getElementsByTagName('img');var img,src;if(!imgs.length){src = window.getComputedStyle(office,null).getPropertyValue('background-image').replace(/(^url)|\(|\)|\"/g,'');img = document.createElement('img');img.src=src;img.height = 150;img.width = 150;office.style.backgroundImage = 'none';office.appendChild(img);}window.print();//取消打印还原setTimeout(function(){office.removeChild(img);office.style.backgroundImage = 'url("'+ src +'")';},100)
}</script>
</body>
</html>

css js 打印背景图相关推荐

vue.js 引用背景图 background 无效的3种解决办法
#vue.js项目中,出现css调用background背景图无效?如何解决? 或者调用<img>标签,也无效果? 直接上代码,自行对比查找一下: 效果图预览 1. 正确的代码,示例如下: ...
html背景图片垂直居中,css — 定位、背景图、水平垂直居中
css - 定位.背景图.水平垂直居中目录 1. 定位 2. 背景图 3. 水平垂直居中 1. 定位 position:static | relative | absolute | fixed; s ...
vue3利用JS切换背景图
VUE3利用JS切换背景图实践记录需要实现的功能:鼠标移入移除图标切换(在这只做移入展示) 新建一个读取图片的函数,如下 // 动态读取图片 function getImageUrl(name: s ...
css实现雪花背景图
css实现雪花背景图 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
js+html2canvas实现网页放大镜效果：放大镜图片使用css样式background背景图，鼠标移动使用样式background-position动态设置
实现效果: 鼠标移动到需要放大的网页上时,鼠标静止不动500毫秒后,一个长方形的放大镜框显示,放大镜中显示当前区域2.2倍的效果,并且这时候鼠标移动放大的区域也跟着变化.放大镜限制:放大 ...
html盒子高度自动收缩,CSS如何解决背景图随父盒子高度变化而拉伸或收缩的问题...
前两天写了个盒模型,遇到了父盒子的背景图片因子盒子的撑开而拉伸,或是因子盒子的缩短而收缩的情况,不开心! 怎么解决呢? 父盒子未设定固定高度,完全靠动态获取的子盒子的高度变化来决定它的最终高度. 在这 ...
webpack中，css中打包背景图，路径报错
css-loader: //打包样式中背景图 {test: /\.(png|jpg)$/,loader: "url-loader?limit=8192&name=images/[ha ...
css同时显示背景图和背景色，且背景色是渐变色
今天在写css样式的时候,竟然被背景图给难倒了.我写的要么是不显示背景色,要么是不显示背景图,因为背景色是渐变色,当我把渐变色改成纯色的时候就显示了现在怎样显示渐变背景色且正常的显示背景图,其实很简 ...
css实现自适应背景图及背景图透明度处理
前言大屏可视化在展示方式上之所炫酷是因为有很多科技感图形的衬托,这些图形可以来自图表组件,也可以是UI组件,具备科技感的UI组件实际上比常见的组件库中的组件多了一个样式属性(即backgroundI ...

css js 打印背景图

css js 打印背景图相关推荐

最新文章

热门文章