根本原因是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></canvas>，宽高设为所需背景区域尺寸（比如按钮宽160px × 高35px）
• 用ctx.createLinearGradient()定义方向与色标，调用addColorStop()添加颜色节点
• ctx.fillStyle = gradient + ctx.fillRect(0, 0, width, height)完成绘制
• 调用canvas.toDataURL('image/png')生成URI，赋给目标元素的style.backgroundImage

示例关键代码：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

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里该属性是否真实存在且未被过滤。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！