根本原因是PDF导出工具（如wkhtmltopdf、Electron打印、html2canvas）不解析linear-gradient等CSS图像值，仅支持可栅格化或可嵌入资源；Chrome打印和Obsidian导出跳过渐变计算，Puppeteer未启用printBackground:true时连背景色都清空。
为什么CSS渐变在PDF导出中会消失
根本原因不是浏览器不支持，而是大多数PDF导出工具（如wkhtmltopdf、Electron打印、html2canvas）压根不解析linear-gradient这类CSS图像值——它们只认「可栅格化」或「可嵌入」的资源。Chrome的window.print()和Obsidian导出直接跳过渐变计算；Puppeteer若未启用printBackground: true，连背景色都清空，更别说渐变。
用canvas动态绘制渐变并转为data-url背景
这是目前兼容性最强、无需服务端介入的前端方案。核心思路：把渐变“画”进canvas，再转成base64图片塞进background-image。
- 先创建一个
<canvas>，宽高设为所需背景区域尺寸（比如按钮宽160px × 高35px） - 用
ctx.createLinearGradient()定义方向与色标，调用addColorStop()添加颜色节点 -
ctx.fillStyle = gradient+ctx.fillRect(0, 0, width, height)完成绘制 - 调用
canvas.toDataURL('image/png')生成URI，赋给目标元素的style.backgroundImage
示例关键代码：
const canvas = document.createElement('canvas');
canvas.width = 160; canvas.height = 35;
const ctx = canvas.getContext('2d');
const grad = ctx.createLinearGradient(0, 0, 160, 0);
grad.addColorStop(0, '#e68865');
grad.addColorStop(1, '#ea6731');
ctx.fillStyle = grad;
ctx.fillRect(0, 0, 160, 35);
document.querySelector('.join').style.backgroundImage = `url(${canvas.toDataURL('image/png')})`;
导出前强制触发重绘并禁用CSS压缩干扰
即使用了canvas方案，仍可能因构建工具（如Vue CLI的CSS minimizer）移除background-image声明，或Electron渲染时机问题导致图片未加载完成就截屏。
立即学习“前端免费学习笔记（深入）”；
- 确保在调用PDF导出前，已执行
canvas.toDataURL()并写入DOM —— 可加await new Promise(r => setTimeout(r, 10))微任务等待渲染队列 - 对Webpack/Vite项目，在CSS压缩配置中排除
background-image相关规则，或像Vue旧版那样加/*! autoprefixer: off */注释保护 - 若用Puppeteer，必须设置
printOptions: { printBackground: true }，否则所有background-*全被忽略
注意矢量退化与DPI陷阱
canvas生成的是位图，放大后必然模糊；但对PDF导出而言，这不是bug而是trade-off——真正要警惕的是DPI不匹配导致的色带（banding）或尺寸错位。
- 避免用
devicePixelRatio盲目缩放canvas，PDF导出通常按96dpi逻辑渲染，固定canvas.width/height比目标CSS像素更可靠 - 渐变色标建议用HEX或RGB，避开HSL/HWB等可能被转义失败的格式
- 若导出内容含大量渐变模块，优先考虑服务端方案（如PuppeteerSharp预渲染+SVG渐变），避免前端反复绘图拖慢响应
最易被忽略的一点：很多工具（包括Obsidian默认导出）会主动剥离data:协议的background-image，必须验证最终生成的HTML里该属性是否真实存在且未被过滤。
