vue前端调用 window.print()打印指定区域

html部分

1. 打印按钮

 <i-button size="small" @click="printClick">打印按钮</i-button>

2. 指定区域在div标签上添加id属性

 <div id="test" >
       ...打印的内容
 </div>

打印css样式配置（根据自己需求配置即可）：

@media print{
            @page{
                /*margin: 22px 10px 16px;*/
                size: A4 portrait; /*  */
                overflow:auto;
                size:portrait;
                margin: 0;
                padding: 20px;
            }
            html{
                overflow: visible;
            }
            body {
                height: auto !important;
                zoom: 0.9;
            }
            tr{
                /* 行被截断时自动换行 */
                page-break-before: always;
                page-break-after: always;
                page-break-inside: avoid;
            }
        }

jquery部分
方法一：直接调用打印页面弹窗

printClick() {
// 获取原有页面的html内容
 let oldStr = window.document.body.innerHTML;
 // 根据id获取打印的html内容
 let newStr = document.getElementById('test').innerHTML;
 // html页面内容赋值
 window.document.body.innerHTML = newStr;
 // 调用打印弹窗
 window.print();
 // 页面内容还原
 //window.document.body.innerHTML = oldStr;
 // 打印完成后重新加载页面
 window.location.reload()
 }

方法二：把打印内容嵌入到iframe页面，调用打印弹窗

printClick() {
  const printContentHtml = document.getElementById('test').innerHTML
  const iframe = document.createElement('iframe')
  iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;')
  document.body.appendChild(iframe)
  iframe.contentDocument.write(printContentHtml)
  iframe.contentDocument.close()
  iframe.contentWindow.print()
  document.body.removeChild(iframe)
 }

方法三：打开新页面打印

printClick() {
   const printContentHtml = window.document.body.innerHTML;
   const printPage = window.open()
   printPage.document.write(printContentHtml)
   printPage.document.close()
   printPage.print()
   printPage.close()
 }