vue中打印多一页空白页
解决方法：打印元素的margin-top为零就就好了
·
在使用vue-print-nb这个打印插件的时候，发现打印多一页空白页
第一种原因可能是打印元素的margin-top不为零
解决方法：
打印元素的margin-top为零就就好了
第二种原因是样式上对html，body，设置了高度100%
在打印的时候，虽然我们肉眼认为是空白的，但是系统不认为。以为有内容。然后可能是打印的某些未知原因。100%会导致高度超出一页纸的高度一点点（我自己测试好像是大概30像素左右，数据不准确仅供参考），所以导致这多出来的这部分空白内容顶到了下一页去。这就是打印的时候会多出空白页的问题。
问题解决：
很简单。将高度100%这个属性值去掉即可。
但是问题又来了。在其他页面又需要保留100%这个高度。那这不就互相矛盾了吗？而且在vue项目中又是单页面项目。这里又是针对html和body标签做的css样式。
于是我想到了在打印的时候用js动态的吧html和body上面的高度属性去除。但是经过一系列的实验。我发现。js动态修改的办法对打印没有效果。即调用打印组件的时候会忽略js的执行（我猜测原因是这样）那怎么办呢？
于是我想到了一个骚操作：既然打印的时候js动态调整html样式无效。那我能不能一开始不设置这个高度而是在页面显示的时候去设置这个高度呢？这样打印的时候问题解决。页面显示的时候也没问题。两全其美。
于是我就在vue的入口页面。index.html上的结尾加了js的代码。动态修改html和body的css属性，经过测试可行。问题解决
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>标题</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<script>
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;
</script>
</html>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献11条内容
所有评论(0)