如何在printThis插件中使用背景色？打印页面无法导入背景色

Hey there! Let's get that background color showing up in your printThis output—here are the key fixes you need to try:

• Add print-specific CSS to force background colors
  Most browsers automatically strip background colors when printing to save ink, so you need to override this behavior with CSS. Add these properties to the style of your target print container (#printLayout):

  #printLayout {
    /* For WebKit browsers like Chrome/Safari */
    -webkit-print-color-adjust: exact;
    /* Standard property for Firefox/Edge and modern browsers */
    print-color-adjust: exact;
  }
  

  Make sure this style is either inline on the element or included in the styles that printThis imports (we’ll cover that next).

• Tweak your printThis configuration
  Looking at your current code, you have importCSS: false—this means the plugin won’t pull in external CSS files. If your background color styles are defined in an external stylesheet, flip that to true so those styles are included in the print preview:

  function printThis() { 
    $("#printLayout").printThis({ 
      importCSS: true, // Enable to import external CSS
      importStyle: true, 
      printContainer: true, 
    }); 
  }
  

  If your background colors are set with inline styles on the elements, importStyle: true is already handling that, so you can leave that as-is.

• Double-check browser print settings
  Even with the right CSS and plugin config, some browsers default to hiding background graphics. Have your users check their print preview settings:

  • Chrome: Click "More settings" in the print preview, then check "Background graphics"
  • Firefox: Open "Page Setup" from the print preview, then check "Print Background (colors & images)"
  • Edge: Similar to Chrome, find "Background graphics" under more settings and enable it

内容的提问来源于stack exchange，提问作者Оогий Б.