言

在web端打印是比较常见的需求，实际工作中也接触了不少，在这里对工作中用到的做一下总结

1.通过媒体查询隐藏元素

通过style标签内联引入，或者使用媒体查询media="print"外链样式表。然后将无关元素隐藏，只将需要打印的内容展示出来；这时候需要专门写一套打印样式，页面修改，打印样式可能也需要修改，维护成本较高；

<style>
  @media print{}
</style>
// 或者
<link rel="stylesheet" media="print" href="print.css”>

2.将需要打印的元素复制到一个iframe中

需要遍历元素和所有子元素，克隆dom到新的iframe，然后在ifram中发起打印。关键技术点是要把样式完整复制过去；jquery.print.js; react-to-print就是这样实现；
例子

这种方案的好处是适用性强，缺点就是实现难度大；

3.打印页面设置

支持@page 来设置，同时支持 伪类 :left 、:right、:first

1. :left设置多页打印的时候偶数页的配置；
2. :right设置多页打印的时候奇数页的配置;
3. :first 设置第一页的配置

页面宽度

打印常用的是A4纸，A4纸尺寸是21cm×29.7cm,在css中可以使用size属性设置

size属性设置页面大小和方向：

1. 支持单独设置 A4、A3等 , 默认是纵向
2. 支持单独portrait、landscape；纸张大小默认是关键词letter;
3. 也支持 A4、A3 和 portrait、landscape关键词组合： A4 landscape；
4. 也支持直接设置页面尺寸，比如：21cm 29.7cm，代表页面宽高分别为21cm和29.7cm
5. 未设置size属性，可以在打印预览选择纸张大小和方向；设置之后就不能再选择了。

例子

页面的边距

1. margin属性设置页面的边距 : 不支持 em 和 ex;
2. 默认的打印会带有页眉页脚。页眉包括日期、title，页脚包括链接和分页等信息。 可以通过 margin 设置边距达到隐藏页眉页脚的目的

@page {
    margin: 3.7cm 2.6cm 3.5cm;  /* 上下左右边距 */
}
@page :left {
    margin-left: 2.5cm;
    margin-right: 2.7cm;
}
@page :right {
    margin-left: 2.7cm;
    margin-right: 2.5cm;
}
@page :first {
    size: A4 portrait;
    margin-left: 4cm;
    margin-right: 4cm;
}

/* 隐藏页眉 */
@page { margin-top: 0; }

/* 隐藏页脚 */
@page { margin-bottom: 0; }

使用绝对物理单位

使用pt、mm、cm等绝对单位

分页

打印的时候如果页面很长就会自动分页，如果我们希望分页不要把一些元素分开，可以给元素设置break-inside: avoid;
不过可能会留下空白。

浏览器兼容性

1. firefox不支持size属性可以在打印预览设置纸张和打印方向
2. safari不支持@page可以在打印预览设置纸张和打印方向

调启打印预览

