html打印时css乱,vue打印局部区域样式CSS错乱不生效

vue打印局部区域样式CSS错乱不生效

vue打印局部区域样式CSS错乱不生效

最近vue项目要实现打印网页中局部区域的要求，但是用下列方式的时候显得样式全部都没有作用上

printContent(){

let subOutputRankPrint = document.getElementById('print'); // 要打印区域的元素id

console.log(subOutputRankPrint.innerHTML);

let newContent =subOutputRankPrint.innerHTML;

let oldContent = document.body.innerHTML;

document.body.innerHTML = newContent;

window.print();

window.location.reload();

document.body.innerHTML = oldContent;

return false;

}

后来折中一下，将打印区域的样式全部写成行间样式，就可以了

如下

打印情况如下

vue打印局部区域样式CSS错乱不生效相关教程