Vue-Element-admin 框架上使用 Hiprint 打印插件一、安装Hiprint

最新推荐文章于 2025-05-14 22:27:35 发布

吹口哨的兔子

最新推荐文章于 2025-05-14 22:27:35 发布

阅读量4.7k

点赞数 3

分类专栏： vue-element-admin print

本文链接：https://blog.youkuaiyun.com/z123191456/article/details/113876788

版权

vue-element-admin print 专栏收录该内容

3 篇文章

订阅专栏

本文指导你如何在项目中集成Hiprint打印插件，包括下载、路径配置、引用、模板初始化及关键步骤。适合前端开发者了解并实现在网页设计中实现打印功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先下载最新的程序，地址是：http://hiprint.io/download

1、导入目录

在下载完成后放入src\assets\plugins目录下,如果没有需要自己创建
在这里插入图片描述

2、引用

在目录下安装好后是调用引用，注意：程序是以jquery 为基础的，所以项目需要引用
在界面上引用

import $ from 'jquery'
import '@/assets/plugins/hiprint/css/hiprint.css'
import '@/assets/plugins/hiprint/css/print-lock.css'
import '@/assets/plugins/hiprint/polyfill.min.js'
import '@/assets/plugins/hiprint/plugins/jquery.minicolors.min.js'
import { hiprint } from '@/assets/plugins/hiprint/hiprint.bundle.js'
import '@/assets/plugins/hiprint/plugins/jquery.hiwprint.js'
import '@/assets/plugins/hiprint/plugins/qrcode.js'
import '@/assets/plugins/hiprint/plugins/JsBarcode.all.min.js'

3、初始化

在引用完成后，需要定义一个全部的模板变量

var hiprintTemplate

在这里插入图片描述

创建完成后，在程序的mounted进行初始化

     // 获取预置 的元素，如果是打印，可以不加此功能
    var defaultElement = this.getEtypeProvider(this.printZujian)
    $(document).ready(function() {
      // 初始化打印插件
      hiprint.init(({
        // eslint-disable-next-line new-cap
        providers: [new defaultElement()]
      }))

      // 设置左侧拖拽事件
      hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'))
      const _customPrintJson = self.customPrintJson
      hiprintTemplate = new hiprint.PrintTemplate({
        template: _customPrintJson,
        settingContainer: '#PrintElementOptionSetting',
        paginationContainer: '.hiprint-printPagination'
      })
      // 打印设计
      hiprintTemplate.design('#hiprint-printTemplate')
      self.setCurrentPaper(self.paperMap.A4)
      self.elementAddEventListen()
      $('.params_drawer').width($('.params_setting_container').width() * 1) // 动态设置右部参数设置框宽度
    })

特别注意因为是Jqeury的，所以在创建时一定要在 $(document).ready(function() 下进行操作

这样就算是引用完成了，因为我这里直接复制的是，DEMO的例子所以最终呈现出来的效果实际是模板设计的界面