使用window.print()打印指定的一个vue 组件

在想打印一个web页面的时候,会用到window.print()。默认会打印当前document内容,样式/图片还有<body>里面的html标签.一般我们打印当前页面,不会是整个页面,而只是打印当前页面部分内容而已。一般是写样式,打印之前把不需要打印的标签通过display:none隐藏掉。
如果东西不多也可以这样做,但是如果要打印其他页面,还是得重新写一下这样的隐藏完了还得显示回来,有点麻烦。这时候就想,能不能只打印一个组件这个组件里面的内容都是我们要打印的东西。于是有了封装一个打印组件的想法。

思路是这样的,通过一个iframe 把当前需要打印的组件内容给到iframe的body，样式呢，我们就拿当前document里面的样式。因为vue组件用的也是当前页面的样式,当运行npm run dev（npm run serve）的时候,css-loader /style-loader 会把组件的样式打包到document的head标签下页面。

所以就可以这样写 PrintView.vue

<template>
  <div class="print">
    <iframe id="iframe" style="display: none;"></iframe>
  </div>
</template>
<script>
export default {
  name: "print",
  props: {
    html: {
      type: String,
      default: ""
    }
  },
  watch: {
    html(val) {
      if (val) {
        this.setBodyHtml(val);
      }
    }
  },
  methods: {
    setBodyHtml(html) {
      const document = window.document;
      const iframe = window.frames[0];
      iframe.document.head.innerHTML = document.head.innerHTML; // 获取当前文档的头部给iframe
      iframe.document.body.innerHTML = html; // 把传过来的html给iframe <body>

       //   打印
      iframe.window.print();
  }
};
</script>

组件中的iframe默认不显示的,因为不需要看到它,打印预览有电脑的打印预览.

然后通过props下的html这个属性接收需要打印的组件的html.通过watch监听html的变化,当有变化我们就调用自定义的
setBodyHtml方法打印,这个方法也很简单,把当前页面的头部样式给到当前组件的iframe,把需要打印的html给
到当前组件的iframe<body> 通过调用iframe.window.print();打印当前组件。

window.print()打印效果

这样会有一个问题,重新获取到内容的iframe,它自己需要重新加载css跟img,有时候会出现需要打印的组件样式不对或者图片不显示的问题。所以在打印之前还需要监听下iframe加载的图片跟样式是否加载完成.

所以组件完整的写法是这样

<template>
  <div class="print">
    <iframe id="iframe" style="display: none;"></iframe>
  </div>
</template>
<script>
export default {
  name: "print",
  props: {
    html: {
      type: String,
      default: ""
    }
  },
  watch: {
    html(val) {
      if (val) {
        this.setBodyHtml(val);
      }
    }
  },
  methods: {
    setBodyHtml(html) {
      const document = window.document;
      const iframe = window.frames[0];
      iframe.document.head.innerHTML = document.head.innerHTML; // 获取当前文档的头部给iframe
      iframe.document.body.innerHTML = html; // 把传过来的html给iframe头部

      // 图片和样式加载完成
      Promise.all([this.loadStyle(), this.loadImage()]).then(res => {
        //   打印
        iframe.window.print();
      });
    },
    loadStyle() {
      const iframe = window.frames[0];
      const styles = iframe.document.head.getElementsByTagName("style"); // <style>
      const links = iframe.document.head.getElementsByTagName("link"); // <link>
      let arrs = [];
      arrs = arrs.concat(...styles, ...links);

      return new Promise((resolve, reject) => {
        for (let i = 0; i < arrs.length; i++) {
          arrs[i].onload = function() {
            if (i === arrs.length - 1) {
              console.log("style 样式加载完成");
              resolve("style 样式加载完成");
            }
          };
        }
      });
    },
    loadImage() {
      const iframe = window.frames[0];
      const imgs = iframe.document.body.getElementsByTagName("img"); // <img>
      
      return new Promise((resolve, reject) => {
        for (let i = 0; i < imgs.length; i++) {
          imgs[i].onload = function() {
            if (i === imgs.length - 1) {
              console.log("img 加载完成");
              resolve("img 加载完成");
            }
          };
        }
      });
    }
  }
};
</script>

通过loadStyle与loadImage这两个方法,别找到iframe中的样式和图片. 样式会有两种,一种是head的<style>标签
打包生产的项目里,样式是一个css文件,所以还需要找到<link>标签.通过Promise.all() 当图片和样式onload完成后
就可以打印了.

用的时候需要打印的页面引入 PrintView组件

<print-view :html="printHtml" />

需要打印的组件打上ref属性,例如ref="print",当点击打印按钮的时候,

this.printHtml = this.$refs.printElement.innerHTML;

这样就把需要打印的组件传到我们打印组件的iframe,调出打印面板.

打印图

至于打印成功不成功,只能通过肉眼判断,因为你这个电脑可能没连打印机也是有可能的.

打印效果图

要打印的这个图呢，只是页面上的一个组件，而不是完整的页面。当点击打印按钮，会弹出一个dialog，显示出要打印的组件，然后指定打印的组件内容。