vue print打印多出一页

### Vue Print 打印多出一页的解决方案

在处理Vue项目中的打印功能时，遇到打印区域高度不确定而导致多余空白页的情况较为常见。对于票据页面这种需要遍历生成的内容，设置固定的打印区域高度显然不可取。

为了有效解决这一问题，建议采用动态计算打印区域高度的方法[^1]：

// 动态调整打印区域高度函数
function adjustPrintAreaHeight() {
    const printContainer = document.querySelector('.print-container');
    
    // 获取所有票券的高度总和并加上一定的间距作为缓冲
    let totalHeight = Array.from(printContainer.children).reduce((acc, item) => acc + item.offsetHeight + 20, 0);
    
    // 设置容器最小高度防止内容太少时出现问题
    if (totalHeight < window.innerHeight * 0.8) {
        totalHeight = window.innerHeight * 0.8;
    }
    
    printContainer.style.height = `${totalHeight}px`;
}

此方法通过JavaScript获取所有待打印元素的实际渲染高度，并据此设定`.print-container`类对应的DOM节点的高度属性值。这样做不仅能够确保每张票据都能被完整打印出来，还能避免因未指定或错误估计高度而产生的额外空白页现象。

另外值得注意的是，在选择第三方库来辅助实现更复杂的打印逻辑时，可以考虑使用专门针对Vue框架设计且具有良好社区反馈和支持度较高的插件，比如[vue3-print-nb][^2] 或者 [Vue-Iframe-Print][^3]。这些工具提供了更加灵活方便的功能接口用于定制化开发需求的同时也减少了自行编写大量底层代码的工作量。