时间戳

首页 > 解决方案 > 在Vuejs上打印组件背景颜色？

javascript - 在Vuejs上打印组件背景颜色？

问题描述

我在使用 Vue.js 设置样式的组件上打印背景时遇到问题。

我的 JS Fiddle 可以在以下位置找到：https ://jsfiddle.net/9Lwekx4g/

我的 HTML 看起来像：

  <div id="bocks" v-bind:style="{backgroundColor: bgcol}">
  </div>

背景样式按预期工作。默认颜色应该是红色，这是加载页面时的外观。但是，当您在 Chrome 上打印屏幕时，背景颜色为白色。

我知道如果我将背景颜色设置为!important然后它会显示在打印屏幕上。但是，如果我想多次更改颜色，例如在changec函数上，这将成为一个问题。

标签： javascriptvue.js

解决方案

这不是 [Vue.js] 相关问题。
您不应在浏览器中强制打印背景颜色和图像。

但是，这是一种修复它的方法，我不推荐。

.foo {
  width: 200px;
  height: 200px;
  background: red;
  -webkit-print-color-adjust: exact;
}
<div class="foo"></div>

有关此属性的更多信息 (MDN)

推荐阅读