vue3 vben admin 使用 print-js 打印 html 页面

文章目录

• • 概要
  • 效果展示
  • 代码实现
  • 打印可能会遇到的问题

概要

vue3 vben admin 使用 print-js 下载html的一些经验分享。

官网地址：Print.js - Javascript library for HTML elements, PDF and image files printing.

 一些配置项参考：（拉到官网的最下面）

效果展示

以vben admin官网的基础详情页为例

代码实现

1. html内容注意：

1. 打印的内容要有一个容器包裹
2. 该容器要有id标识
3. 打印时的宽度

<template>
  <PageWrapper title="基础详情页" contentBackground>
    <template #extra>
      <a-button type="primary" @click="handlePrint">打印</a-button>
    </template>
    <!-- 1.打印的内容要有一个容器包裹 2.id标识 3.打印时的宽度-->
    <div id="printJS-form" :class="cusWidth">
      <Description
        size="middle"
        title="退款申请"
        :bordered="false"
        :column="3"
        :data="refundData"
        :schema="refundSchema"
      />
      <Divider />
      <Description
        size="middle"
        title="用户信息"
        :bordered="false"
        :column="3"
        :data="personData"
        :schema="personSchema"
      />
      <Divider />

      <BasicTable @register="registerRefundTable" />
      <Divider />
      <BasicTable @register="registerTimeTable" />
    </div>
  </PageWrapper>
</template>

2. ts代码：

一般情况下，vben admin已经将print-js下载好了，可以直接引入使用。如果没有下载，按照官网步骤即可。

1. 先引入

  import printJS from 'print-js';

2. 回调中打印

  const cusWidth = ref('');
  const style = '@page {margin:20px};';

  // 打印
  async function handlePrint() {
    cusWidth.value = 'w800';
    await nextTick();
    await printJS({
      printable: 'printJS-form', // 指定要打印的内容id
      type: 'html', // 指定打印的类型，这里是html
      targetStyles: '*', //指定要应用到打印内容的 CSS 样式。['*'] 是指所有样式
      scanStyles: true, // 布尔值，当设置为 false 时，库不会处理应用于打印内容的样式
      maxWidth: 1000, // 指定打印内容的最大宽度
      documentTitle: '', //指定打印的文档标题
      style,
    });
    cusWidth.value = '';
  }

3. style样式：

<style lang="less" scoped>
  .desc-wrap {
    padding: 16px;
    background-color: @component-background;
  }
  :deep(.vben-basic-title) {
    width: 300px;
  }

  .w800 {
    width: 1000px;
  }
</style>

打印可能会遇到的问题

 1. 名称换行

解决办法：使用深度作用选择器调整样式，给名称足够宽度

<style lang="less" scoped>

  :deep(.vben-basic-title) {

    width: 300px;

  }

</style>

2. 表格滚动条问题

解决办法：去掉表格的scroll属性，canResize设置成false

  const [registerTimeTable] = useTable({

    title: '退货进度',

    columns: refundTimeTableSchema,

    pagination: false,

    dataSource: refundTimeTableData,

    showIndexColumn: false,

    // scroll: { y: 300 },

    canResize: false,

  });

 3. 表格打印不全

解决办法：详细代码见上面提到的 代码实现

1.在需要打印的最外层容器上定义一个类名变量

<div id="printJS-form" :class="cusWidth">

2.点击打印，赋值类名变量，该类名的宽度设置为1000px，打印完成清空该类名变量

  const cusWidth = ref('');

  .w800 {

    width: 1000px;

  }

3.打印之前需要await nextTick，更新之后再去打印，表格就能打印完整了

4. 去掉页眉页脚，包括顶部的日期和名称，以及底部的网址

 

解决办法：设置边距，应用到打印的配置项中。完整代码见上面提到的 代码实现

  const style = '@page {margin:20px};';