一、官网介绍

Print.js 主要是为了帮助我们直接在应用程序中打印 PDF 文件，无需离开界面，也不使用嵌入。对于用户不需要打开或下载 PDF 文件，而只需要打印它们的独特情况。

例如，当用户请求打印在服务器端生成的报表时，这很有用的一种情况。这些报告以 PDF 文件的形式发回。在打印这些文件之前，无需打开它们。Print.js提供了一种在我们的应用程序中打印这些文件的快速方法。

官网地址：

二、安装使用

使用 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文件打印预览

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