Vue页面打印，解决退出页面失效的问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u010398650/article/details/80243520

VUE页面打印

在使用vue开发的时候，涉及到页面的打印功能，页面的按钮可能需要多次打印，可能取消之后重新操作，在使用对 document.body.innerHTML 重新赋值的方法可能导致打印之后需要重新刷新页面，很不安逸，对其重新改造了下

打印的代码

/**
 * 打印页面数据
 * @param {String} content 
 * @param {*} w 
 * @param {*} h 
 */
export function print(content, w = null, h = null) {
    // Fixes dual-screen position                         Most browsers      Firefox
    const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left;
    const dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top;

    const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
    const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
    w = +w === 0 ? width : w;
    h = +h === 0 ? height : h;
    const left = ((width / 2) - (w / 2)) + dualScreenLeft;
    const top = ((height / 2) - (h / 2)) + dualScreenTop;
    var myWindow = window.open("", "打印", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=" + w + ", height=" + h + ", top=" + top + ", left=" + left);
    var style = "<style type='text/css'>table.gridtable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color: #666666;border-collapse: collapse;}table.gridtable th {border-width: 1px;padding: 8px;border-style: solid;border-color: #666666;background-color: #dedede;}table.gridtable td {border-width: 1px;padding: 8px;border-style: solid;border-color: #666666;background-color: #ffffff;}</style>";
    myWindow.document.write(content + style);
    myWindow.focus();
    myWindow.document.close();     //关闭document的输出流, 显示选定的数据
    myWindow.print();   //打印当前窗口
    return myWindow;
}

这里是把内容放到一个新的windows窗口中，这样使用打印就不会影响，本来的页面了

使用方式

把使用的一些代码，页都贴出来，都很简单

import { print } from 'xxxx';

doPrint () {
    var windows = print(document.getElementById('printf').innerHTML);
    windows.close();
 },

<el-row id="printf" v-show="false">
    <table class="gridtable">
         <tr>
             <th>员工姓名</th><th>性别</th><th>年龄</th><th>工龄</th>
             <th>薪资</th><th>银行卡号</th><th>开户行</th><th width="60px">签字</th>
         </tr>
         <tr v-for="v in tableData">
             <td>{{v.xxx}}</td>
             <td>{{v.xx}}</td>
             <td>{{v.xxx}}</td>
             <td>{{v.xxx}}</td>
             <td>{{v.xxx}}</td>
             <td>{{v.xxx}}</td>
             <td>{{v.xxx}}</td>
             <td></td>
         </tr>
     </table>
 </el-row>