网页打印不显示样式？如何让打印内容与屏幕一致？

网页打印不显示样式的解决之道

当您发现自己打印的网页与屏幕上显示的效果大相径庭时，可能是遇到了打印样式未显示的问题。这种现象通常是由以下原因引起：

• 打印机无法识别您正在使用的 CSS 样式。
• 网页包含跨域资源，导致浏览器在打印时无法加载它们。

解决方案：

1. 尝试使用 CSS 媒体查询：
   在 CSS 文件中使用 @media print 媒体查询，专门针对打印输出设置样式。确保将您希望在打印中显示的样式包含在该媒体查询中。
2. 生成图像并打印：
   对于包含跨域资源的网页，您可以使用 JavaScript 库（例如 dom2img）将页面截屏为图像，然后打印该图像。

示例代码：

// 使用 dom2img 库将页面截屏为图像
domtoimage.toJpeg(document, { quality: 1 })
  .then(function (dataUrl) {
    // 创建一个新的 Image 对象，并将其 src 设置为图像数据 URL
    var img = new Image();
    img.src = dataUrl;

    // 打印图像
    window.print();
  });

通过遵循这些步骤，您可以确保您的网页在打印时看起来与屏幕上显示的样子一致，从而获得所见即打印的效果。