GVKun编程网logo

Windows11打印体验的改进_打印功能更完善（win11打印机）

9

以上就是给各位分享Windows11打印体验的改进_打印功能更完善，其中也会对win11打印机进行解释，同时本文还将给你拓展JS利用window.print()实现网页打印功能、Win11怎么添加打印

以上就是给各位分享Windows11打印体验的改进_打印功能更完善，其中也会对win11打印机进行解释，同时本文还将给你拓展JS利用window.print()实现网页打印功能、Win11怎么添加打印机？Windows11系统添加打印机步骤、Win11怎么玩CS1.6游戏？Windows11打不开CS1.6怎么办？、win11打不开windowsdefender怎么办？windows11安全中心打不开等相关知识，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

Windows11打印体验的改进_打印功能更完善（win11打印机）

Windows11打印体验的改进_打印功能更完善（win11打印机）

Windows11打印体验的改进_打印功能更完善

微软昨天公布了Windows11的打印体验的改进。从上面的截图可以看出，你现在可以在Windows11的设置应用程序中添加打印机了。对于通用打印驱动程序打印机，Microsoft正在添加向打印作业添加PIN的功能。您可以在下面的Windows11中阅读其他与打印相关的改进。

Windows11打印体验的改进_打印功能更完善

• 在Windows11中，微软增加了对打印支持应用程序(PSA)在窗户里。Windows提供了一个基于标准的Mopria打印协议的收件箱打印机类驱动程序。这使得简单和无缝的打印体验，并消除了用户需要安装额外的软件或自定义驱动程序来连接和打印到他们的Mopria认证打印机。

• 这个通用打印驱动程序在Windows11上，打印机制造商和/或托管打印软件(MPS)解决方案可以通过将PSA发布到Microsoft Store来扩展，这些解决方案具有额外的自定义功能和工作流。这些UWP应用程序不是驱动程序，在用户上下文中运行。当安装在用户的Windows 11设备上时，PSA可以在后台运行以处理相应打印机的打印作业，也可以提供高级打印用户界面。

• PSA还将在消费类Windows11设备上提供商用通用打印服务配置之外的功能。当家庭用户将打印机连接到家庭网络时，应用程序将从应用商店自动安装。

• Microsoft正在为Internet打印协议(IPP)到Windows生态系统。自2018年以来，IPP已在Windows 10中针对网络打印机实施。在Windows 11中，我们正在USB上添加IPP，以扩展使用IPP的硬件支持。为了在企业环境中支持IPP和PSA，Windows还支持定向发现IPP打印机。

相关阅读：

Windows11硬件支持检查工具下载

如何在Windows11上查看 WiFi 或以太网状态和属性

JS利用window.print()实现网页打印功能

JS利用window.print()实现网页打印功能

前言

print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容，我们可以在MDN上查看到相关的简单介绍。

一、print()方法

print() 方法用于打印当前窗口的内容。调用 print() 方法会产生一个打印预览弹框，让用户可以设置打印请求。最简单的打印就是直接调用window.print()，当然用 document.execCommand(''print'') 也可以达到同样的效果。默认打印页面中body里的所有内容。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>printDemo</title>
</head>
<body>
  <input type="button" value="打印此页面" onclick="printpage()" />
  <div>内容</div>
  <script>
    function printpage() {
      window.print()
    }
  </script>
</body>
</html>

二、打印样式

直接调用print()方法去打印网页内容，我们会发现，事先调整好的布局和样式都没法实现，那么有哪些方法可以帮助我们改善打印的用户体验呢？

1.使用打印样式表

配置一份打印样式表print.css，引入到HTML文档，在 <link> 上加上一个 media="print" 来标识这是打印机才会应用的样式表，这样打印的时候，就会默认将该样式表应用到文档中

<link href="/path/print.css" rel="external nofollow"  media="print" rel="stylesheet" />

2.使用媒介查询

当我们要修改的样式没有很多的时候，其实完全不需要重新写个样式表，只要写上一个媒介查询也可以达到同样的效果，如：

@media print {
  h1 {
    font-size: 20px;
    color: red;
  }
}

3.内联样式使用media属性

<style type="text/css" media="print">
   // 打印样式
</style>

4.在css中使用@import引入打印样式表

@import url("/path/print.css") print;

三、打印指定区域部分内容

1.方法一

在需要打印的正文内容所对应的html开始处加上 <!--startprint--> 标识，结尾处加上 <!--endprint--> 标识，截取打印标识之间的内容替换body的内容，调用打印print()方法。

<body>
  <input type="button" value="打印此页面" onclick="printpage()" />
 
  <!--startprint-->
  <div id="printContent">打印内容</div>
  <!--endprint-->
 
  <script>
    function printpage() {
      let oldStr = window.document.body.innerHTML; // 获取body的内容
      let start = "<!--startprint-->"; // 开始打印标识, 17个字符
      let end = "<!--endprint-->"; // 结束打印标识
      let newStr = oldStr.substr(oldStr.indexOf(start) + 17); // 截取开始打印标识之后的内容
      newStr = newStr.substring(0, newStr.indexOf(end)); // 截取开始打印标识和结束打印标识之间的内容
      window.document.body.innerHTML = newStr; // 把需要打印的指定内容赋给body
      window.print(); // 调用浏览器的打印功能打印指定区域
      window.document.body.innerHTML = oldStr; // body替换为原来的内容
    }
  </script>
