摘要：vue-plugin-hiprint是一个基于Vue2和Vue3的开源打印插件，它提供了打印、打印设计、可视化设计器、报表设计、元素编辑以及可视化打印编辑等功能。
如果您对源码&技术感兴趣，请点赞+收藏+转发+关注，大家的支持是我分享最大的动力！！！
vue-plugin-hiprint是一个基于Vue2和Vue3的开源打印插件，它提供了打印、打印设计、可视化设计器、报表设计、元素编辑以及可视化打印编辑等功能。
该项目旨在方便开发者在Vue项目中快速集成打印功能，同时提供丰富的可视化设计工具，以满足不同的打印需求。
安装插件包：
npm install vue-plugin-hiprint样式引入：
拖拽设计使用：
import {hiprint,defaultElementTypeProvider} from 'vue-plugin-hiprint'// 初始化可拖拽的元素hiprint.init({providers: [new defaultElementTypeProvider]})// $('.ep-draggable-item') 包含 tid, 与上边的 provider 中的 tid 对应 才能正常拖拽生成元素hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));hiprintTemplate = new hiprint.PrintTemplate({template: {}, // 模板jsonsettingContainer: '#PrintElementOptionSetting', // 元素参数容器paginationContainer: '.hiprint-printPagination', // 多面板的容器， 实现多面板， 需要在添加一个 // ------- 下列是可选功能 -------// ------- 下列是可选功能 -------// ------- 下列是可选功能 -------// 图片选择功能onImageChooseClick: (target) => {// 测试 3秒后修改图片地址值setTimeout( => {// target.refresh(url,options,callback)// callback(el, width, height) // 原元素,宽,高// target.refresh(url,false,(el,width,height)=>{// el.options.width = width;// el.designTarget.css('width', width + "pt");// el.designTarget.children('.resize-panel').trigger($.Event('click'));// })target.refresh("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtAAAAIIAQMAAAB99EudAAAABlBMVEUmf8vG2O41LStnAAABD0lEQVR42u3XQQqCQBSAYcWFS4/QUTpaHa2jdISWLUJjjMpclJoPGvq+1WsYfiJCZ4oCAAAAAAAAAAAAAAAAAHin6pL9c6H/fOzHbRrP0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0u/SY9LS0tLS0tLS0tLS0n+edm+UlpaWlpaWlpaWlpaW/tl0Ndyzbno7/+tPTJdd1wal69dNa6abx+Lq6TSeYtK7BX/Diek0XULSZZrakPRtV0i6Hu/KIt30q4fM0pvBqvR9mvsQkZaW9gyJT+f5lsnzjR54xAk8mAUeJyMPwYFH98ALx5Jr0kRLLndT7b64UX9QR/0eAAAAAAAAAAAAAAAAAAD/4gpryzr/bja4QgAAAABJRU5ErkJggg==",{// auto: true, // 根据图片宽高自动等比(宽>高?width:height)// width: true, // 按宽调整高// height: true, // 按高调整宽real: true // 根据图片实际尺寸调整(转pt)})}, 3000)// target.getValue// target.refresh(url)},// 自定义可选字体// 或者使用 hiprintTemplate.setFontList()// 或元素中 options.fontList: fontList: [{title: '微软雅黑', value: 'Microsoft YaHei'},{title: '黑体', value: 'STHeitiSC-Light'},{title: '思源黑体', value: 'SourceHanSansCN-Normal'},{title: '王羲之书法体', value: '王羲之书法体'},{title: '宋体', value: 'SimSun'},{title: '华为楷体', value: 'STKaiti'},{title: 'cursive', value: 'cursive'},],dataMode: 1, // 1:getjson 其他：getJsonTid 默认1history: true, // 是否需要 撤销重做功能onDataChanged: (type, json) => { // 模板发生改变回调console.log(type); // 新增、移动、删除、修改(参数调整)、大小、旋转console.log(json); // 返回 template},onUpdateError: (e) => { // 更新失败回调console.log(e);},});// 设计器的容器hiprintTemplate.design('#hiprint-printTemplate');代码模式使用：
import {hiprint, defaultElementTypeProvider} from 'vue-plugin-hiprint'// 引入后使用示例hiprint.init;// 下列方法都是没有拖拽设计页面的, 相当于代码模式, 使用代码设计页面// 想要实现拖拽设计页面,请往下看 '自定义设计'var hiprintTemplate = new hiprint.PrintTemplate;var panel = hiprintTemplate.addPrintPanel({ width: 100, height: 130, paperFooter: 340, paperHeader: 10 });//文本panel.addPrintText({ options: { width: 140, height: 15, top: 20, left: 20, title: 'hiprint插件手动添加text', textAlign: 'center' } });//条形码panel.addPrintText({ options: { width: 140, height: 35, top: 40, left: 20, title: '123456', textType: 'barcode' } });//二维码panel.addPrintText({ options: { width: 35, height: 35, top: 40, left: 165, title: '123456', textType: 'qrcode' } });//长文本panel.addPrintLongText({ options: { width: 180, height: 35, top: 90, left: 20, title: '长文本：hiprint是一个很好的webjs打印,浏览器在的地方他都可以运行' } });//打印hiprintTemplate.print({});来源：IT技术资源爱好者
免责声明：本站系转载，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与本站联系，我们将在第一时间删除内容!
