Vue-cli实现打印页面内容功能

Vue-cli实现打印页面内容功能

导出

export function print(content, w = null, h = null) {
    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'>.print{width:100%;height:100%}...等等</style>";
    myWindow.document.write(content + style);
    myWindow.focus();
    myWindow.document.close();     //关闭输出流, 显示选定的数据
    myWindow.print();   //打印当前窗口
    return myWindow;
}

引入

import { print } from "@/print函数的位置";

HTML

<div class="dayin" id="print">我是需要打印的内容</dev>
<div>
    <button @click.passive="doPrint">打印</button>
</div>

methods中

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