</body>

2.方法二

将需要打印的内容用一个大的div包裹，打印时将body的内容替换为该div的内容，调用打印print()方法。

<body>
  
  <input type="button" value="打印此页面" onclick="printpage()" />
  <div id="printContent">打印内容</div>
 
  <script>
    function printpage() {
      let newstr = document.getElementById("printContent").innerHTML;
      let oldstr = document.body.innerHTML;
      document.body.innerHTML = newstr;
      window.print();
      document.body.innerHTML = oldstr;
      return false;
    }
  </script>
</body>

3.方法三

有两个事件可以监听到到打印事件，一个是onbeforeprint(),一个是onafterprint()，分别表示打印事件触发前后。 

检测打印请求，提供一个打印前的处理事件onbeforeprint() 将一些不需要打印的元素隐藏，和打印后的处理事件 onafterprint()放开隐藏的元素

    window.onbeforeprint = function(event) {
      //将一些不需要打印的元素隐藏
    };
    window.onafterprint = function(event) {
      //放开隐藏的元素
    };

四、强制插入分页

1.page-break-before（指定元素前添加分页符）

值描述
auto默认值。如果必要则在元素前插入分页符。
always在元素前插入分页符。
avoid避免在元素前插入分页符。
left在元素之前足够的分页符，一直到一张空白的左页为止。
right在元素之前足够的分页符，一直到一张空白的右页为止。
inherit规定应该从父元素继承 page-break-before 属性的设置。
/* 在h1元素前始终插入分页符 */
@media print {
    h1 {page-break-before: always;}
}

2.page-break-after（指定元素后添加分页符）

值描述
auto默认值。如果必要则在元素后插入分页符。
always在元素后插入分页符。
avoid避免在元素后插入分页符。
left在元素之后足够的分页符，一直到一张空白的左页为止。
right在元素之后足够的分页符，一直到一张空白的右页为止。
inherit规定应该从父元素继承 page-break-after 属性的设置。
/* 在 .footer 元素后始终插入分页符 */
@media print {
    .footer {page-break-after: always;}
}

3.page-break-inside（用于设置是否在指定元素中插入分页符）

值描述
auto 默认。如果必要则在元素内部插入分页符。
avoid 避免在元素内部插入分页符。
inherit 规定应该从父元素继承 page-break-inside 属性的设置。
/* 避免在 <pre> 与 <blockquote> 元素中插入分页符 */
@media print {
    pre, blockquote {page-break-inside: avoid;}
}

4.注意

不能对绝对定位的元素使用以上三种分页属性。

请尽可能少地使用分页属性，并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。

五、设置打印布局（横向、纵向、边距）

 @media print {
    @page {
      /* 纵向 */
      size: portrait; 
 
      /* 横向 */
      size: landscape;
 
      /* 边距 上右下左 */
      margin: 1cm 2cm 1cm 2cm;
    }
  }

六、去除浏览器默认页眉页脚

页眉打印默认有页眉页脚信息，展现到页面外边距范围，我们可以通过去除页面模型page的外边距，使得内容不会延伸到页面的边缘，再通过设置 body 元素的 margin 来保证 A4 纸打印出来的页面带有外边距

@media print {
  @page {
    margin: 0;
  }
  body {
    margin: 1cm;
  }
}

七、打印方法封装

1.封装：在utils下新建print.js文件

export default function printHtml(html) {
  let style = getStyle();
  let container = getContainer(html);
 
  document.body.appendChild(style);
  document.body.appendChild(container);
 
  getLoadPromise(container).then(() => {
    window.print();
    document.body.removeChild(style);
    document.body.removeChild(container);
  });
}
 
// 设置打印样式
function getStyle() {
let styleContent = `#print-container {
    display: none;
}
@media print {
    body > :not(.print-container) {
        display: none;
    }
    html,
    body {
        display: block !important;
    }
    #print-container {
        display: block;
    }
}`;
  let style = document.createElement("style");
  style.innerHTML = styleContent;
  return style;
}
 
// 清空打印内容
function cleanPrint() {
  let div = document.getElementById(''print-container'')
  if (!!div) {
    document.querySelector(''body'').removeChild(div)
  }
}
 
// 新建DOM，将需要打印的内容填充到DOM
function getContainer(html) {
  cleanPrint()
  let container = document.createElement("div");
  container.setAttribute("id", "print-container");
  container.innerHTML = html;
  return container;
}
 
// 图片完全加载后再调用打印方法
function getLoadPromise(dom) {
  let imgs = dom.querySelectorAll("img");
  imgs = [].slice.call(imgs);
 
  if (imgs.length === 0) {
    return Promise.resolve();
  }
 
  let finishedCount = 0;
  return new Promise(resolve => {
    function check() {
      finishedCount++;
      if (finishedCount === imgs.length) {
        resolve();
      }
    }
    imgs.forEach(img => {
      img.addEventListener("load", check);
      img.addEventListener("error", check);
    })
  });
}

