言

在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