vue实现页面打印的四种方法

vue实现页面打印的四种方法

• 一、原始window.print()
• 二、指定区域的打印
• 三、生成 iframe 然后打印(推荐)
• 四、使用第三方库 print.js

一、原始window.print()

• 优点:便捷打印
• 缺点:不可打印指定的区域

//打印按钮
 <el-button class="printBox" type="primary" @click="printFn()" >打印</el-button>
 ...
 //打印方法
 printFn(){
 	window.print()
 }

二、指定区域的打印

• 优点:可以指定dom元素的打印
• 缺点:打印完可能造成页面部分不能用,如:表单不可输入,按钮触发不生效问题

<div id="printContent">
...打印区域...
</div>

 printFn() {
 	//printContent为打印区域所绑定的id
	let newstr = document.getElementById("printContent").innerHTML;
	let oldstr = document.body.innerHTML;
	document.body.innerHTML = newstr;
	window.print();
	document.body.innerHTML = oldstr;
	return false;
}

三、生成 iframe 然后打印(推荐)

• 优点:可指定区域打印
• 缺点:可能造成页面样式的丢失

<div id="printContent">
	 <el-table
        :data="subject"
        :stripe="false"
        style="width: 100%;"
        :header-row-class-name="addClass"
        :span-method="arraySpanMethod"
        :row-style="cellStyle"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        border
      >
      ...表格内容
	  /el-table>
</div>

 printFn() {
      var iframe = document.getElementById("print-iframe");
      if (!iframe) {
        var el = document.getElementById("printContent");
        iframe = document.createElement("IFRAME");
        var doc = null;
        iframe.setAttribute("id", "print-iframe");
        iframe.setAttribute(
          "style",
          "position:absolute;width:0px;height:0px;left:-500px;top:-500px;"
        );
        document.body.appendChild(iframe);
        doc = iframe.contentWindow.document;
        //自定义样式
        doc.write(
          '<style media="print">@page {size: auto;margin: 0mm;}</style>'
        );
        // 添加表格样式(解决边框丢失问题)
        doc.write(
          '<style media="print">table {border-collapse: collapse; width: 100%;} th, td {border: 1px solid #dfe6ec; padding: 8px 0;}</style>'
        );
        //解决出现页眉页脚和路径的问题
        doc.write("<div>" + el.innerHTML + "</div>");
        doc.close();
        iframe.contentWindow.focus();
      }
      setTimeout(function() {
        iframe.contentWindow.print();
      }, 50); //解决第一次样式不生效的问题
      if (navigator.userAgent.indexOf("MSIE") > 0) {
        document.body.removeChild(iframe);
      }

    }

四、使用第三方库 print.js

• 优点:可指定区域打印,功能多
• print.js官网

// 下载后引入
import Print from "@/utils/print.min.js";

 printFn() {
      setTimeout(function() {
        Print({
          printable: "printPage",
          type: "html",
          scanStyles: false,
          targetStyles: ["*"],
          style:
            "table {border-collapse: collapse; width: 100%;} th, td {border: 1px solid #dfe6ec; padding: 4px 0;}" // 可选-打印时去掉眉页眉尾
        });
      }, 500);
    },