vue-pure-admin打印功能：网页内容打印与PDF导出

杭云瑗Ward

791人浏览 · 2025-09-05 02:32:37

杭云瑗Ward · 2025-09-05 02:32:37 发布

vue-pure-admin打印功能：网页内容打印与PDF导出

【免费下载链接】vue-pure-admin 全面ESM+Vue3+Vite+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端）项目地址: https://gitcode.com/GitHub_Trending/vu/vue-pure-admin

痛点场景：为什么需要专业的打印功能？

在日常企业管理系统开发中，打印功能是一个看似简单却极其重要的需求。你是否遇到过以下问题：

表格数据需要导出为纸质文档存档
报表和图表需要高质量打印输出
PDF文档需要在线预览和打印
打印样式与网页显示不一致
复杂的表单数据打印时格式错乱

vue-pure-admin 提供了一套完整的打印解决方案，支持表格、图表、图片、PDF等多种内容的打印与导出，让打印功能变得简单而专业。

核心打印工具：Print 类详解

vue-pure-admin 的核心打印功能封装在 src/utils/print.ts 中，提供了一个功能强大的 Print 类：

interface PrintFunction {
  extendOptions: Function;
  getStyle: Function;
  setDomHeight: Function;
  toPrint: Function;
}

const Print = function (dom, options?: object): PrintFunction {
  // 初始化配置
  this.conf = {
    styleStr: "",
    setDomHeightArr: [],
    printBeforeFn: null,
    printDoneCallBack: null
  };
  // ... 实现细节
};

核心特性对比表

特性	描述	优势
样式继承	自动复制页面所有样式	保持打印与显示一致性
DOM处理	智能处理表单元素状态	确保打印内容准确性
Canvas转换	自动将Canvas转为图片	支持图表打印
回调机制	提供前后打印回调	灵活的流程控制
高度自适应	动态设置DOM高度	避免打印截断问题

实战应用：三种常见打印场景

1. 表格数据打印

<script setup lang="ts">
import { ref } from "vue";
import Print from "@/utils/print";

const printRef = ref();

const print = () => {
  Print(printRef.value.getTableDoms().tableWrapper).toPrint;
};
</script>

<template>
  <el-button type="primary" @click="print">打印表格</el-button>
  <pure-table ref="printRef" :data="tableData" :columns="columns" />
</template>

2. 多种内容选择打印

<script setup lang="ts">
import { ref } from "vue";
import Print from "@/utils/print";

const value = ref("1");

const options = [
  { value: "1", el: ".el-table", label: "Table" },
  { value: "2", el: ".echart", label: "Echart" },
  { value: "3", el: ".img", label: "Image" }
];

function onPrint() {
  const el = options.filter(v => v.value === value.value)[0]?.el;
  Print(el).toPrint;
}
</script>

3. PDF文档打印

<script setup lang="ts">
import { ref } from "vue";
import VuePdfEmbed from "vue-pdf-embed";

const pdfRef = ref<any>();

const onPrint = () => {
  pdfRef.value.print();
};
</script>

<template>
  <vue-pdf-embed ref="pdfRef" :source="pdfSource" />
  <el-button @click="onPrint">打印PDF</el-button>
</template>

高级配置：自定义打印选项

Print 类支持丰富的配置选项，满足各种复杂需求：

// 高级配置示例
Print(".print-content", {
  styleStr: `
    @media print {
      .no-print { display: none !important; }
      body { margin: 0; padding: 20px; }
    }
  `,
  setDomHeightArr: [".dynamic-height-element"],
  printBeforeFn: ({ doc }) => {
    // 打印前回调，可以修改打印文档
    doc.title = "业务报表 - " + new Date().toLocaleDateString();
  },
  printDoneCallBack: () => {
    // 打印完成后回调
    console.log("打印完成");
  }
}).toPrint;

打印样式优化指南

CSS媒体查询控制打印样式

/* 打印专用样式 */
@media print {
  /* 隐藏不需要打印的元素 */
  .no-print { display: none !important; }
  
  /* 调整页面边距 */
  body { margin: 0; padding: 20px; }
  
  /* 确保背景色和文字颜色 */
  * { -webkit-print-color-adjust: exact; }
  
  /* 避免分页打断重要内容 */
  .keep-together { page-break-inside: avoid; }
  
  /* 控制分页 */
  .page-break { page-break-before: always; }
}

表格打印优化配置

const { columns, dataList, print, cellStyle, rowStyle, headerCellStyle } = 
  useColumns(printRef);

// 单元格样式
function cellStyle({ column: { property }, rowIndex }) {
  if (property === "id") {
    return rowIndex < 3 
      ? { background: "#87baf9" } 
      : { background: "#87e8de" };
  }
}

// 表头样式
function headerCellStyle({ columnIndex }) {
  return columnIndex === 0 
    ? { background: "#f3b2d0" } 
    : { background: "#fafafa" };
}

// 行样式
function rowStyle({ rowIndex }) {
  return rowIndex % 2 === 1 
    ? { background: "#ffa39e" } 
    : { background: "#91d5ff" };
}

常见问题解决方案

问题1：打印内容截断

解决方案：

Print(dom, {
  setDomHeightArr: [".long-content", ".dynamic-height-element"]
}).toPrint;

问题2：Canvas图表无法打印

解决方案： Print 类自动将 Canvas 转换为图片，确保图表正常打印。

问题3：表单数据状态丢失

解决方案： Print 类会自动处理 input、select、textarea 等表单元素的状态保持。

问题4：样式不一致

解决方案：

Print(dom, {
  styleStr: `
    @media print {
      /* 自定义打印样式 */
      body { font-size: 12pt; }
      table { width: 100%; border-collapse: collapse; }
    }
  `
}).toPrint;