js 去掉浏览器打印默认的页头页尾和打印背景图片

最新推荐文章于 2024-04-18 10:17:46 发布

菜瓜于

最新推荐文章于 2024-04-18 10:17:46 发布

阅读量2.3k

点赞数

分类专栏： html5 js

本文链接：https://blog.csdn.net/qq_36441761/article/details/83060153

版权

js 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

html5

1 篇文章 0 订阅

订阅专栏

去掉浏览器打印默认的页头页尾

<!DOCTYPE html>
<html>
<head>
  <title>print</title>
  <meta charset="utf-8">
  <style media="print">
    @page {
      size: auto;
      margin: 0mm;
    }
  </style>
</head>
 
<body>
  <p style="width:300px; height:300px;border: 1px solid blue;">
    打印内容
  </p>
  <button onclick='print_page()'>print</button>
</body>
 
<script type="text/javascript">
  function print_page() {
    if (!!window.ActiveXObject || "ActiveXObject" in window) {
      remove_ie_header_and_footer();
    }
    window.print();
  };
 
  function remove_ie_header_and_footer() {
    var hkey_root, hkey_path, hkey_key;
    hkey_path = "HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
    try {
      var RegWsh = new ActiveXObject("WScript.Shell");
      RegWsh.RegWrite(hkey_path + "header", "");
      RegWsh.RegWrite(hkey_path + "footer", "");
    } catch (e) {}
  }
</script>
</html>

设置浏览器打印，不需要手动勾选背景图形，即可打印出背景

<style type="text/css">
@media print {
  body {-webkit-print-color-adjust: exact;}
}
</style>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

菜瓜于

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

js花式控制台打印（自定义背景色）

weixin_45777997的博客

06-18

1757

js花式控制台打印（自定义背景色）代码效果代码 // 打印页面相关信息（代码更新时间与基准地址） let date = '2020-06-17 19:00' let a = 'background: #606060; color: #fff; border-radius: 3px 0 0 3px;' let b = 'background: #1475B2; color: #fff; border-radius: 0 3px 3px 0;' console.log(`%c Update Time : %c

JS实现浏览器打印（自动隐藏页眉和页脚）

橙乐果果

07-19

5384

本文只介绍如何自动隐藏页眉和页脚在浏览器打印中，浏览器会自动勾选打印页眉和页脚，只要几行代码即可去除，打印二维码为demo <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>打印</title> <!-- 去除页眉页脚 ...

参与评论您还未登录，请先登录后发表或查看评论

css js 打印背景图

刚刚好

04-03

2995

