html - 内容宽度在打印屏幕中不起作用

Question

我正在尝试打印下面的收据页。它在浏览器中如下所示。中间的内容（白色背景）具有固定的宽度并居中。我正在使用角度 7 和引导程序 4

当我尝试使用 window.print() 从我的代码中打印它时，内容的宽度无法正确显示。在打印模式下，白色背景中的内容占据页面的整个宽度。下面是它在 chrome 打印预览中的显示方式。我希望打印预览与浏览器中的类似。

以下是我正在使用的 scss

1. 对于灰色背景

    .background {
         height:100%;
         width: 100%;
         background-color: #E9E8EA; //Grey
         margin: 0px;
         padding: 0px;  
    }
   

2. 对于中间的收据内容

     .content {    
           height: 85.33%; 
           width: 35.95%; 
           border-radius: 5px;
           background-color: #FFFFFF; //white  
           padding-top: 1.47%;
           padding-bottom: 2.21%;    
       }
   

如果有人给我这个想法，我将不胜感激。

Answer 1

你需要在你的css中使用@page或。@media print

https://www.sitepoint.com/css-printer-friendly-pages/