瀏覽器打印方案

言

在web端打印是比較常見的需求，實際工作中也接觸了不少，在這里對工作中用到的做一下總結(jié)

1.通過媒體查詢隱藏元素

通過style標簽內(nèi)聯(lián)引入，或者使用媒體查詢media="print"外鏈樣式表。然后將無關(guān)元素隱藏，只將需要打印的內(nèi)容展示出來；這時候需要專門寫一套打印樣式，頁面修改，打印樣式可能也需要修改，維護成本較高；

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

2.將需要打印的元素復制到一個iframe中

需要遍歷元素和所有子元素，克隆dom到新的iframe，然后在ifram中發(fā)起打印。關(guān)鍵技術(shù)點是要把樣式完整復制過去；jquery.print.js; react-to-print就是這樣實現(xiàn)；
例子

這種方案的好處是適用性強，缺點就是實現(xiàn)難度大；

3.打印頁面設(shè)置

支持@page 來設(shè)置，同時支持偽類 :left 、:right、:first

:left設(shè)置多頁打印的時候偶數(shù)頁的配置；
:right設(shè)置多頁打印的時候奇數(shù)頁的配置;
:first 設(shè)置第一頁的配置

頁面寬度

打印常用的是A4紙，A4紙尺寸是21cm×29.7cm,在css中可以使用size屬性設(shè)置

size屬性設(shè)置頁面大小和方向：

支持單獨設(shè)置 A4、A3等 , 默認是縱向
支持單獨portrait、landscape；紙張大小默認是關(guān)鍵詞letter;
也支持 A4、A3 和 portrait、landscape關(guān)鍵詞組合： A4 landscape；
也支持直接設(shè)置頁面尺寸，比如：21cm 29.7cm，代表頁面寬高分別為21cm和29.7cm
未設(shè)置size屬性，可以在打印預覽選擇紙張大小和方向；設(shè)置之后就不能再選擇了。

例子

頁面的邊距

margin屬性設(shè)置頁面的邊距 : 不支持 em 和 ex;
默認的打印會帶有頁眉頁腳。頁眉包括日期、title，頁腳包括鏈接和分頁等信息。可以通過 margin 設(shè)置邊距達到隱藏頁眉頁腳的目的

@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等絕對單位

分頁

打印的時候如果頁面很長就會自動分頁，如果我們希望分頁不要把一些元素分開，可以給元素設(shè)置break-inside: avoid;
不過可能會留下空白。

瀏覽器兼容性

firefox不支持size屬性可以在打印預覽設(shè)置紙張和打印方向
safari不支持@page可以在打印預覽設(shè)置紙張和打印方向

調(diào)啟打印預覽

