当前位置:首页 > 编程教程 > javascript技术文章 > js 客户端打印html 并且去掉页眉、页脚的实例

实例讲解js 客户端打印html 及去掉页眉、页脚

  • 发布时间:
  • 作者:码农之家
  • 点击:154

这篇文章主要知识点是关于js、html页眉页脚、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript+Vue+React全程实例
  • 类型:JS实例大小:59150 MB M格式:PDF作者:郑均辉,薛燚
立即下载

js 客户端打印html 并且去掉页眉、页脚的实例

print() 方法用于打印当前窗口的内容,支持部分或者整个网页打印。

调用 print() 方法所引发的行为就像用户单击浏览器的打印按钮。通常,这会产生一个对话框,让用户可以取消或定制打印请求。

win10下测试ie11、chrome、firefox、360、edge 都可以成功去掉页眉页脚;

<!DOCTYPE html>
<html>
<head>
 <title>打印</title>
 <meta charset="utf-8">
 <style>
  .printBox {
   width: 300px;
   height: 300px;
   border: 1px solid blue;
  }
 </style>
 <!-- 打印的样式-->
 <style media="print">
  @page {
   size: auto;
   margin: 0mm;
  }
 </style>
</head>

<body>
<div class="printBox">
 this is content!!!<br>
 点击按钮打印
</div>
<button onclick='print_page()'>打印</button>
</body>

<script type="text/javascript">
 function print_page() {
  if (!!window.ActiveXObject || "ActiveXObject" in window) { //是否ie
   remove_ie_header_and_footer();
  }
  window.print();
 }

 function remove_ie_header_and_footer() {
  var hkey_path;
  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>

以上这篇js 客户端打印html 并且去掉页眉、页脚的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

javascript 相关电子书
学习笔记
网友NO.827911

vue项目中,main.js,App.vue,index.html的调用方法

如下所示: 1、main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件 2、App.vue是我们的主组件,所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。 1、index.html文件入口 2、src放置组件和入口文件 3、node_modules为依赖的模块 4、config中配置了路径端口值等 5、build中配置了webpack的基本配置、开发环境配置、生产环境配置等 以上这篇vue项目中,main.js,App.vue,index.html的调用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。 ……

网友NO.767655

js+HTML5 canvas 实现简单的加载条(进度条)功能示例

本文实例讲述了js+HTML5 canvas 实现简单的加载条(进度条)功能。分享给大家供大家参考,具体如下: !DOCTYPE htmlhtml lang="zh-CN" head meta charset="UTF-8" titlewww.jb51.net canvas实现加载条动画/title /head body canvas id="loadingProgressCanvas"/canvas script /* * 获取canvas, canvas本身没有画图能力,相当于一个画布,提供绘制图形的地方 * document.getElementsByTagName("canvas")[0] * document.querySelector("canvas")/document.querySelector("#loadingProgressCanvas") * document.querySelectorAll("canvas")[0] */ var loadingProgressCanvas = document.getElementById("loadingProgressCanvas"); var ctx = loadingProgressCanvas.getContext("2d"); // 获取绘制图形的对象(画笔) drawFirst(); // 绘制初始状态 var progress = 0; // 定义进度 drawProgress(); // 绘制初始进度 // 定义定时器, 100ms钟绘制5% var timer = setInterval("drawProgress()", 100); // 绘制初始状态 function drawFirst() { ctx.fill; // 定义画笔……

网友NO.356856

JS构造一个html文本内容成文件流形式发送到后台

具体代码如下所示: let html = !DOCTYPE html html head meta charset="utf-8" meta name="viewport" content="width=device-width,initial-scale=1.0" titleX-Find迅聘选才/title link rel="stylesheet" href="https://cdn.bootcss.com/iview/2.14.0/styles/iview.css" rel="external nofollow" / style ${resumecss} /style /head body div class="resume_preview_page" ${template} /div /body /html;var wordStream = window.URL.createObjectURL( new Blob([html],{ type: "text/plain;charset=utf-8" })); console.log('wordStream',wordStream); let formdata = new FormData(); formdata.append('file',wordStream); this.$post(url,formdata) .then(res={ console.log('export finish',res); }) 现在上面方式报错: 解决方法其实很简单 let html = this.getHtmlContent(); let html_ = new Blob([html],{ "type" : "text/html;charset=utf-8" }) let formdata = new FormData(); formdata.append('file', html_, `sdf.html`); axios({ method: 'post', url: url, data:formdata, responseType:'blob', }) 总结 以上所述是小编……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com