【Vue】打印自定义HTML表格

道友老李

已于 2024-12-13 14:19:11 修改

阅读量1.4k

点赞数 18

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： html vue.js 前端

于 2024-12-05 08:00:00 首次发布

本文链接：https://blog.csdn.net/u014608435/article/details/144237849

Vue 专栏收录该内容

2 篇文章

订阅专栏

介绍

Vue.js（通常简称Vue）是一个用于构建用户界面的渐进式JavaScript框架。与其它大型前端框架不同，Vue被设计成可以自底向上逐层应用。核心库只关注视图层，易于学习和集成到现有项目中，同时也能够为复杂的单页应用程序（SPA, Single Page Application）提供强大的功能支持。

Vue 的特点

双向数据绑定：Vue使用声明式的语法将DOM元素与JavaScript对象属性进行绑定，使得模型数据的变化自动反映在视图上，反之亦然。
组件化开发：Vue鼓励以组件的形式组织代码，每个组件都有自己的模板、逻辑和样式。这不仅提高了代码的复用性和可维护性，还促进了团队协作。
轻量级且灵活：Vue的核心库体积小，加载速度快；同时它提供了丰富的插件系统和生态系统，允许开发者根据需求选择合适的工具和技术栈。
虚拟DOM：通过使用虚拟DOM，Vue能够在不直接操作真实DOM的情况下高效地更新UI，从而提高渲染性能。
指令系统：Vue提供了一系列内置指令（如v-if、v-for、v-bind等），简化了常见的DOM操作任务。
简洁的API：Vue拥有直观易懂的API设计，降低了学习曲线，使新手也能快速上手。

安装和使用 Vue

CDN 引入

最简单的方式是通过CDN引入Vue：

<!DOCTYPE html>
<html>
<head>
  <title>My Vue App</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          message: 'Hello Vue!'
        }
      }
    }).mount('#app');
  </script>
</body>
</html>

使用 npm 或 yarn 安装

对于更复杂的项目，推荐使用npm或yarn来安装Vue，并结合Webpack、Vite等模块打包工具来进行开发。

# 使用 npm 安装 Vue
npm install vue@next

# 或者使用 yarn
yarn add vue@next

然后可以在项目的入口文件中导入Vue并创建Vue实例：

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

单文件组件 (SFC)

Vue推崇使用单文件组件（Single File Component, SFC），即.vue文件格式，将HTML模板、JavaScript逻辑和CSS样式封装在一个文件中。这种结构有助于更好地管理代码，特别是在大型项目中。

<template>
  <div class="example">
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  name: 'ExampleComponent',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    };
  }
};
</script>

<style scoped>
.example {
  color: #42b983;
}
</style>

Vue CLI 和 Vite

为了加速开发过程，Vue官方提供了两个流行的脚手架工具——Vue CLI 和 Vite。

Vue CLI 是一个命令行工具，可以帮助你快速搭建新的Vue项目，包含了各种预配置选项和插件支持。

# 全局安装 Vue CLI
npm install -g @vue/cli

# 创建一个新的项目
vue create my-project

Vite 是由Vue作者尤雨溪开发的新一代前端构建工具，它利用了ES模块的原生支持来实现极快的冷启动和热更新。Vite同样适用于Vue项目。

# 使用 Vite 创建 Vue 项目
npm create vite@latest my-vue-app --template vue

# 进入项目目录并安装依赖
cd my-vue-app
npm install

# 启动开发服务器
npm run dev

生态系统和社区资源

Vue有一个活跃的社区和丰富的插件生态系统，包括但不限于：

Vuex：状态管理模式和库，帮助管理共享状态。
Vue Router：官方路由管理器，用于实现单页面应用中的导航。
Vue Devtools：浏览器扩展，用于调试Vue应用。
Nuxt.js：基于Vue的更高层次的框架，专注于服务端渲染（SSR）和静态站点生成。

总之，Vue以其简洁性、灵活性和强大的特性赢得了广泛的欢迎，在Web开发领域占据了一席之地。无论是小型个人项目还是大型企业级应用，Vue都能提供良好的解决方案。

自定义打印方法

定义了一个名为saleTrackPrint的JavaScript函数，用于生成并打印一个包含销售跟踪信息的HTML页面。它接受三个参数：data（包含销售跟踪数据的对象）、title（页面标题）和type（未在代码中使用）。

函数签名

