css打印如何去掉空白页,vue打印会多出一页空白页的坑

在vue项目上需要打印功能，使用了vue-print-nb这个打印组件。但是在使用的时候一直会有一个问题：就是打印的时候总会在结尾多出一页空白页。

经过一系列踩坑排查终于发现，原来是因为我的样式上对html，body，设置了高度100%。

html, body, #app {

margin: 0;

padding: 0;

height: 100%;

}

在打印的时候，虽然我们肉眼认为是空白的，但是系统认为是有内容。然后可能是打印的某些未知原因，100%会导致高度超出一页纸的高度一点点(我自己测试好像是大概30像素左右，数据不准确仅供参考)，所以导致这多出来的这部分空白内容顶到了下一页去。这就是打印的时候会多出空白页的原因。

问题解决：

很简单，只需要将高度100%这个属性值去掉即可。但是问题又来了，在其他页面又需要保留100%这个高度，那这不就互相矛盾了吗？而且在vue项目中又是单页面项目，这里又是针对html和body标签做的css样式。

为了解决问题我想到了在打印的时候用js动态的把html和body上面的高度属性去除。但是经过实验，我发现：js动态修改的办法对打印没有效果。即调用打印组件的时候会忽略js的执行(我猜测原因是这样)，那怎么办呢？

于是我想到了一个骚操作：既然打印的时候js动态调整html样式无效，那我能不能一开始不设置这个高度而是在页面显示的时候去设置这个高度呢？这样打印的时候能解决问题，页面显示的时候也没问题，两全其美。

所以我就在vue的入口页面：index.html上的结尾加了js的代码，动态修改html和body的css属性，经过测试可行。

标题

let margin = "0";

let padding = "0";

let height = "100%";

let html = document.getElementsByTagName("html")[0];

html.style.margin = margin;

html.style.padding = padding;

html.style.height = height;

let body = document.getElementsByTagName("body")[0];

body.style.margin = margin;

body.style.padding = padding;

body.style.height = height;

let app = document.getElementById("app");

app.style.margin = margin;

app.style.padding = padding;

app.style.height = height;