网页打印时样式不显示，如何实现所见即打印？

网页打印与页面显示不一致的解决之道

在网页设计的过程中，经常会遇到打印时样式不显示的问题。本文将介绍如何解决这一难题，让页面所见即打印。

问题：网页打印样式不显示

在使用 html、css 等技术设计网页时，会遇到打印时样式不显示的问题。例如，使用 bootstrap 等框架中的样式，在页面显示正常，但打印时却是一片空白或出现乱码。

造成这一问题的原因之一是浏览器在打印时会加载与页面内容相关的外部文件，例如 css 文件。如果这些文件与网页跨域，则浏览器出于安全考虑会拒绝加载。

解决方案：使用 dom2img 截图

为了解决跨域问题，我们可以使用 dom2img 技术将网页截成一张图片，然后打印这张图片。

具体步骤如下：

1. 使用 dom2img 库，例如 html2canvas 或 puppeteer，将网页截成一张图片。
2. 将生成的图片保存在服务器或本地。
3. 在打印页面时，使用 标签或 javascript 代码将图片加载到页面中。
4. 打印页面时，将自动打印截图的图片。

示例代码

以下示例代码使用 html2canvas 库将网页截图：

html2canvas(document.body).then(function(canvas) {
  var imgURL = canvas.toDataURL('image/png');
  // 将图片保存在服务器或本地
  // 加载图片并打印
});

通过使用 dom2img 技术，即使跨域资源也不能阻止网页打印样式显示正确。如此，我们便能实现所见即打印的效果。

以上就是网页打印时样式不显示，如何实现所见即打印？的详细内容，更多请关注其它相关文章！