vue打印指定DOM节点和打印隐藏的dom节点

成功案例

在页面里打印指定表单内容

准备插件

这里需要用到jQuery.print.js和jQuery两个插件。
因为print.js的限制，目前官方支持的jQuery版本如下如图所示：https://www.npmjs.com/package/jQuery.print

下载地址

1. jQuery.print.js
2. jQuery-3.1.1 可以自己选择版本

方法一：直接CDN外链引用

<!--jquery插件-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- print插件-->
<script src="https://cdn.bootcdn.net/ajax/libs/jQuery.print/1.6.2/jQuery.print.min.js"></script>

方法二：命令行引用和本地文件引用

引入jQuery

1、使用npm命令安装（安装指定版本的jquery）

npm install jquery@3.1.1 --save /* 全局安装 */

2、根目录下找到vue.config.js文件，在开头添加webpack引入

const webpack = require('webpack')  //添加webpack

3、vue.config.js文件，module.exports对象里找到 configureWebpack,添加plugins的内容

 configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        jquery: "jquery",
        "window.jQuery": "jquery"
      })
    ],
  },

4、在main.js 入口文件全局引入jQuery

import $ from 'jquery'; // 全局引入jQuery

5、重新编译项目使修改生效

npm run dev & npm run serve

引入jQuery.print.js

1、下载js
https://www.bootcdn.cn/jQuery.print/
或者
https://cdn.bootcdn.net/ajax/libs/jQuery.print/1.6.2/jQuery.print.js
2、将js保存至项目里面

3、在main.js里面全局注册jQuery.print.js

jQuery.print 必须放在 jquery 后面

import $ from 'jquery'; // 引入jQuery
import "@/assets/js/jQuery.print"; // 顺序必须在jquery下面

打印指定DOM节点

jquery.print.js的教程如下：

• github教程地址：https://github.com/DoersGuild/jQuery.print
• npm教程地址：https://www.npmjs.com/package/jQuery.print

1、给需要打印的DOM节点绑定id属性printRoot，名称可以自己选择

 <div id="printRoot">  我是打印节点的内容 </div>

2、在method里创建打印函数

// 打印
    printGuide() {
      var html = $("#printRoot").clone(); // 这里的#printRoot 就是上一步命名的id
      $("#printRoot").print({
        iframe: true, // 是否使用一个iframe来替代打印表单的弹出窗口，true为在本页面进行打印，false就是说新开一个页面打印，默认为true
        globalStyles: true, // 是否包含父文档的样式，默认为true
        debug: false,
        importCSS: true,
        printContainer: true,
        operaSupport: false
      });
    }

3、设置点击事件，触发打印

<div @click="printGuide">
  <span>打印导诊单</span>
</div>

4、效果

打印隐藏DOM节点

方法：就是在打印DOM节点外层嵌套一个div，设置outerContainer的display:none;，然后在打印之前设置display:block;，打印完成之后再设置dispaly:none;
1、外层嵌套div

<div id="outerContainer" > // 不能用行内样式写display，不然后面修改不生效
    <div id="printRoot">  我是打印节点的内容 </div>
</div>

2、将外层div设置display：none;

#outerContainer { 
  display: none; // 正式环境不能注释
}

3、打印时先显示外层DIV，打印完成之后，再隐藏外层DIV

// 点击打印导诊单
printGuide() {
  document.getElementById('outerContainer').style.display = 'block'; // 打印前显示dom节点
  var html = $("#printRoot").clone(); // 这里的#printRoot 就是上一步命名的id
  $("#printRoot").print({
    iframe: true, // 是否使用一个iframe来替代打印表单的弹出窗口，true为在本页面进行打印，false就是说新开一个页面打印，默认为true
    globalStyles: true, // 是否包含父文档的样式，默认为true
    debug: false,
    importCSS: true,
    printContainer: true,
    operaSupport: false
  });
  document.getElementById('outerContainer').style.display = 'none'; // 打印后隐藏dom节点
},

4、效果