需求： 在一张A4纸上打印出所有内容。
实现方式： 通过window.open() 打开新的窗口， 将待打印的dom插入到新页面， 调用 window.pringt()是实现打印功能，通过媒体查询设置横向打印等样式。
- 如何引入样式
styles.forEach((style) => {
const link = win.document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', style);
win.document.getElementsByTagName('head')[0].appendChild(link);
});
在 public 文件夹下新建css文件？
- 如何设置横向打印？
在css文件中加入样式
@media print {
@page {
size: A4 landscape;
}
}
- 打印时不展示页眉页脚，设置margin: 0;
@media print {
@page {
size: A4 landscape;
margin: 0;
}
}
- 火狐浏览器打印路演不显示表格的边框（但是体验还是不怎么好，以后改版的时候哦可能尝试用div布局）
table {
border-spacing: 0;
border-collapse: collapse;
}
table td {
box-shadow: 0 1px #000 inset;
}
- 在一A4纸上一页展示完内容
将页面dom的高度和宽度按照 598:842的比例设置
.test-view {
box-sizing: border-box;
width: 1675px;
height: 1184px;
padding: 20px;
}
