vue项目使用Print.js插件实现PDF文件打印

一、官网介绍

Print.js 主要是为了帮助我们直接在应用程序中打印 PDF 文件，无需离开界面，也不使用嵌入。对于用户不需要打开或下载 PDF 文件，而只需要打印它们的独特情况。
例如，当用户请求打印在服务器端生成的报表时，这很有用的一种情况。这些报告以 PDF 文件的形式发回。在打印这些文件之前，无需打开它们。Print.js提供了一种在我们的应用程序中打印这些文件的快速方法。

官网地址：https://printjs.crabbly.com/

二、安装使用

使用 npm 进行安装

npm install print-js --save

引用

 import printJS from 'print-js'

三、项目示例

vue文件

<template>
  <div id="app">
    <div id="divPrint" class="mainbox print">
      <!-- <div style="font-size: 25px; margin-top: 80px" align="center">
        整改通知单
      </div> -->
      <div align="center" style="margin: 0; padding: 0; width: 100%">
        <table>
          <tr style="border: none">
            <td colspan="2">工程项目：xx</td>
            <td style="text-align: right; padding-left: 10px;" colspan="2">编号：xx</td>
          </tr>
          <tr style="border: none">
            <td colspan="2">整改单位：xx</td>
            <td style="text-align: right; padding-left: 10px;" colspan="2">编号：xx</td>
          </tr>
          <tr style="border: none">
            <td colspan="2">整改内容：xx</td>
            <td style="text-align: right; padding-left: 10px;" colspan="2">编号：xx</td>
          </tr>
        </table>
      </div>
    </div>
    <div style="margin-top: 20px; text-align: center">
      <button @click="print()">pdf打印</button>
    </div>
  </div>
</template>

<script>
import printJS from "print-js";
export default {
  name: "printing",
  data() {
    return {};
  },
  methods: {
    print() {
      printJS({
        printable: "divPrint", // 标签元素id
        type: "html", // 打印类型
        header: "整改通知单", // '表单名称',
        targetStyles: ["*"],
        style: "@page {margin:0 10mm};", // 可选-打印时去掉眉页眉尾
        ignoreElements: ["no-print"], // 接受打印父 html 元素时应忽略的 html id 数组。
        properties: null,
      });
    },
  },
};
</script>

<style lang="scss">
#app {
  width: 100%;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;

  .mainbox {
    width: 100%;
    margin: 0 auto;
  }
}
</style>

点击打印按钮后，出现PDF预览。

最后再点击打印即可实现PDF文件打印。