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(); },