CSS Chrome不支持 css @page

在本文中，我们将介绍https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS @page规则在Chrome浏览器中的不支持情况，并给出解决方案。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

CSS @page规则简介

https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS @page规则用于定义打印文档时的页面样式。这些样式可以用于设置页面大小、页面方向、页眉、页脚等。 @page规则在打印或以打印预览方式查看网页时生效。

Chrome对CSS @page规则的支持情况

然而，值得注意的是，目前的Chrome浏览器版本对CSS @page规则的支持存在一些限制。具体而言，Chrome并不支持通过CSS样式表来修改页面的大小、页面方向和页眉页脚等。

解决方案1：使用JS生成PDF

一种解决方案是使用JavaScript生成PDF文档。通过使用JavaScript库如jsPDF，我们可以在网页上操作DOM并将其导出为PDF文件。这样，我们可以完全控制页面布局和样式。

下面是使用jsPDF生成PDF的一个简单示例：

// 引入jsPDF库
import jsPDF from 'jspdf';

// 创建一个新的PDF实例
const doc = new jsPDF();

// 添加文本
doc.text('Hello World!', 10, 10);

// 保存PDF文件
doc.save('example.pdf');

使用这个方法，我们可以自定义页面的大小、方向和页眉页脚等样式。

解决方案2：使用打印样式表

另一种解决方案是使用打印样式表。打印样式表是一个额外的CSS样式表，用于在打印时应用到网页上。通过为打印样式表设置适当的样式，我们可以模拟出自定义页面大小、方向和页眉页脚等效果。

下面是一个示例打印样式表：

@media print {
  /* 设置页面大小和方向 */
  @page {
    size: A4 landscape;  /* 页面横向排列 */
    margin: 0;
  }

  /* 设置页眉页脚 */
  @top-left {
    content: "页眉左侧内容";
  }

  /* 设置页眉页脚 */
  @top-right {
    content: "页眉右侧内容";
  }

  /* 设置页眉页脚 */
  @bottom-left {
    content: "页脚左侧内容";
  }

  /* 设置页眉页脚 */
  @bottom-right {
    content: "页脚右侧内容";
  }
}

通过在网页中引入这个打印样式表，我们可以在打印预览页面中看到自定义的页面样式。