window.print() 、document.execCommand('print’) 、页面右键菜单打印、command+p

在软件项目比较偏向BS架构，也就是使用网页浏览器等工具软件呈现用户交互界面的系统软件。如果在网页中不但能呈现报表或标签，也能直接调用本地或网络共享打印机打印是很多项目都需要的。

网页打印解决方案有很多，比如使用ActivityX控件，JavaScript插件等。网页打印或多或少地都有一些限制，我接下来介绍的这两种方案也是有一些限制，但总体使用起来也能比较好地解决项目需求，这才是根本。

一、使用锐浪报表

使用锐浪报表可以展现复杂的报表、图表、条码标签等，直接可以在网页上或PC客户端上使用，还是很方便的，功能也强大，还可以免费使用。具体锐浪的介绍可以到官网上查看。

以下图示就是在我们微邦软件平台的某进销存项目上使用效果。

可以看到，报表呈现后，上面一排工具栏足够满足项目要求，如打印、导出、页面设置等，使用也很方便，平台已经封装，只要设计好模板，在网页中调用生成即可展现。

锐浪报表这种方式是使用ActivityX控件，对浏览器是有要求，主流国产浏览器还能胜任。不过锐浪有服务器版或HTML5版方式，对浏览器要求较低。

二、使用帆软报表

使用帆软也是很不错的选择，帆软也能做到报表、图表和条码标签的制作和展示，不过帆软是不免费的。

以下图示就是在我们微邦软件平台的某MES项目上使用效果，我们使用帆软工具经过预选设计好的模板，然后在后台生成pdf后发送客户端展示。目前主流浏览器在网页中直接显示pdf也是支持的比较好，如果不支持，也有第三方JavaScript的pdf库可以使用。

结合我们这款开源免费的平台对两个项目案例的整合，我们对功能和报表以最方便快捷的方式完成，缩短项目周期，解决用户实际需要为目标。

ue-Plugin-HiPrint 是一个Vue.js的插件，旨在提供一个简单而强大的打印解决方案。通过 Vue-Plugin-HiPrint，您可以轻松地在Vue.js应用程序中实现高度定制的打印功能。但是本文只简单介绍 Vue-Plugin-HiPrint 在vue3中如何使用固定模板打印的使用方法，以便可以快速集成并使用它。

安装 Vue-Plugin-HiPrint

要开始使用 Vue-Plugin-HiPrint，首先需要安装它。您可以使用 npm 或 yarn 进行安装：

npm install vue-plugin-hiprint --save
# 或
yarn add vue-plugin-hiprint

在 Vue 项目中引入 Vue-Plugin-HiPrint

安装完成后，您需要在您的 Vue 项目中引入 Vue-Plugin-HiPrint。在您的 main.js 或任何其他入口文件中，您可以按以下方式引入它：

1、main.js中引入

import Vue from 'vue';
import VuePluginHiPrint from 'vue-plugin-hiprint';

Vue.use(VuePluginHiPrint);

这会将 Vue-Plugin-HiPrint 注册为 Vue 插件，使其可用于您的整个应用程序。

2、组件中引入

import {hiPrintPlugin } from 'vue-plugin-hiprint'

创建打印模板

在开始打印之前，您需要创建打印模板。Vue-Plugin-HiPrint 使用 HiPrint 作为底层打印引擎，它支持使用 HTML 和 CSS 创建高度自定义的打印模板。您可以创建一个包含您想要打印的内容的 HTML 模板，然后使用 CSS 样式进行格式化。

请去demo预览里创建一个适合业务需求的打印模板：

在 Vue 组件中使用打印

一旦您创建了打印模板，您可以在您的 Vue 组件中使用 Vue-Plugin-HiPrint 来触发打印操作。首先，先要在项目的index.html文件中引入print-lock.css样式文件，这个文件在node_modules/vue-plugin-hiprint/dist/目录下：

<!--【必须】在index.html 文件中添加打印所需样式(此cdn可能不稳定):-->
<link rel="stylesheet" type="text/css" media="print" href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css">
<!-- 推荐使用：可以调整成 相对链接/自有链接, 【重要】名称需要一致 【print-lock.css】-->
<link rel="stylesheet" type="text/css" media="print" href="/print-lock.css">

接下来，是在组件中的使用方法：

import {hiPrintPlugin } from 'vue-plugin-hiprint'
hiPrintPlugin.disAutoConnect();  //取消自动打印直接连接客户端
hiprint.init(); 

在组件中我们需要先取消它的自动连接客户端打印功能，然后初始化vue-plugin-hiprint。

自定义打印模板

Vue-Plugin-HiPrint 允许您自定义打印样式，以满足您的具体需求。您可以在 预览网站中设计好需要的样式并复制自定义模板的JSON数据，在项目中新建mb.json文件将模板json数据粘贴进去。

使用模板

import mb from './mb.json'
function orderPrint(){
let printData = {orderId:'单号',title:'模板标题',table:[{NAME:'表格数据'}]};
let hiprintTemplate = new hiprint.PrintTemplate({ template: mb});
// 打印
hiprintTemplate.print(printData);
}

在上面的示例中，我们使用import引入了自定义模板，使用printData自定义了表单具体数据，最后使用print方法完美实现了打印。

结语

Vue-Plugin-HiPrint 提供了一个强大的、易于使用的打印解决方案，适用于 Vue.js 应用程序。通过创建自定义的打印模板和使用 Vue-Plugin-HiPrint，您可以轻松地实现高度定制的打印功能，满足您的项目需求。如果您正在寻找一个方便的 Vue.js 打印解决方案，Vue-Plugin-HiPrint 是一个值得尝试的工具。

原文链接：https://juejin.cn/post/7297080018655412250