2.使用： 引入print文件，传入需要打印的DOM元素

import printHtml from "@/utils/print.js"
 
export default {
  methods: {
    print() {
      let printData = `<div>打印内容</div>`
      printHtml(printData)
    }
  },
}

到此这篇关于JS利用window.print()实现网页打印功能的文章就介绍到这了,更多相关window.print()网页打印内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:
  • window.print()局部打印三种方式(小结)
  • window.print()打印根据高度设置居中显示和布局(纵向横向)
  • web打印 window.print()介绍
  • window.print()打印html网页的两种方法实现

Win11怎么添加打印机？Windows11系统添加打印机步骤

Win11怎么添加打印机？Windows11系统添加打印机步骤

最近一段时间有很多朋友用上了装Windows11系统的电脑设备，但是对于新的Win11系统，许多人都不是很熟悉，不知道怎么添加打印机，这种影响工作的问题很要紧，系统之家小编今天就来给大家解答Windows11电脑怎么添加打印机，具体操作步骤如下。

Windows11系统添加打印机步骤

1、首先我们点击菜单栏，然后在弹出的窗口上打开设置。

2、然后点击蓝牙和其它设备。

3、点击添加打印机在左侧找到打印机和扫描仪选项，并点击右边的添加打印机和扫描仪。

4、添加后出现我想要的打印机不在列表中的字样，然后我们点击手动添加。

5、点击完之后输入打印机的名字，或者按照照片上的其他方法进行添加。

以上就是系统之家小编给大家分享的Windows11电脑添加打印机设备的详细方法，有任何的有关电脑使用方面的问题都可以在本站找到解决方法。

Win11怎么玩CS1.6游戏？Windows11打不开CS1.6怎么办？

Win11怎么玩CS1.6游戏？Windows11打不开CS1.6怎么办？

Win11怎么玩CS1.6游戏？有很多朋友虽然用上了最新的Windows11操作系统，但依然喜欢玩老游戏，经典的CS1.6游戏是很纯粹的枪战游戏，没有那么多花里胡哨的东西，可以获得非常棒的游戏体验，今天小编给朋友们讲讲在Win11系统里如何正常运行CS1.6游戏。

Windows11打不开CS1.6怎么办？

CS1.6对Win10兼容性比较好，所以Win11用户在打开游戏前先勾选兼容性就可以运行游戏了。

如果是CS1.5可能就没办法了，毕竟太旧啦，部分电脑显卡驱动不兼容，显示会存在一些异常。

怎么设置兼容性？

1、在电脑上右键点击该游戏图标，在弹出菜单中选择“属性”的菜单项。

2、接下来在打开的属性窗口中点击“兼容性”的选项卡。然后点击“运行兼容性疑难解答”的按钮。当然也可以直接勾选以兼容模式运行程序。不确定兼容哪个系统就点击“运行兼容性疑难解答”。

3、这时就会打开程序兼容性疑难解答的窗口，在窗口中点击“尝试建议的设置”快捷链接。

4、然后在打开的测试程序的兼容设置窗口，会自动的为应用设置兼容设置，我们点击“测试程序”看一下应用是否可以正常运行就可以了。

以上就是win11通过设置兼容性来运行CS1.6游戏的方法，希望能够帮助到大家哦。

这里还要给大家推荐一个玩CS1.6游戏对战的平台。

win11打不开windowsdefender怎么办？windows11安全中心打不开

win11打不开windowsdefender怎么办？windows11安全中心打不开

win11打不开windowsdefender怎么办？很多升级了Win11系统的用户们发现更新了之后，系统自带的defender安全中心点击没有反应打不开了，那遇到这个问题要怎么处理呢？一起来看下详细的解决方法吧。

方法一：

管理员模式打开 powershell 输入：

1） Set-ExecutionPolicy Unrestricted

1） Get-AppxPackage -AllUsers | Foreach {Add-AppxPackage -disableDevelopmentMode -Register “$（$_.InstallLocation）AppxManifest.xml”}

管理员模式打开 powershell 输入：

Get-AppxPackage Microsoft.SecHealthUI -AllUsers | Reset-AppxPackage

方法二：

打开设置→应用→应用和功能→Windows 安全中心→高级选项→重置（如果此应用仍无法正常运行，请重置，这会删除此应用的数据）。然后就可以正常打开安全中心了。

我们今天的关于Windows11打印体验的改进_打印功能更完善和win11打印机的分享已经告一段落，感谢您的关注，如果您想了解更多关于JS利用window.print()实现网页打印功能、Win11怎么添加打印机？Windows11系统添加打印机步骤、Win11怎么玩CS1.6游戏？Windows11打不开CS1.6怎么办？、win11打不开windowsdefender怎么办？windows11安全中心打不开的相关信息，请在本站查询。

本文标签：

上一篇Windows 11新文件传输进度指示器能显示在任务栏中（windows 11新文件传输进度指示器能显示在任务栏中吗）

下一篇TranslucentTB 在Windows 11中仍然有效，需要小修复（windowtranslucentstatus）

相关文章