大家伙,我是宝弟!
今天给大家推荐一个支持Vue2/Vue3的打印、打印设计、可视化设计器、报表设计、元素编辑、可视化打印编辑插件vue-plugin-hiprint。此插件仅仅是一个JavaScript【工具库】而非 Vue【组件库】
vue-plugin-hiprint基于hiprint 2.5.4开发,所以插件依赖jQuery。插件除了支持Vue2/Vue3以外,理论上应该也是支持其他框架。.
插件还
npm install vue-plugin-hiprint
<!--【必须】在index.html 文件中添加打印所需样式(此cdn可能不稳定):-->
<link rel="stylesheet" type="text/css" media="print" href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css">
<!-- 可以调整成 相对链接/自有链接, 【重要】名称需要一致 【print-lock.css】-->
<link rel="stylesheet" type="text/css" media="print" href="/print-lock.css">
// main.js中 引入安装
import {hiPrintPlugin} from 'vue-plugin-hiprint'
Vue.use(hiPrintPlugin, '$pluginName')
hiPrintPlugin.disAutoConnect(); // 取消自动连接直接打印客户端
// 然后使用
this.$pluginName
// 下列代码为示例,不要再 main.js中 使用
// 引入后使用示例
this.$pluginName.init();
// 下列方法都是没有拖拽设计页面的, 相当于代码模式, 使用代码设计页面
// 想要实现拖拽设计页面,请往下看 '自定义设计'
var hiprintTemplate = new this.$pluginName.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打印,浏览器在的地方他都可以运行' } });
//表格
panel.addPrintTable({ options: { width: 252, height: 35, top: 130, left: 20, content: $('#testTable').html() } });
//Html
panel.addPrintHtml({ options: { width: 140, height: 35, top: 180, left: 20, content:'' } });
//竖线//不设置宽度
panel.addPrintVline({ options: { height: 35, top: 230, left: 20 } });
//横线 //不设置高度
panel.addPrintHline({ options: { width: 140, top: 245, left: 120 } });
//矩形
panel.addPrintRect({ options: { width: 35, height: 35, top: 230, left: 60 } });
//打印
hiprintTemplate.print({});
//直接打印,需要安装客户端
hiprintTemplate.print2({});
import {autoConnect, disAutoConnect, hiprint, defaultElementTypeProvider} from 'vue-plugin-hiprint'
// autoConnect(); // 默认 自动连接直接打印客户端
disAutoConnect(); // 取消自动连接直接打印客户端
// 引入后使用示例
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({});
自定义设计可查看源码demo目录
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: {}, // 模板json
settingContainer: '#PrintElementOptionSetting', // 元素参数容器
paginationContainer: '.hiprint-printPagination', // 多面板的容器, 实现多面板, 需要在添加一个 <div class="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 默认1
history: true, // 是否需要 撤销重做功能
onDataChanged: (type, json) => { // 模板发生改变回调
console.log(type); // 新增、移动、删除、修改(参数调整)、大小、旋转
console.log(json); // 返回 template
},
onUpdateError: (e) => { // 更新失败回调
console.log(e);
},
});
// 设计器的容器
hiprintTemplate.design('#hiprint-printTemplate');
打印客户端链接在文末
资源获取方式
https://gitee.com/CcSimple/vue-plugin-hiprint
配套的打印客户端:
https://gitee.com/CcSimple/vue-plugin-hiprint#配套直接打印客户端winmaclinux