CSS渐变生成的点阵网格在Chrome/Firefox导出PDF时显示异常如何解决？

方案1：使用SVG矢量背景（最稳定，完全满足打印要求） #

渐变背景导出PDF时出现模糊、摩尔纹的核心原因是浏览器会将渐变光栅化为位图处理，受DPI配置影响极大，而SVG是矢量图形，导出PDF时会保留矢量属性，不会出现像素化问题，也能精确控制物理尺寸。

你可以直接使用内联SVG作为背景，实现和原有渐变完全一致的点阵效果，代码如下：

:root{
  --c: grey;
  --point-size: 1pt;
  --cell-size: 0.5cm;
}
.dotted{
  /* 内联SVG：每个0.5cm*0.5cm的格子左上角绘制1pt大小的灰色点，其余区域透明 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.5cm' height='0.5cm'%3E%3Crect width='1pt' height='1pt' fill='grey'/%3E%3C/svg%3E");
  background-size: var(--cell-size) var(--cell-size);
  background-repeat: repeat;
  /* 强制浏览器打印时保留背景样式，禁用压缩优化 */
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  image-rendering: crisp-edges;
}

如果需要调整点的位置（比如放在格子中心），只需要修改SVG中rect的x、y属性即可，所有尺寸都使用物理单位，完全符合打印时0.5cm重复一次的要求。

方案2：优化现有渐变实现 #

如果要保留渐变写法，可以通过以下配置降低渲染误差：

1. 添加打印样式强制清晰渲染，在现有CSS中补充以下属性：

.dotted{
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  image-rendering: crisp-edges;
}

2. 微调渐变停止点，避免浏览器对同位置颜色切换的近似计算误差：

.dotted{
  background-color: var(--c);
  background-image:
  linear-gradient(
    white,
    white calc(var(--cell-size) - var(--point-size) - 0.001cm),
    white calc(var(--cell-size) - var(--point-size)),
    var(--c0) calc(var(--cell-size) - var(--point-size)),
    var(--c0) calc(var(--cell-size) + 0.001cm)),
  linear-gradient(90deg,
    white,
    white calc(var(--cell-size) - var(--point-size) - 0.001cm),
    white calc(var(--cell-size) - var(--point-size)),
    var(--c0) calc(var(--cell-size) - var(--point-size)),
    var(--c0) calc(var(--cell-size) + 0.001cm));
  background-size: var(--cell-size) var(--cell-size);
  background-repeat: repeat;
}

导出PDF的必选配置 #

无论使用哪种方案，导出时都需要确认以下设置：

• Chrome：打印界面勾选「背景图形」选项，缩放选择100%，不要勾选「适应页面宽度」，打印机选择「另存为PDF」
• Firefox：打印界面勾选「打印背景（颜色和图片）」，格式选择PDF，不要勾选「缩放以适应页面」

内容的提问来源于stack exchange，提问作者Dorian