window.print() 、document.execCommand('print’) 、頁面右鍵菜單打印、command+p

在軟件項目比較偏向BS架構(gòu)，也就是使用網(wǎng)頁瀏覽器等工具軟件呈現(xiàn)用戶交互界面的系統(tǒng)軟件。如果在網(wǎng)頁中不但能呈現(xiàn)報表或標簽，也能直接調(diào)用本地或網(wǎng)絡(luò)共享打印機打印是很多項目都需要的。

網(wǎng)頁打印解決方案有很多，比如使用ActivityX控件，JavaScript插件等。網(wǎng)頁打印或多或少地都有一些限制，我接下來介紹的這兩種方案也是有一些限制，但總體使用起來也能比較好地解決項目需求，這才是根本。

一、使用銳浪報表

使用銳浪報表可以展現(xiàn)復雜的報表、圖表、條碼標簽等，直接可以在網(wǎng)頁上或PC客戶端上使用，還是很方便的，功能也強大，還可以免費使用。具體銳浪的介紹可以到官網(wǎng)上查看。

以下圖示就是在我們微邦軟件平臺的某進銷存項目上使用效果。

可以看到，報表呈現(xiàn)后，上面一排工具欄足夠滿足項目要求，如打印、導出、頁面設(shè)置等，使用也很方便，平臺已經(jīng)封裝，只要設(shè)計好模板，在網(wǎng)頁中調(diào)用生成即可展現(xiàn)。

銳浪報表這種方式是使用ActivityX控件，對瀏覽器是有要求，主流國產(chǎn)瀏覽器還能勝任。不過銳浪有服務(wù)器版或HTML5版方式，對瀏覽器要求較低。

二、使用帆軟報表

使用帆軟也是很不錯的選擇，帆軟也能做到報表、圖表和條碼標簽的制作和展示，不過帆軟是不免費的。

以下圖示就是在我們微邦軟件平臺的某MES項目上使用效果，我們使用帆軟工具經(jīng)過預選設(shè)計好的模板，然后在后臺生成pdf后發(fā)送客戶端展示。目前主流瀏覽器在網(wǎng)頁中直接顯示pdf也是支持的比較好，如果不支持，也有第三方JavaScript的pdf庫可以使用。

結(jié)合我們這款開源免費的平臺對兩個項目案例的整合，我們對功能和報表以最方便快捷的方式完成，縮短項目周期，解決用戶實際需要為目標。

ue-Plugin-HiPrint 是一個Vue.js的插件，旨在提供一個簡單而強大的打印解決方案。通過 Vue-Plugin-HiPrint，您可以輕松地在Vue.js應(yīng)用程序中實現(xiàn)高度定制的打印功能。但是本文只簡單介紹 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 插件，使其可用于您的整個應(yīng)用程序。

2、組件中引入

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

創(chuàng)建打印模板

在開始打印之前，您需要創(chuàng)建打印模板。Vue-Plugin-HiPrint 使用 HiPrint 作為底層打印引擎，它支持使用 HTML 和 CSS 創(chuàng)建高度自定義的打印模板。您可以創(chuàng)建一個包含您想要打印的內(nèi)容的 HTML 模板，然后使用 CSS 樣式進行格式化。

請去demo預覽里創(chuàng)建一個適合業(yè)務(wù)需求的打印模板：

在 Vue 組件中使用打印

一旦您創(chuàng)建了打印模板，您可以在您的 Vue 組件中使用 Vue-Plugin-HiPrint 來觸發(fā)打印操作。首先，先要在項目的index.html文件中引入print-lock.css樣式文件，這個文件在node_modules/vue-plugin-hiprint/dist/目錄下：

<!--【必須】在index.html 文件中添加打印所需樣式(此cdn可能不穩(wěn)定):-->
<link rel="stylesheet" type="text/css" media="print" href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css">
<!-- 推薦使用：可以調(diào)整成 相對鏈接/自有鏈接, 【重要】名稱需要一致 【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 允許您自定義打印樣式，以滿足您的具體需求。您可以在預覽網(wǎng)站中設(shè)計好需要的樣式并復制自定義模板的JSON數(shù)據(jù)，在項目中新建mb.json文件將模板json數(shù)據(jù)粘貼進去。

使用模板

import mb from './mb.json'
function orderPrint(){
let printData = {orderId:'單號',title:'模板標題',table:[{NAME:'表格數(shù)據(jù)'}]};
let hiprintTemplate = new hiprint.PrintTemplate({ template: mb});
// 打印
hiprintTemplate.print(printData);
}

在上面的示例中，我們使用import引入了自定義模板，使用printData自定義了表單具體數(shù)據(jù)，最后使用print方法完美實現(xiàn)了打印。

結(jié)語

Vue-Plugin-HiPrint 提供了一個強大的、易于使用的打印解決方案，適用于 Vue.js 應(yīng)用程序。通過創(chuàng)建自定義的打印模板和使用 Vue-Plugin-HiPrint，您可以輕松地實現(xiàn)高度定制的打印功能，滿足您的項目需求。如果您正在尋找一個方便的 Vue.js 打印解決方案，Vue-Plugin-HiPrint 是一個值得嘗試的工具。

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

在線咨詢

上一篇：Flash停服！2021年滬牌首拍成功闖關(guān)，部分政府網(wǎng)站打起“補丁”
下一篇：HTML表單3（下拉列表、多行文字輸入）-零基礎(chǔ)自學網(wǎng)頁制作

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商