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

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>

 

要在 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. 最后,在打印弹窗中选择“局部打印”选项,就可以只打印指定的内容了。 希望这些步骤可以帮助你实现自定义头页脚并进行局部打印
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值