js调用window.print()打印页面的时候怎么给打印的每一页都加上logo做背景图

人间混日子

5551631

发布于
2020-10-28

公司有个需求打印一些公司的合同的时候要给每一页添加一个logo之前采用的办法是给页面添加多个img然后设置绝对定位top值现在发现打印出来有时候后面几页没有图片怎么才能获取到这个网页打印的总页数呢之前用的办法有问题

javascript 前端

chrome html chrome-devtools

阅读 5.1k

2 个回答

牛书书

✓ 已被采纳

@media print 用这个来设置CSS打印属性

——————

test.html

<!DOCTYPE html>
<head>
  <style>
    .background {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: -1;
      background: url(https://cdn.colorhub.me/imgsrv/9957a1bfc45d18ef09645dff1352cf7bab011fee);
      background-position: center center;
      background-repeat: no-repeat;
      display: none;
    }

    .content {
      padding: 600px 0;
      text-align: center;
      font-size: 50px;
      color: red;
    }

    @media print {
      .background {
        display: block;
      }
    }
  </style>
</head>

<body>
  <div class="background"></div>
  <div class="main">
    <div class="content">
      第1部分
    </div>
    <div class="content">
      第2部分
    </div>
    <div class="content">
      第3部分
    </div>
    <div class="content">
      第4部分
    </div>
  </div>
</body>

VueBro

发布于
2020-12-15

新手上路，请多包涵

您好请问这个问题解决了吗？为每一页添加背景图片

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

js调用window.print()打印页面的时候怎么给打印的每一页都加上logo做背景图

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？

js调用window.print()打印页面的时候 怎么给打印的每一页都加上logo做背景图

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？

js调用window.print()打印页面的时候怎么给打印的每一页都加上logo做背景图