vue-print-nb реализует функцию печати и шагает в яму

Vue.js

установка и использование

npm install vue-print-nb --save

Глобальное введение в main.js

import Print from 'vue-print-nb'
Vue.use(Print);

Как использовать страницу (другие подробности см. на npmjs.com)

<div id="printMe" >
    <p>打印内容</p>
</div>
<button v-print="'#printMer'">打印</button>

Проблема с заголовком и нижним колонтитулом

При печати и предварительного просмотра, обнаружена, что в заголовках и нижних колонтитулах будут номера страниц, URL-адресов, таких как undefined

  1. Преимущество в том, что это просто и грубо, а недостаток в том, что верхние и нижние поля страницы не существуют, поэтому нет пробелов на верхней и нижней сторонах страницы, а также на верхних и нижних полях страницы. печатное содержимое слишком узкое.

Установите 3 мм, как показано ниже, чтобы скрыть верхний и нижний колонтитулы.

// 打印媒体查询
@media print {
  @page{
      size:  auto;
      margin: 3mm;
	}	
}
  1. Настройки отменяются при предварительном просмотре настроек

Проблема неполного отображения контента при печати

На реальной странице высота недостаточна и некоторый контент скрыт.В это время необходимо отображать содержимое соответствующего блока как скрытое и прокручивать как полное отображение.Скрытое содержимое не будет напечатано при печати, но будет распечатано только содержимое, непосредственно отображаемое на странице.

// 打印媒体查询
@media print {
  @page{
      size:  auto;
      margin: 3mm;
	}
 body{ 
		height:auto;  //在实际页面中高度不够部分内容隐藏了
  }	   
}

Стили исчезают при печати

Основная причина исчезновения стиля написана в стиле печати содержимого и некоторых стилях фреймов, которые не используются.На самом деле это не содержимое iFrame блока печати.Если вы знаете содержание этого фрагмента, вы необходимо печатать, формировать или блокировать.Содержимое Не используйте никакую структуру пользовательского интерфейса и другой внешний контент SCSS или LESS, имя внешнего класса нельзя использовать, и все стили внутри не написаны отдельно в соответствии с адресом стиля, введенным отдельно в соответствии с API Стиль или стиль интерьера

 <div class="box">
    <div id="printTest">
      <div class="print-style">打印的相关内容</div>
    <div>       
 </div>
  <style lang="scss" scoped>
    .box { } //无效
    #printTest { } //无效
 	.print-style { } //写在这里的有效果
  </style>

При печати вам необходимо разбивать страницы в соответствии с содержимым и добавлять водяной знак к содержимому.

При печати, если есть несколько таблиц или несколько блоков контента, вы можете разделить их по расчету и добавить водяные знаки на каждую страницу.Реальная ситуация может быть скорректирована в соответствии с настройками.

<div id="printTest">
    <div class="printPage printMark"  v-for="item in 5" :key="item" >
      打印的相关内容
    </div>
 <div>     

// 打印媒体查询
@media print {
  @page{
      size:  auto;
      margin: 3mm;
   }
  body{ 
	height:auto; 
  }
  .printPage {   
    height: 291mm;   //分页  根据实际
    position: relative; 
    &::before {
        position: absolute; content: 'xx水印'; top:20%; right: 5%;  font-size: 48px; opacity: 0.1;  transform: rotate(30deg);
    }
    &::after {
        position: absolute; content: 'xx水印'; bottom:20%; left: 5%;  font-size: 48px; opacity: 0.1;  transform: rotate(30deg);
    }
  }	
}
Категории