如果不对浏览器设置，直接打印时是无法打印背景图的。方法一：css @media print { body{ -webkit-print-color-adjust:exact; -moz-print-color-adjust:exact; -ms-print-color-adjust:exact; print-c...

vue js打印并去掉页眉和页脚

xiaoxiaojianren的博客

01-25

8119

打印 //打印功能 print(e){ // if (!!window.ActiveXObject || "ActiveXObject" in window) { //是否ie // alert('9090'); // remove_ie_head

关于浏览器打印无法打印背景，需要手动勾选打印背景解决方案

山海一哥的博客

04-03

4026

有同事问我怎么解决这种问题，总不可以让用户每次都手动勾选吧。目前思考到两种解决方式：打印无法打印背景，那么我们的出发点就是可不可以不用背景而使用其他的东西，比如图片本身（同事这里无法使用，原因在于客户可以自定义背景颜色，提供图片并不是最好的选择，毕竟颜色选择器你懂的）方法一：使用h5新特性画布canvas,通过画布画出来的一块区域色块是可以在打印中展示的方法二；既然背景不能打印，选择的又...

JS中window.print()不支持背景色

aeoliancrazy的博客

04-25

7854

JS中window.print()不支持背景色除去，在网上其他帖子的说法是：css背景+图片实现原地址传送门：https://www.cnblogs.com/ranran/p/js_print.html 我遇到的问题是，checkbox要用背景色进行填充选中项，最开始用background-color，怎么都调不出来最后直接用 border实现，把border的厚度（宽度）设置的...

前端，google浏览器页眉页脚处理

weixin_43683146的博客

01-04

2236

前端页眉页脚问题

网页打印控件Lodop5.0

06-10

1:独特的表格页头页尾,快速实现WEB报表，兼备网页打印和报表功能 2:套打时最终用户可拖拽微调,自主保存微调结果,是套打的极佳解决方案 3:控件可100%在线或下载安装,适应IE内核类及FireFox系列等所有浏览器 4:曾在...

js解决overflow：scroll失效问题

weixin_34128534的博客

07-03

1万+

用JS有效解决移动w用JS有效解决移动web浏览器中HTML元素的overflow:sceb浏览器中HTML元素的overflow:scroll滚动属性失效问题iscroll4webhtml5mobilejavascriptweb移动平台前端UI开发工作，兼容问题超多，今儿又遇到一个。产品方要求在某固定尺寸容器内显示内容，但内容条数未知；如果条数过多，容器显示滚动条。这鸟需求...

帆软报表异常汇总及方案.

最新发布

橙-极纪元-cplvfx-JJY.Cheng

04-18

836

js 打印网页时没有背景色，window.print打印背景色丢失

js的window.print()打印背景图片，打印背景图片无法显示

张宇的博客

11-01

1万+

js的window，print()打印背景图片 题目描述 js的window，print()打印背景图片给body加了图片地址之后，非要设置浏览器打印选项里面设置背景图形打印才行，怎么通过js去设置默认的就是打印带背景图像的方法一：css //打印机媒体查询 @media print { body{ -webkit-print-color-adjust:exact; ...

NoPrint.js：使用JavaScript在HTML中禁用打印、截屏、复制和粘贴

Dickson的专栏

11-02

5409

NoPrint.js是一个小巧整洁的开源JS库，可禁用HTML中的打印、截图、复制和粘贴功能。它还提供启用AutoBlur选项，让鼠标离开网页后内容变得模糊。这个功能可以阻止大多数普通用户截取屏幕截图。 NoPrint.js可以在几乎所有的浏览器上运行例如 Chrome、Edge、FireFox和Opera。 NoPrint.js可以做什么 - 禁用复制和粘贴 - 禁用打印 - 禁用鼠标右键 - 禁用截图 - 禁用“另存为”/ Ctrl + S - 自动模糊你可以打开此示例页面查看No...

css实现window.print() 带背景图打印

慧香一格的专栏

10-28

1340

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

html打印去除页眉页脚,js客户端打印html并且去掉页眉、页脚

weixin_31310913的博客

06-03

703

print()方法用于打印当前窗口的内容，支持部分或者整个网页打印。调用print()方法所引发的行为就像用户单击浏览器的打印按钮。通常，这会产生一个对话框，让用户可以取消或定制打印请求。win10下测试ie11、chrome、firefox、360、edge都可以成功去掉页眉页脚；打印.printBox {width: 300px;height: 300px;border: 1px solid ...

前端打印时背景图片失效

weixin_47581625的博客

01-22

1392

前端打印时背景图片失效

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

漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）

08-10

2612

当用户点击"打印"按钮时，浏览器将会打印出指定的DIV内的内容。要调用浏览器中的打印功能，并指定需要打印的内容为特定的DIV内的内容，你可以使用JavaScript来实现。水平居中是相对父元素进行的，所以父元素应该具有明确的宽度。如果父元素的宽度是根据内容自适应的，请确保父元素可以容纳居中的子元素。通过将元素的左边距设置为父元素宽度的一半，将其移到了水平中间位置。变换，将元素在水平方向上向左平移了自身宽度的一半，实现了水平居中。的类，并设置了相对定位以及水平居中的样式。在上面的示例中，我们给目标。

vue+element-ui前端使用print-js实现打印,可自定义样式（横纵向，缩放比，字体大小，背景色）

qq_42571665的博客

10-12

2万+

实现纯前端的打印功能，可自定义打印样式，使用print-js实现，设置打印默认横纵向，设置打印默认缩放比，修改打印字体，修改背景色。

html页面打印去掉标题和网址

weixin_45390688的博客

10-31

1030

在html代码中添加如下代码。

vue-print-nb 自定义页头页尾局部打印

05-23

要在 vue-print-nb 中自定义页头和页脚并进行局部打印，可以按照以下步骤进行： 1. 在你的组件中引入 vue-print-nb： ```javascript import vuePrint from 'vue-print-nb'; ``` 2. 创建一个打印模板并将其传递给 vue-print-nb 组件： ```html <vue-print :printContent="printTemplate" :showPrint="showPrint"></vue-print> ``` 其中 `printTemplate` 是要打印的内容，`showPrint` 控制是否显示打印弹窗。 3. 在 `printTemplate` 中添加自定义的页头和页脚，例如： ```html <div class="page-header">我的自定义页头</div> <div class="page-footer">我的自定义页脚</div> <div class="page-body">  </div> ``` 这里我们使用了三个 `<div>` 标签来分别代表页头、页脚和打印内容。 4. 在样式表中为页头和页脚添加样式： ```css .page-header { position: absolute; top: 0; left: 0; width: 100%; height: 50px; background-color: #f5f5f5; text-align: center; font-size: 24px; line-height: 50px; } .page-footer { position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; background-color: #f5f5f5; text-align: center; font-size: 16px; line-height: 50px; } ``` 5. 在打印按钮的点击事件中设置要打印的内容为当前组件中的某个元素，例如： ```javascript print() { this.printTemplate = this.$refs.printContent.innerHTML; this.showPrint = true; } ``` 这里我们使用了 `$refs` 来获取组件中名为 `printContent` 的元素，将其转成 HTML 字符串并赋值给 `printTemplate`，然后显示打印弹窗。 6. 最后，在打印弹窗中选择“局部打印”选项，就可以只打印指定的内容了。希望这些步骤可以帮助你实现自定义页头页脚并进行局部打印。