vue项目中-打印页面中部分区域的内容

在项目的开发中遇到了点击打印，需要打印页面中部分的表格，实现方式如下

首先将需要打印的内容包裹起来：例如

 <div id="subOutputRank-print">
    <single-table :columns="columns" :tableData="tableData"></single-table>
</div>

当点击打印的时候，执行下面的方法：

 // 打印
            printContent(e){
                let subOutputRankPrint = document.getElementById('subOutputRank-print');
                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;
            },

效果如下：

好了，这样就实现了打印页面的部分区域