css打印经验总结

css打印经验总结

文章目录

• css 打印单样式
• • 打印背景颜色
• JS 打印API
• • 当前窗口打印
  • 新窗口打印
• 加入配置功能

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++) {veChild(iframes[i]);}
}, 1000 * 60 * 5);
// 创建 iframe
const iframe = ateElement('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 = ateElement('iframe');iframe.src = url;iframe.style = 'width:0;height:0';document.body.appendChild(iframe);
} else if (printModule === 'out') {window.open(url);
}

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