Vue3 使用 vue-plugin-hiprint 实现无预览打印

已于 2025-06-27 13:55:32 修改
阅读量780 收藏 9
点赞数 18
CC 4.0 BY-SA版权
文章标签： css css3 html
于 2025-05-28 16:31:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148258762

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue3 使用 vue-plugin-hiprint 实现无预览打印</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/vue-plugin-hiprint.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
    }
    button {
      padding: 10px 15px;
      background-color: #42b983;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin: 10px 0;
    }
    button:hover {
      background-color: #369f6b;
    }
    .print-content {
      border: 1px dashed #ccc;
      padding: 20px;
      margin: 20px 0;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="container">
      <h1>Vue3 使用 vue-plugin-hiprint 实现无预览打印</h1>
      
      <p>本示例演示如何使用 vue-plugin-hiprint 插件在 Vue3 中实现无预览直接打印功能。</p>
      
      <div class="print-content">
        <h2>打印内容区域</h2>
        <p>这是一个示例打印内容，您可以自定义任何需要打印的内容。</p>
       </p>
        <p>当前时间：{{ currentTime }}</p>
      </div>
      
      <button @click="directPrint">直接打印</button>
      <button @click="printWithOptions">带选项打印</button>
    </div>
  </div>

  <script>
    const { createApp, ref, onMounted } = Vue;
    
    createApp({
      setup() {
        const currentTime = ref(new Date().toLocaleString());
        
        // 初始化 hiprint
        let hiprintInstance = null;
        
        onMounted(() => {
          // 创建 hiprint 实例
          hiprintInstance = new hiprint.PrintTemplate({
            template: {},
            settingContainer: '#app', // 通常用于预览，这里我们不需要
          });
          
          // 更新当前时间每秒
          setInterval(() => {
            currentTime.value = new Date().toLocaleString();
          }, 1000);
        });
        
        // 直接打印
        const directPrint = () => {
          if (!hiprintInstance) return;
          
          // 获取要打印的 HTML 内容
          const printContent = document.querySelector('.print-content').innerHTML;
          
          // 直接打印
          hiprintInstance.print(printContent, {
            title: '我的打印文档',
            styleHandler: () => {
              // 可以在这里添加自定义样式
              return `
                body { font-family: Arial; }
                h2 { color: #333; }
                p { margin: 5px 0; }
              `;
            }
          });
          
          console.log('打印任务已发送');
        };
        
        // 带选项打印
        const printWithOptions = () => {
          if (!hiprintInstance) return;
          
          const printContent = document.querySelector('.print-content').innerHTML;
          
          // 打印选项
          const options = {
            title: '自定义打印文档',
            copies: 1, // 打印份数
            printer: '', // 打印机名称，空表示默认打印机
            pageSize: 'A4', // 纸张大小
            layout: 'portrait', // 方向: portrait(纵向), landscape(横向)
            margin: { // 边距
              top: '10mm',
              left: '10mm',
              right: '10mm',
              bottom: '10mm'
            },
            styleHandler: () => {
              return `
                body { font-size: 14px; }
                h2 { color: #42b983; border-bottom: 1px solid #eee; }
                a { color: #42b983; text-decoration: none; }
              `;
            }
          };
          
          hiprintInstance.print(printContent, options);
        };
        
        return {
          currentTime,
          directPrint,
          printWithOptions
        };
      }
    }).mount('#app');
  </script>
</body>
</html>

ziblog
关注
【VUE3】Vue中使用vue-plugin-hiprint插件进行打印
VT_馒头的博客
06-28 9651
hiprint 是一个web 打印的js组件，无需安装软件。支持windows,macOS,linux 系统，支持移动端，PC端浏览器，angular,vue,react 等 分页预览，打印，操作简单，运行快速。预览界面为css+html 。支持数据分组，批量预览。生成pdf,图片更方便
vue打印模版模块，使用vue-plugin-hiprint插件搭建过程
qq_14852047的博客
09-09 5963
vue打印模版模块，使用vue-plugin-hiprint插件搭建过程
【VUE3】Vue3利用vue-plugin-hiprint插件实现无预览打印（静默打印）
VT_馒头的博客
06-28 6842
在MES管理系统中需要实现条码数据从接口返回后，直接调用打印机进行打印，跳过浏览器的预览确定那一步。在尝试很多JS的方式和插件后，都无法实现该功能，因为基本上最后都是使用了方法进行打印，所以需要本地启动服务调用打印机，才能实现该功能。附上该插件的http://hiprint.io/，本文中未提及的功能基本上都能在官网中找到。
Vue3使用hiprint——批次打印条码
敲厉害的燕宝的博客
09-26 1372
创建了打印模板后，可以在Vue 组件中使用 Vue-Plugin-HiPrint 来触发打印操作。这会将 Vue-Plugin-HiPrint 注册为 Vue 插件，使其可用于您的整个应用程序。要开始使用 Vue-Plugin-HiPrint，首先需要安装它。解决方式：index.html中导入print-lock.css样式。解决方式：在main.js中添加disAutoConnect方法。建议：将json保存到数据库中，或者保存在字典数据中。样式文件，这个文件在。使用按钮触发打印事件。
基于vue-plugin-hiprint实现PDF文件打印的技术解析
最新发布
gitblog_07028的博客
06-27 435
基于vue-plugin-hiprint实现PDF文件打印的技术解析 在Web应用开发中，打印功能是一个常见但实现起来较为复杂的需求。本文将以vue-plugin-hiprint项目为例，深入探讨如何实现PDF文件的直接打印功能。 项目背景与核心功能 vue-plugin-hiprint是一个基于Vue.js的打印插件，它提供了丰富的打印模板设计和打印功能。该插件主要支持HTML模板打印，通过可视...
vue3打印解决方案：Vue-Plugin-HiPrint
weixin_69174819的博客
12-03 2210
vue-plugin-hiprint在vue中使用
Vue3 通过Vue3-Print-Nb在线工单打印 模板打印 自定义打印 打印下载
生产队的驴
04-27 925
通过在应用中集成打印功能，用户可以直接从页面打印工单，不用导出文件或使用其他外部工具。节省时间，提高效率，特别是当需要大量打印时。同时也可以将文件模板上传到数据库，提供给部门工作自行下载。开源文档：https://www.npmjs.com/package/vue-print-nb。
Vue3+vue3-print-nb 实现分页打印功能
Z1014h的博客
01-08 5118
注意：一定要给需要打印的容器加一个id,点击打印按钮的时候调用传入的id。只需要给不自动换行的标签加上。3. 样式布局不生效问题。
hiprint打印/jsPDF使用/html2canvas
song854601134的博客
09-05 2453
hiprint
vue-plugin-hiprint vue hiprint vue使用hiprint打印控件VUE HiPrint HiPrint简单使用
热门推荐
半只
03-07 2万+
/ 这样后续直接调用 hiprintTemplate.print({ 'canshu1': topText, 'canshu2': code }) 就可以打印了, 我这里是 方便容易阅读 就放在了方法里面。// 预览打印， 注意数据对象 { 'canshu1': topText, 'canshu2': code } 对象属性名称名称要和上面设置的一样。// 获取打印机列表, 如果在 main.js 中设置了取消自动连接客户端 是获取不到打印机列表的！// import引入的组件需要注入到对象中才能使用。
vue-plugin-hiprint 详细使用说明
一步一个脚印，踏实努力，向着目标前进
08-05 8472
是一个 Vue.js 插件，用于在 Vue.js 应用中方便地使用 HiPrint 打印插件。HiPrint 是一个基于 Web 的打印插件，可以实现高度自定义的打印功能。
hiprint for Vue2/Vue3 打印、打印设计、可视化设计器、报表设计、元素编辑、可视化打印编辑
06-01
hiprint for Vue2/Vue3 打印、打印设计、可视化设计器、报表设计、元素编辑、可视化打印编辑。
打印插件vue-plugin-hiprint-npm-demo-ele
09-06
"vue-plugin-hiprint-npm-demo-ele"作为一款Vue.js打印插件，为前端开发者提供了一个方便、快捷的方式，以实现Web应用的打印功能。通过合理利用该插件，开发者可以节省开发时间，提高项目的完成效率，同时为用户提供...
使用vue-plugin-hiprint实现打印功能
妍妍子的博客
11-17 2884
1.效果图 2.安装 插件安装 npm i vue-plugin-hiprint 引入样式 复制一份hiprint/css/print-lock.css文件到public中，在index.html中引入 <!-- 防止打印不正常 --> <link rel="stylesheet" type="text/css" media="print" href="<%= BASE_URL %>print-lock.css" /> 3.引入插件 全局引入 // ma
若依vue打印的简单方法
张子豪的博客
08-24 7146
像我们后端程序员做前端的话,有时候真不需要知道什么原理,直接塞就好了 目的是为了实现点击某些行的数据,然后点击某个按钮直接弹出下面的打印 此链接 大佬是原创,我拿来总结梳理一下 插件进阶功能请移步: 链接 插件模板制作页面: 链接 然后找到项目中的依赖文件夹node_modules/vue-plugin-hiprint/dist/中的print-lock.css文件,复制一份到自己项目的静态资源目录public下 将下面的代码复制到自己项目中 注意这个字段名要匹配,就ok 了
vue3简单使用打印插件vue-plugin-hiprint
woflyoycm的博客
01-17 5453
打印 vue3 vue-plugin-hiprint
简单上手vue使用vue-plugin-hiprint进行打印
cyloser的专栏
09-22 2726
vue-plugin-hiprint是一个功能十分强大的打印插件，正因为功能强大，所以看起来感觉非常复杂，网上示例代码为了追求展现其强大，往往也做的非常庞大，学和分析起来对新手都不友好。本文较简单的让大家上手了解如何使用vue-plugin-hiprint插件打印自己页面需要打印的内容。1、安装插件：2、在要使用插件的页面导入插件：3、定义一个模板对象并传入模板设置。所谓模板就是你想打印到纸张上的数据和格式的设置，描述你要在什么样的纸上打印什么样的数据，数据打印出来的格式是什么样的等等信息。
vue-plugin-hiprint使用教程【1】
一名业余前端的博客
12-22 1901
vue3中使用vue-plugin-hiprint的基本教程
vue3 vue-plugin-hiprint 打印 pdf
02-14
### 如何在 Vue3 中使用 `vue-plugin-hiprint` 实现 PDF 打印 #### 安装依赖库 为了能够在 Vue3 项目中使用 `vue-plugin-hiprint` 插件，需先通过 npm 或 yarn 来安装该插件。命令如下所示[^2]: ```bash npm install -S vue-plugin-hiprint ``` #### 配置插件 完成安装之后，在项目的入口文件（通常是 main.js 或者类似的初始化文件）引入并注册此插件： ```javascript import { createApp } from &#39;vue&#39; import App from &#39;./App.vue&#39; // 导入 HiPrint 插件 import VuePluginHiPrint from &#39;vue-plugin-hiprint&#39;; const app = createApp(App) app.use(VuePluginHiPrint, { // 可选配置项... }) app.mount(&#39;#app&#39;) ``` #### 使用组件进行打印操作 接下来可以在页面中的某个按钮点击事件或者其他触发条件下来调用打印功能。下面是一个简单的例子来展示如何定义一个用于启动打印过程的方法。 假设有一个名为 PrintComponent 的单文件组件 (`.vue`) 文件: ```html <template> <div class="print-container"> <!-- 要打印的内容 --> <section id="content-to-print"> <h1>这是要被打印的内容</h1> <p>更多内容...</p> </section> <!-- 触发打印的按钮 --> <button @click="handlePrint">打印</button> </div> </template> <script setup> import { ref } from "vue"; import { usePrinter } from &#39;vue-plugin-hiprint&#39;; function handlePrint() { const printer = new usePrinter(); printer.print({ templateId: &#39;default&#39;, // 如果有预设模板则指定ID contentSelector: &#39;#content-to-print&#39;, type: &#39;pdf&#39; // 设置输出格式为 pdf }); } </script> <style scoped> /* 样式省略 */ </style> ``` 上述代码展示了怎样创建一个带有特定 ID 的 HTML 结构作为待打印区域，并设置了一个按钮用来触发展示打印对话框的功能。当用户点击这个按钮时会执行 `handlePrint()` 方法，进而调用了来自 `vue-plugin-hiprint` 提供的 API 函数来进行实际的打印工作[^1]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值