Vue使用Print插件实现页面打印功能/打印列表

Vue使用Print插件实现页面打印

示例

官网地址可以下载最新版
官网
下载 npm 安装

npm install print-js --save

npm安装时将库导入项目(main.js)

 import print from 'print-js'

首先，我们需要在页面上包含Print.js库和样式(这个可以不用)

 <script src="print.js"></script>
 <link rel="stylesheet" type="text/css" href="print.css">

vue页面使用方法

	//参数名 : 值
  printJS({
    printable: ``,
    type: "html",
    targetStyles: ["*"],
    globalStyles: true,
    mediaPrint: false,
    noPrintSeletot: "",
  });

打印列表案例

<!-- 打印弹框 -->
<el-dialog title="打印" :visible.sync="visiblePrint" width="60%">
  <print ref="print" :childData="printData" :feet="true"></print>
  <span slot="footer" class="dialog-footer">
    <el-button @click="visiblePrint = false">取 消</el-button>
    <el-button type="primary" @click="confirmPrint">确 定</el-button>
  </span>
</el-dialog>

打印组件

<template>
  <div class="table">
    <div :id="`printJS-html${childData.merchant_id}`">
      <div style="line-height:60px;font-size:28px;text-align:center;font-weight: bold;">驿站送货单</div>
      <div class="print-note">
        <div>站点名称:大厦大厦,截止时间:2022-08-21,订单数5</div>
        <div style="text-align:right">配送时间:2022-08-01 17:00-18:00</div>
      </div>
      <div class="print-note">
        <div>详细地址:大厦大厦,截止时间:2022-08-21</div>
      </div>
      <!-- 驿站具体清单 -->
      <table border="1" cellpadding="0" cellspacing="0">
        <tr class="row-item">
          <th>短编号</th>
          <th>收货人</th>
          <th>详细地址</th>
          <th>联系方式</th>
          <th>配送方式</th>
          <th>商品数量(件)</th>
          <th>下单时间</th>
          <th>订单号</th>
        </tr>
        <tr class="row-item" v-for="(item, index1) in [childData]" :key="index1">
          <td>{{ index1 + 1 }}</td>
          <td>{{ item.create_time }}</td>
          <td>{{ item.stall_no }}</td>
          <td>{{ item.merchant_name }}</td>
          <td>{{ item.merchant_mobile_phone }}</td>
          <td>{{ item.type == 1 ? '水费' : '电费' }}</td>
          <td>{{ item.money }}</td>
          <td>{{ item.source }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  // name: "cl",
  components: {},
  props: {
    childData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {
    //返回的数据
    console.log(this.childData);
  },
  methods: {
    onPrint() {
      printJS({
        printable: `printJS-html${this.childData.sub_type}`,
        type: 'html',
        targetStyles: ['*'],
      });
    },
  },
};
</script>
<style scoped>
div[id*='printJS-html'] {
  /* width: 800px; */
  width: 100%;
  background: #ffffff;
  font-size: 14px !important;
  box-sizing: border-box;
  color: #000;
}
div[id*='printJS-html'] table {
  /* width: 500px; */
  width: calc(100% - 4px);
  text-align: center;
  font-size: 14px !important;
  box-sizing: border-box;
}
div[id*='printJS-html'] .foot {
  display: flex;
  line-height: 20px;
  font-size: 14px !important;
}
.line {
  width: 100px;
  display: inline-block;
  border-bottom: 1px solid #000;
}
.print-note {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding-bottom: 10px;
}

.print-note div {
  width: 100%;
}
.row-item {
  line-height: 30px;
}
</style>

具体实现

//打印
const visiblePrint = ref(false);
const printData = ref({});
const print = ref(null);
function handlePrint() {
  visiblePrint.value = true;
}
function confirmPrint() {
  print.value.onPrint();
}

下面主要介绍一下我们要用的打印方法printJS();
printJS()将接受一个对象作为参数，下面表格的参数则为该对象的属性,通过控制属性值来控制打印;

参数 默认值 说明
printable: null 文档来源：pdf或图像的url，html元素的id或json数据的对象
type: PDF 可打印类型。可用的打印选项包括：pdf，html，image，json和raw-html。
header: null 用于HTML，Image或JSON打印的可选标头。它将放在页面顶部。此属性将接受文本或原始HTML
headerStyle: ‘font-weight：300;’ 要应用于标题文本的可选标题样式
maxWidth: 800 最大文档宽度（像素）。根据需要更改此项。在打印HTML，图像或JSON时使用。
css: null 这允许我们传递一个或多个应该应用于正在打印的html的css文件URL。值可以是包含单个URL的字符串，也可以是包含多个URL的数组。
style: null 这允许我们传递一个字符串，该字符串应该应用于正在打印的html。
scanStyles: true 设置为false时，库不会处理应用于正在打印的html的样式。使用css参数时很有用。
targetStyle: null 默认情况下，在打印HTML元素时，库仅处理某些样式。此选项允许您传递要处理的样式数组。例如：[‘padding-top’，‘border-bottom’]
targetStyles: null 与targetStyle相同，这将处理任何一系列样式。例如：[‘border’，‘padding’]，将包括’border-bottom’，‘border-top’，‘border-left’，‘border-right’，‘padding-top’等。你也可以传递[’*']来处理所有样式
ignoreElements: [] 接受打印父html元素时应忽略的html的id数组。
properties: null 在打印JSON时使用。这些是对象属性名称。
gridHeaderStyle: ‘font-weight：bold;’ 打印JSON数据时网格标题的可选样式。
gridStyle: ‘border: 1px solid lightgray; margin-bottom: -1px;’ 打印JSON数据时网格行的可选样式
repeatTableHeader: true 在打印JSON数据时使用。设置为时false，数据表标题仅显示在第一页中。
showModal: null 启用此选项可在检索或处理大型PDF文件时显示用户反馈
modalMessage: ‘Retrieving Document…’ 当向用户显示的消息showModal被设定为true。
onLoadingStart: null 加载PDF时要执行的功能
onLoadingEnd: null 加载PDF后要执行的功能
documentTitle: ‘Document’ 打印html，image或json时，它将显示为文档标题。如果用户尝试将打印作业保存为pdf文件，它也将是文档的名称。
fallbackPrintable: null 打印pdf时，如果浏览器不兼容（检查浏览器兼容性表），库将在新选项卡中打开pdf。这允许您传递要打开的不同pdf文档，而不是传递给printable的原始文档。如果您在备用pdf文件中注入javascript，这可能很有用。
onPdfOpen : null 打印pdf时，如果浏览器不兼容（检查浏览器兼容性表），库将在新选项卡中打开pdf。可以在此处传递回调函数，这将在发生这种情况时执行。在您想要处理打印流程，更新用户界面等的某些情况下，它可能很有用。
onPrintDialogClose: null 关闭浏览器打印对话框后执行回调功能
onError: error => throw error 发生错误时要执行的回调函数。
base64: false 在打印作为base64数据传递的PDF文档时使用
honorMarginPadding(不建议使用): true 这用于保留或删除正在打印的元素的填充和边距。有时这些样式设置在屏幕上很棒，但在打印时看起来很糟糕。您可以通过将其设置为false来删除它。
honorColor(不建议使用) : false 要以彩色打印文本，请将此属性设置为true。默认情况下，所有文本都将以黑色打印。
font(不建议使用): ‘TimesNewRoman’ 打印HTML或JSON时使用的字体
font_size(不建议使用): ‘12pt’ 打印HTML或JSON时使用的字体大小
imageStyle (不建议使用): ‘width:100%;’ 打印图像时使用。接受包含要应用于每个图像的自定义样式的字符串。
frameId: null print.js会将要打印的内容复制到一个新的Frame中,此参数是frame的id值