export function saleTrackPrint(data, title, type) {

data：包含销售跟踪详细信息的对象。
title：HTML页面的标题。
type：此参数在代码中未被使用。

构建HTML结构

let printStr = "<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'><title>" + title + '</title></head>'

创建了HTML文档的基本结构，并设置了页面的字符编码为UTF-8，以及页面标题。

创建DOM元素与映射表

const div1 = document.createElement('div')
const div = document.createElement('div')
div.id = 'table'
div1.appendChild(div)

const moduleTypeMap = {
  1: '小表-计量',
  2: '小表-MBUS',
  3: '大表-计量',
  4: '大表-MBUS',
  5: '小表-485',
  6: '大表-485'
}

const yesOrNoMap = {
  0: '否',
  1: '是'
}

创建了两个<div>元素，其中一个作为容器，另一个用来容纳表格内容。
定义了两个映射对象moduleTypeMap和yesOrNoMap，用于将数字类型的字段转换为对应的描述性文本。

构建表格内容

const table = `<table border="1" width="1000" height="500" align="left" cellpadding="10" cellspacing="0">
...
</table>`

使用模板字符串构建了一个复杂的HTML表格，其中包含了多个行和列，用于展示销售跟踪的详细信息。
表格中的数据来自data对象，通过插值表达式${}插入到表格的相应位置。
对于可能不存在的属性，使用空字符串''作为默认值，避免显示undefined或null。

插入表格到DOM

div.insertAdjacentHTML('afterbegin', table)

将构建好的表格HTML插入到之前创建的div元素中。

拼接完整的HTML内容

content = content + div1.innerHTML
printStr = printStr + content + '</body><style>td{border:1px solid black}</style></html>'

将生成的内容拼接到printStr变量中，形成完整的HTML文档字符串，并添加了简单的样式定义以确保表格边框可见。

打印功能实现

const pWin = window.open('_blank')
pWin.document.write(printStr)

setTimeout(() => {
  pWin.print()
  pWin.close()
}, 300)

使用window.open方法打开一个新的浏览器窗口，并将构建好的HTML文档写入新窗口。
使用setTimeout延迟执行打印命令，确保所有DOM元素已经渲染完成后再调用print()方法进行打印。
打印完成后关闭新窗口，清理资源。

总结

saleTrackPrint函数的主要目的是根据传入的数据动态生成一个包含销售跟踪信息的HTML页面，并立即触发打印操作。这个过程包括：

创建基本的HTML结构。
动态生成表格内容，填充具体的数据项。
将生成的HTML内容插入到临时创建的DOM节点中。
将完整的HTML文档写入新的浏览器窗口。
触发浏览器的打印对话框进行打印，之后关闭该窗口。

这种方法允许用户快速获取一份格式化良好的销售跟踪报告，并直接从浏览器进行打印，适用于需要即时生成和打印文档的场景。此外，代码中还展示了如何处理可能缺失的数据项，保证即使某些字段为空，也不会破坏整体布局或导致错误。

完整代码

import { saleTrackPrint } from '@/utils'

getTrackPrint(row.id).then(res => {
            setTimeout(() => {
              saleTrackPrint({
                ...res.data, track_no: data.track_no_sub, ob_num: data.ob_num,
                contract_no: row.contract_no
              }, '生产跟踪单', 0)
            }, 500)
          })

saleTrackPrint 方法是一个用于生成并打印生产跟踪单的JavaScript函数。它接收三个参数：data（包含需要打印的数据对象）、title（文档标题）和type（未在代码中使用）。以下是该方法的工作流程及其实现细节的深入分析：

export function saleTrackPrint(data, title, type) {
  // 空页面
  let printStr = "<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'><title>" + title + '</title></head>'

  let content = ''

  const div1 = document.createElement('div')
  const div = document.createElement('div')
  div.id = 'table'
  div1.appendChild(div)
  const moduleTypeMap = {
    1: '小表-计量',
    2: '小表-MBUS',
    3: '大表-计量',
    4: '大表-MBUS',
    5: '小表-485',
    6: '大表-485'
  }
  const yesOrNoMap = {
    0: '否',
    1: '是'
  }
  const table = `<table border="1" width="1000" height="500" align="left" cellpadding="10" cellspacing="0"><tr>
<th colspan="7" style="font-size: 30px">${title}(${data.track_no})</th></tr><tr><td rowspan="5">产品信息</td></tr>
<tr>
<td width="150">订单数量</td><td width="150">${data.product_num ?? ''}</td>
<td width="150">贴片数量</td><td width="150">${data.ob_num}</td>
<td width="150">预交货日期</td><td width="150">${data.delivery_time ?? ''}</td></tr>
<tr>
<td>产品型号</td><td>${data.product_model ?? ''}</td>
<td>程序版本</td><td>${data.soft_version ?? ''}</td>
<td>排针尺寸</td><td>${data.pin_height ?? ''}</td></tr>
<tr>
<td>硬件版本号</td><td style="font-weight:bold">${data.hard_version ?? ''}</td>
<td>模块类型</td><td>${moduleTypeMap[data.module_type] ?? ''}</td>
<td>产品名称</td><td>${data.product_name}</td></tr>
<tr>
<td>客户/厂家</td><td>${data.product_buyer ?? ''}</td>
<td>程序方案</td><td>${data.program_scheme ?? '' ?? ''}</td>
<td>合同号</td><td>${data.contract_no ?? ''}</td></tr>
<tr>
<td>BOM单名称</td><td colspan="6">${data.bom_name ?? ''}</td></tr>
<tr><td>配料</td><td>配料人员</td><td colspan="2"></td><td>配料时间</td><td colspan="2"></td></tr>
<tr><td rowspan="4">贴片</td></tr>
<tr><td>1、器件检查</td><td></td><td>2、炉温</td><td></td><td>3、锡膏</td><td></td></tr>
<tr><td>4、推力</td><td></td><td>5、首件测试</td><td></td><td colspan="2"></td></tr>
<tr><td>贴片人员</td><td colspan="2"></td><td>贴片时间</td><td colspan="2"></td></tr>
<tr><td rowspan="7">测试</td></tr>
<tr>
<td rowspan="2">数据来源路径</td>
<td colspan="2" align="center">测试数据</td>
<td colspan="3" align="center">平台数据</td></tr>
<tr>
<td align="center">工序1</td>
<td align="center">工序2</td>
<td align="center">工序1</td>
<td colspan="2" align="center">工序2</td></tr>
<tr>
<td>检测总数</td><td></td><td></td><td></td><td colspan="2"></td></tr>
<tr>
<td>检测合格数</td><td></td><td></td><td></td><td colspan="2"></td></tr>
<tr>
<td>检测不良数</td><td></td><td></td><td></td><td colspan="2"></td></tr>
<tr><td>测试人员</td><td colspan="2"></td><td>测试时间</td><td colspan="2"></td></tr>
<tr>
<td rowspan="2">割板</td><td>割板合格数</td><td colspan="2"></td><td>割板不良数</td><td colspan="2"></td></tr>
<tr><td>割板人员</td><td colspan="2"></td><td>割板时间</td><td colspan="2"></td></tr>
<tr>
<td rowspan="2">包装</td><td>包装合格数</td><td colspan="2"></td><td>外观不良数</td><td colspan="2"></td></tr>
<tr><td>包装人员</td><td colspan="2"></td><td>包装时间</td><td colspan="2"></td></tr>
<tr>
<td rowspan="2">入库</td><td>入库合格数</td><td colspan="2"></td><td>订单不良数登记(不入库)</td><td colspan="2"></td></tr>
<tr><td>入库人员</td><td colspan="2"></td><td>入库时间</td><td colspan="2"></td></tr>
<td colspan="1">订单备注</td><td colspan="6">${data.remark ?? ''}</td></tr>
<tr>
<td colspan="1">客户备注</td><td colspan="6">${data.customer_remark ?? ''}</td></tr>
</table>`
div.insertAdjacentHTML('afterbegin', table)
  // 拼接空页面+style样式+dom内容
  content = content + div1.innerHTML
  // printStr = printStr + tabStyle + content + '</body></html>'
  printStr = printStr + content + '</body><style>td{border:1px solid black}</style></html>'
  // 打开新页面
  const pWin = window.open('_blank')
  // 将内容赋值到新页面
  pWin.document.write(printStr)
  // 使用setTimeout，等页面dom元素渲染完成后再打印。
  setTimeout(() => {
    pWin.print() // 调用打印功能。
    pWin.close() // 关闭 打印创建的当前页面
    document.getElementById(div1.id) // .setAttribute('style', 'display: none')
  }, 300)
}