// 打印表格printFn() {this.isPrint = truethis.$nextTick(() => {let printHtml = document.getElementById('table').innerHTML// document.querySelector('body').style.width = width.clientWidth + 'px'// document.querySelector('#app').style.width = width.clientWidth + 'px'// let printHtml = document.getElementById("table").innerHTML;// console.log(printHtml);// window.document.body.innerHTML = printHtml;window.document.body.innerHTML = printHtmlwindow.print()location.reload()})}
这是我打印表格的代码，
一开始打印的时候表格的样式会被重置成默认样式，查了百度之后发现要加媒体查询，也就是把本来的css代码写到@media print {}中
@media print {//以下是我用到的样式#table {width: 100%;display: flex;justify-content: center;align-items: center;}#tabs-2 {height: 100vh;display: flex;justify-content: center;align-items: center;}.table-wr {width: 100%;border-collapse: collapse;border: 1px solid #ccc;}th,table {border: 1px solid #ccc;}td {width: 120px;border: 1px solid #ccc;flex-wrap: wrap;}td > div {padding: 8px 4px;.tit {font-size: 14px;}.val {padding-left: 4px;font-size: 14px;}.text {font-size: 14px;}}.person_content {}table {border-collapse: collapse;}td {text-align: left;}tr {height: 40px;}}
一开始我用的是less嵌套写的css样式，这样打印还是不会生效，后来发现了这个@media print {}中不能用嵌套写，只能用普通的css写法，这样问题就解决了
