vue3+ts--实际开发之--table表格打印或者保存

一、 问题页面效果

1. 实现功能：自定义table表格包含行和列的合并，要求保持css样式不懂能直接导出打印成A4
2. 常见问题：能实现生成图片导出唤起打印窗口，但是会出现文字分列被分割问题，如下两种被分割情况（文字被分割或者行被分割）：

二、 Print.js相关属性 和使用

1. 介绍

官网https://printjs.crabbly.com

一个小的javascript库，帮助从web打印和保存。在应用程序中直接打印PDF文件而编写的，不需要离开界面，也不需要使用嵌入。

2. 安装引入

使用npm安装：

  npm install print-js --save

使用纱线安装：

  yarn add print-js

引入：

import printJS from "print-js";

3. PrintJS参数配置表

浏览器翻译的 也可以自己去官网查看https://printjs.crabbly.com

三 、解决关于分页文字或者表格被分割问题，解决后如下：

⚠️ 注意 ⚠️ ：此方法只适用于原声table使用，因为禁止行内分页属性不能绝对定位使用，一般的el-table等组件里边有使用定位

1. 设置一个自定义table

  <!-- html -->
  <el-button @click="generateImage">导出唤起打印</el-button>
  <table id="tableDataDayin">
    <tr>
      <th rowspan="2">Name</th>
      <th colspan="2">Details</th>
    </tr>
    <tr>
      <th>Age</th>
      <th>Address</th>
    </tr>
    <tr>
      <td>John</td>
      <td>30</td>
      <td rowspan="2">New York</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>25</td>
    </tr>
    <tr v-for="index in 16" :key="index">
      <td>Jane</td>
      <td>25</td>
      <td>
        New减肥还得好几个返回结核杆菌快递发货个i哦怕u分9外俄文i哦额UI日哦额回个i哦怕u分9外俄文i哦额UI日哦额回复{{
          index
        }}
      </td>
    </tr>
    <tr>
      <td>John</td>
      <td>30</td>
      <td rowspan="3">New York</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>25</td>
    </tr>
    <tr>
      <td>John</td>
      <td>30</td>
      <td rowspan="2">New York</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>25</td>
    </tr>
  </table>

<!-- css -->
#tableDataDayin {
  border-collapse: collapse;
  width: 100%;
}

#tableDataDayin th {
  background-color: #f2f2f2;
  border: 1px solid #ddd;
}

#tableDataDayin td {
  border: 1px solid #ddd;
  padding: 8px;
}

#tableDataDayin th,
#tableDataDayin td {
  text-align: left;
  page-break-inside: avoid !important; //主要就是这个属性 禁止行内分页
}

#tableDataDayin tr:nth-child(odd) {
  background-color: #f7f7f7;
}

#tableDataDayin tr:nth-child(even) {
  background-color: #f2f2f2;
}

2. 运行后效果：

3. 添加导出打印js

<!-- js -->
<script setup lang="ts">
import printJS from "print-js";

const generateImage = () => {
  printJS({
    printable: "tableDataDayin", //table表格 id
    type: "html", // 类型
    targetStyles: ["*"],
  });
};
</script>

4.解决后导出打印效果

四、 element-ui中使用 待更新…