window.print()实现打印功能

使用window,print实现打印功能，页面中使用了vxe-table表格，所以打印出来的表格中带有横向滚动条

想要去掉滚动条，尝试缩放页面比例，使用vue-print-nb都不行，直到最后将vxe-table换成了原生table，奇迹般的好了！！！！！

附上代码：

<div class="print">
        <div class="content">
            <el-row>
                <el-col :span="24" style="text-align: center;background-color: #fdf1d1;">
                    <h1>运维中心井下作业物资发放单(技术组保存)</h1>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="16"><h3>日期：20240309</h3></el-col>
                <el-col :span="8"><h3>单据编号：100006</h3></el-col>
            </el-row>
            <el-row>
                <el-col :span="16"><h3>井号：学70-80</h3></el-col>
                <el-col :span="8"><h3>领用队伍：陕西凯德</h3></el-col>
            </el-row>
            <table>
                <tr>
                    <th>序号</th>
                    <th>物料类型</th>
                    <th>型号规格</th>
                    <th>库存料类型</th>
                    <th>生产厂商</th>
                    <th>作业类型</th>
                    <th>使用类型</th>
                    <th>计量单位</th>
                    <th>发放数量</th>
                    <th>领料地点</th>
                </tr>
                <tr v-for="(item, index) in tableData" :key="index">
                    <td>{{ index + 1 }}</td>
                    <td>{{ item.material }}</td>
                    <td>{{ item.specification }}</td>
                    <td>{{ item.source }}</td>
                    <td>{{ item.factory }}</td>
                    <td>{{ item.category }}</td>
                    <td>{{ item.model }}</td>
                    <td>{{ item.unit }}</td>
                    <td>{{ item.number }}</td>
                    <td>{{ item.location }}</td>
                </tr>
            </table>
            <el-row>
                <el-col :span="3">开单：张元一</el-col>
                <el-col :span="3">审核：王雷</el-col>
                <el-col :span="3">领料：李阳</el-col>
                <el-col :span="3">发料：王星</el-col>
            </el-row>
        </div>
        <Button class="no-print" size="large" type="primary" @click="printDocument">打印</Button>
    </div>

data() {
        return {
            tableData: [
                { material: '抽油泵', source: '修复料', category: '新投', model: '新增', unit: '根', specification: 'φ32', factory: '山东广聚德（修复泵）', number: '1', location: '领6', comments: '' },
                { material: '游动凡尔', source: '新料', category: '复产', model: '更换', unit: '根', specification: '', factory: '', number: '1', location: '领7', comments: '' },
                { material: '游动凡尔总成', source: '新料', category: '措施', model: '更换', unit: '个', specification: '', factory: '', number: '1', location: '领7', comments: '' },
                { material: '游动凡尔总成', source: '新料', category: '措施', model: '更换', unit: '个', specification: '', factory: '', number: '1', location: '领7', comments: '' },
                { material: '游动凡尔总成', source: '新料', category: '措施', model: '更换', unit: '个', specification: '', factory: '', number: '1', location: '领7', comments: '' },
                { material: '游动凡尔总成', source: '新料', category: '措施', model: '更换', unit: '个', specification: '', factory: '', number: '1', location: '领7', comments: '' },
                { material: '游动凡尔总成', source: '新料', category: '措施', model: '更换', unit: '个', specification: '', factory: '', number: '1', location: '领7', comments: '' },
                { material: '游动凡尔总成', source: '新料', category: '措施', model: '更换', unit: '个', specification: '', factory: '', number: '1', location: '领7', comments: '' },
                { material: '游动凡尔总成', source: '新料', category: '措施', model: '更换', unit: '个', specification: '', factory: '', number: '1', location: '领7', comments: '' },
                { material: '游动凡尔总成', source: '新料', category: '措施', model: '更换', unit: '个', specification: '', factory: '', number: '1', location: '领7', comments: '' },
                { material: '游动凡尔总成', source: '新料', category: '措施', model: '更换', unit: '个', specification: '', factory: '', number: '1', location: '领7', comments: '' },
            ],
        }
    }

printDocument() {
            window.print();
        }

.el-row {
    height: 48px;
    line-height: 48px;
}
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid #000;
    padding: 8px;
    text-align: center;
    height: 48px;
}
th {
    background-color: #f2f2f2;
}
.print {
    position: relative;
    .no-print {
        position: absolute;
        top: 0;
        right: 0;
        width: 120px;
        height: 48px;
    }
}
@media print {
    body {
        text-align: center;
    }
    .no-print {
        display: none;
    }
    // thead {
    //     display: table-header-group;
    // }
    // tfoot { 
    //     display: table-footer-group; 
    // }
    // tr { 
    //     page-break-inside: avoid; 
    // }
    // td, th { 
    //     page-break-inside: avoid; 
    //     page-break-after: avoid; 
    // }
}