JavaScript设置的Span背景色无法打印及Morris.js图例代码问题

这个问题其实挺常见的——大部分浏览器默认会忽略元素的背景色/背景图来节省打印墨水，但我们可以通过几个实用方法强制让背景色显示在打印件里：

方法1：用CSS媒体查询强制打印背景 #

专门针对打印场景添加CSS规则，让浏览器强制渲染背景样式，这是最直接的解决方案：

@media print {
  #legend span {
    -webkit-print-color-adjust: exact; /* 适配Chrome、Edge、Safari等webkit内核浏览器 */
    print-color-adjust: exact; /* 标准属性，支持Firefox等 */
    background-color: inherit !important; /* 确保背景色优先级足够 */
  }
}

把这段代码加到你的样式表中就行，要是想动态添加，也可以用jQuery实现：

// 动态插入打印专用样式
var printStyle = $('<style>')
  .text('@media print { #legend span { -webkit-print-color-adjust: exact; print-color-adjust: exact; background-color: inherit !important; } }');
$('head').append(printStyle);

方法2：用边框模拟背景色（兼容性拉满） #

如果遇到不支持print-color-adjust的老浏览器，我们可以用宽边框来模拟背景色块——毕竟边框是浏览器一定会打印的元素：

修改你原有的代码，把background-color替换成边框样式：

legendItem.find('span')
  .css('border-left', '20px solid ' + grafico1.options.colors[i]) // 用左边框模拟色块
  .css('width', '0px') // 不需要宽度，边框本身提供视觉宽度
  .css('display', 'inline-block')
  .css('margin-right', '15px')
  .css('float','left')
  .css('padding', '0 5px'); // 加一点内边距让文字和色块更协调

这种方法不需要依赖任何浏览器设置，纯色色块的场景下完全够用。

方法3：让用户手动开启打印背景（临时方案） #

如果只是临时解决问题，可以告诉用户在打印预览里开启"背景图形"选项：

• Chrome/Edge：打印预览界面 → 更多设置 → 勾选"背景图形"
• Firefox：打印预览 → 页面设置 → 勾选"打印背景（颜色和图像）"
• Safari：打印 → 显示详细设置 → 勾选"打印背景"
  不过这个方法需要用户手动操作，不如前两种方法省心。

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