css打印经验总结

css 打印单样式

<div>
	<!-- 打印单模板 -->
	<!-- 给div加 page-wrapper 样式，使 list 中的每一项都单独分页，使用a5纸张 -->
    <div v-for="(page, i) in list" :key="i" class="page-wrapper printer-a5">
    	<!-- 打印内容 -->
    	<div class="page-content" style="font-family: 楷体">
    		打印单详情
    	</div>
    </div>
</div>

@page {
  /* 页边距 1mm，去掉默认的页眉页脚 */
  margin: 0.1cm;
}

.page-wrapper {
  padding: 1cm;		/* 将页面的边距转移到这里，10mm */
  width: 100%;
  height: 100%;
  page-break-after: always;		/* 强行分页 */
  /* page-break-before: always; */
}
.page-wrapper:last-child {
  /* 最后一个元素避免分页 */
  page-break-after: avoid;
}

/* 打印内容 */
.page-content {
  height: 100%;
  position: relative;
}

/* 通过css代码，将页面大小设置为 A5 纸张 */
.printer-a5 {
/*标准 A5 纸张大小为 148mm X 210mm，但是前面为了去掉默认的页眉页脚，设置了页面距为0.1cm，所以这里要减去这0.1cm*/
  width: 207mm !important;
  height: 145mm !important;
  /* transform: rotate(90deg); */
  /* transform-origin: 74mm 74mm; */
}
/* 通过css代码，将页面大小设置为 A4 纸张 */
.printer-a4 {
  width: 210mm !important;	/* 标准 A4 纸张大小为 210mm X 297mm */
  height: 297mm !important;
}

html, body {
  /* 将三个属性归零 */
  padding: 0;
  margin: 0;
  border: 0;
  width: 100%;
  height: 100%;
}

.bgcWhite {
  background-color: #fff;
  /* 兼容打印背景颜色 */
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}

打印背景颜色

在打印单中，我们经常需要打印背影颜色或背景图案等，但通过css代码设置的背景颜色等不会被打印出来。

两种解决方案：

1. 配置 -webkit-print-color-adjust: exact。看如下代码：

   .bgcWhite {
     background-color: #fff;
     /* 兼容打印背景颜色 */
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
   

2. 也可以直接在打印弹窗中将更多设置中的背景图形勾选上，如下：

JS 打印API

在页面中，我们可以通过调用 window.print() 来调出打印弹窗。
但是在实际开发中，我们经常会遇到需要配置打印模式的需求，例如在当前端口打印或在新窗口打印。如下：

当前窗口打印

使用 iframe 加载打印单模板的页面，然后长宽给他设置为0。如下：

// 打印之前清空iframe
if (this.timer) {
  clearTimeout(this.timer);
}

this.timer = setTimeout(() => {
  const iframes = document.querySelectorAll('iframe');
  for (let i = 0; i < iframes.length; i++) {
    document.body.removeChild(iframes[i]);
  }
}, 1000 * 60 * 5);
// 创建 iframe
const iframe = document.createElement('iframe');
iframe.src = url;
iframe.style = 'width:0;height:0';
document.body.appendChild(iframe);

然后在打印单模板页面调用打印接口

window.print()

还可以进行一层封装，确保页面加载完成后再调用

export const autoPrint = (delayed = 2000) => {
  setTimeout(() => {
    window.print()
    console.log('version:', version)
  }, delayed)
}

新窗口打印

// 直接打开新的标签页跳转到打印单模板的页面
window.open(url);

然后在打印单模板页面调用打印接口

window.print()

还可以进行一层封装，确保页面加载完成后再调用

export const autoPrint = (delayed = 2000) => {
  setTimeout(() => {
    window.print()
    console.log('version:', version)
  }, delayed)
}

加入配置功能

if (isInner) {
  const iframe: any = document.createElement('iframe');
  iframe.src = url;
  iframe.style = 'width:0;height:0';
  document.body.appendChild(iframe);
} else if (printModule === 'out') {
  window.open(url);
}

还可以配置打印单模板是 A4 还是 A5 页面等等。