📅 最后修改于: 2023-12-03 15:30:38.626000 🧑 作者: Mango
新的ECMAScript 6(ES6)有许多令人激动的新功能，其中之一就是更好地支持Web开发和打印技术。本文将介绍几个使用ES6进行页面打印的方法。
在页面上打印时，我们通常需要为打印定制样式。ES6中有一种新的CSS样式规则，称为@page。这个规则允许我们为页面打印定义样式。
@media print {
@page {
size: A4 portrait;
margin: 10mm 10mm 10mm 10mm;
}
}
此样式表声明了一些在打印机上印出这个页面时所应用的样式。size属性定义了纸张大小，portrait表示纵向，landscape表示横向。margin属性定义页面正文相对于纸张边框的距离。
ES6中引入了一个新的API，称为Window.print()，它允许我们控制打印。在打印浏览器的页面时，默认情况下打印的是整个Html页面，但是在某些情况下，我们只想打印页面上的部分内容，或者需要自定义打印格式。这就需要使用Window.print()控制打印。
function printContents(id) {
var frame = document.frames ? document.frames[id] : document.getElementById(id);
var content = frame.contentWindow.document.body.innerHTML;
var printWindow = window.open('', '', 'height=400,width=800');
printWindow.document.write('<html><head><title>打印页面</title>');
printWindow.document.write('</head><body>');
printWindow.document.write(content);
printWindow.document.write('</body></html>');
printWindow.document.close();
setTimeout(function() {
printWindow.print();
}, 500);
return false;
}
这段代码使用Window.print()创建了一个新的窗口，将页面内容拷贝进新的窗口中，最后再调用Window.print()实现打印。该代码可以为需要打印的页面定制打印格式。
ES6中还可将HTML内容转换成PDF文件打印。
function exportPDF() {
const element = document.getElementById('pdf-div');
html2pdf()
.from(element)
.save();
}
这段代码使用了一个名为html2pdf的库，将指定ID为pdf-div的元素转换为PDF文件并下载，从而使页面打印兼容多种文件类型。
总体而言，ES6为页面打印技术带来了许多新的功能，例如定制打印格式等，从而大大提高了Web打印技术的效率和易用性。