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>