記錄---vue3打印解決方案：Vue-Plugin-HiPrint

????? 寫在開頭

點贊 + 收藏 === 學會??????

Vue-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預覽里創建一個適合業務需求的打印模板：

企業微信截圖_20250826174550

在 Vue 組件中使用打印

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

注意：需復制一份print-lock.css樣式文件放到與index.html同級目錄下，否則打印樣式有問題。

<!--【必須】在index.html 文件中添加打印所需樣式(此cdn可能不穩定):-->
<link rel="stylesheet" type="text/css" media="print" >
<!-- 推薦使用：可以調整成 相對鏈接/自有鏈接, 【重要】名稱需要一致 【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

如果對您有所幫助，歡迎您點個關注，我會定時更新技術文檔，大家一起討論學習，一起進步。

posted @ 2025-08-26 17:48 林恒閱讀(941) 評論(0) 收藏舉報

刷新頁面返回頂部

林恒