vue+element-ui前端使用print-js实现打印功能(可自定义样式)

让我来为你详细讲解“vue+element-ui前端使用print-js实现打印功能(可自定义样式)”的完整攻略。

简介

在前端开发中，有时需要提供页面的打印功能。本篇攻略将介绍如何使用print-js插件实现可自定义样式的打印功能，使用的前端框架是Vue，UI组件库是Element-UI。

安装依赖

首先，我们需要安装print-js依赖：

npm install print-js --save

创建打印组件

在Vue中，我们可以根据需要创建一个打印组件。给组件起名为PrintComponent，该组件提供一个print方法进行打印操作，该方法可以接收打印页的内容和打印区域的选择器参数。

<template>
  <div ref="printArea">
    <!-- 打印内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    print(content, selector) {
      // 如果没有传入选择器参数，则默认打印整个页面内容
      selector = selector || "body";

      const options = {
        printable: content,
        type: "html",
        header: null, // 页眉内容
        footer: null, // 页脚内容
        css: "/static/css/print.css", // 打印时使用的样式表位置
        style: null,
        scanStyles: true,
        showModal: true,
        onError: (error) => {
          console.error(error);
        }
      };

      // 调用print-js插件打印内容
      this.$print(selector, options);
    }
  }
};
</script>

其中，printable参数指定需要打印的内容。在printable参数中，我们可以传入一个可打印节点的选择器或者一个HTML字符串。在我们的示例中，我们将会使用具体的页面元素选择器，在下一步中体现出来。

设计打印样式表

print-js插件支持使用外部样式表，这对于我们自定义样式来说非常方便。在示例中，我们将使用了一个外部的print.css样式表，这样我们的打印内容就可以让用户通过样式表来进行自定义。

/* 打印样式表 print.css */
body * {
  visibility: hidden;
}

/* 需要打印的区域 */
#printArea,
#printArea * {
  visibility: visible;
}

/* 隐藏打印页眉页脚 */
@media print {
  .no-print {
    display: none;
  }

  body {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

在上面的样式表中，我们首先将所有元素都隐藏。之后，我们指定了需要打印的区域，即print.js指定的打印区域。最后，我们还使用了一些特殊的CSS规则来隐藏打印页面的页眉和页脚等元素。

在Vue页面中调用打印组件

在我们的示例中，我们将使用一个Button组件，并在点击按钮时进行打印操作。

<template>
  <div>
    <el-button @click="printPage">打印页面</el-button>
    <PrintComponent ref="printComponent"/>
  </div>
</template>

<script>
import PrintComponent from "@/components/PrintComponent";

export default {
  components: {
    PrintComponent
  },
  methods: {
    printPage() {
      const content = ".print-content"; // 具体需要打印的区域选择器
      this.$refs.printComponent.print(content);
    }
  }
};
</script>

在<script>标签中，我们首先导入打印组件，接着，我们创建了一个打印按钮，并绑定了printPage方法。在事件处理函数中，我们获取了需要打印的区域选择器，这里使用.print-content选择器作为示例。最后，我们通过$refs调用PrintComponent组件中的print方法进行打印操作。

到此，我们的打印功能便完成了！

示例1：自定义页眉和页脚

我们可以使用打印组件提供的header和footer参数来自定义打印页眉和页脚。例如，我们现在需要在打印页眉中加入我们的网站名称和logo，打印页脚中加入打印时间，如下所示：

const options = {
  printable: content,
  type: "html",
  header: `
    <div class="header">
      <img src="http://www.example.com/logo.png" alt="Site Logo" width="100" height="100"/>
      <p class="title">Example Site</p>
    </div>
  `,
  footer: `
    <div class="footer">
      <p class="print-time">打印时间：${new Date().toLocaleString()}</p>
    </div>
  `,
  css: "/static/css/print.css",
  style: null,
  scanStyles: true,
  showModal: true,
  onError: (error) => {
    console.error(error);
  }
};

在打印区域选择器之上，我们新增了header和footer参数。其中header参数中的HTML字符串中，我们添加了一个网站logo和标题。footer参数中的HTML字符串中，我们添加了一个打印时间。到此，在打印的页面中，我们就可以看到自定义的页眉和页脚了。

示例2：使用Vue组件作为打印内容

我们可以使用Vue中的组件作为打印内容。在本示例中，我们创建了一个组件PrintContentComponent，并使其为打印内容。

<!-- PrintContentComponent.vue -->
<template>
  <div class="print-content">
    <h3>财务报表</h3>
    <p>收入：{{ income }}</p>
    <p>支出：{{ expense }}</p>
    <p>利润：{{ profit }}</p>
  </div>
</template>

<script>
export default {
  props: {
    income: {
      type: Number,
      default: 0
    },
    expense: {
      type: Number,
      default: 0
    },
    profit: {
      type: Number,
      default: 0
    }
  }
};
</script>

在上面的代码中，我们创建了一个PrintContentComponent，其中包含三个props：income、expense和profit，代表收入、支出和利润。这里的数据是可定制的，为了方便，我们将数据做成了属性。

现在，我们需要将该组件作为打印内容。我们可以使用Vue的$mount方法，将该组件添加到PrintComponent组件中的打印区域之中。

在打印组件中加入代码：

import PrintContentComponent from "@/components/PrintContentComponent";

export default {
  components: {
    PrintContentComponent
  },
  methods: {
    printPage() {
      const selector = "#app";

      const contentComponent = new Vue({
        render: (h) => h(PrintContentComponent, {
          props: {
            income: 1000,
            expense: 500,
            profit: 500
          }
        })
      }).$mount().$el;

      const content = contentComponent.outerHTML;

      this.$refs.printComponent.print(content, selector);
    }
  }
};

在上面的代码中，我们通过import语句导入了PrintContentComponent组件，并在打印组件的methods中加入了printPage方法。该方法中，创建了一个Vue实例，并将PrintContentComponent组件以及需要传递的数据放入其中。随后，我们对该组件进行了渲染，并使用$mount方法进行挂载。这时，我们就可以使用该组件的$el属性获取组件的HTML节点，并使用outerHTML将该节点的HTML字符串也取出来。最后，我们将$refs.printComponent.print方法的参数进行修改，将内容字符串和选择器传入，便可以进行打印。

总结

至此，我们完成了Vue+ElementUI前端使用print-js实现打印功能并可自定义样式的攻略。在使用print-js插件时，我们首先需要安装插件，然后创建打印组件，并在该组件中提供打印方法。我们可以使用外部样式表来进行样式的自定义，同时，也可以使用header和footer参数来定制打印页眉和页脚。在打印内容方面，我们可以使用节点选择器或Vue组件进行打印内容的定制。