【vue-plugin-hiprint】常见问题汇总①

不简说
3,943 阅读8分钟

【vue-plugin-hiprint】系列文章已发布7篇啦🌈！ 本篇主要罗列各位小伙伴使用过程中的一些常见问题①。希望对你们有所帮助😄。

前言

首先希望各位清楚一点：【vue-plugin-hiprint】 是基于hiprint官网 2.5.4版本开发的一个打印插件。我并非hiprint原作者。当时只是为了方便我在 vue 项目中引用所以以此命名。

其次它底层是基于 jQuery 开发的，插件中也没有引入其他前端框架。所以它是可以在其他非 vue项目中使用。插件的打包开发环境是webpack4.x。

npm i vue-plugin-hiprint 是不包含任何UI组件的。

关键就三个 API 构建 UI。分别是：

  1. 构建 可视化拖拽设计
// 设计器 构建 到容器：$('#hiprint-printTemplate');
// grid: true // 显示网格线
hiprintTemplate.design('#hiprint-printTemplate',{ grid: true });
  1. 构建 可拖拽元素
// 构建 可拖拽元素 到容器：$('.hiprintEpContainer'); 
// provider 的键: addPrintElementTypes('defaultModule', [...]);
var providerName = 'defaultModule';
hiprint.PrintElementTypeManager.build('.hiprintEpContainer', providerName);
  1. 构建 预览的 html
// 获取打印生成的 html （返回的是个 jq 对象）
var jqObj = hiprintTemplate.getHtml(printData);
// 构建到 容器：$('#preview')
$('#preview').html(jqObj);

注意：使用环境需要支持 window 对象

1 如何运行本项目

首先项目有4个分支：

  • main（最新的代码都在这里）： vue2.x + ant1.7.x融合版 及 npm包源代码
  • npm_demo： vue2.x + ant1.7.x + npm包使用
  • npm_demo_ele： vue2.x + ElementUi 2.x + npm包使用 示例
  • npm_demo_v3 vue3.x + vite + npm包使用 示例

除主分支main，其他分支的代码合示例demo可能较旧，升级插件的版本即可。

clone项目到本地，或者下载最新的压缩包。

git clone https://gitee.com/CcSimple/vue-plugin-hiprint.git
cd vue-plugin-hiprint
npm i
# 运行
npm run serve
# 打包示例demo
npm run build-demo
# 打包npm包代码
npm run build

2 怎么融合处理？

  1. vue.config.js 关键代码如下：
// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      // 全局 jQuery
      new webpack.ProvidePlugin({
        jQuery: "jquery",
        $: "jquery"
      }),
    ],
}
  1. src/hiprint/hiprint.bundle.js 融合引入相关资源，再导出关键模块
import $ from "jquery";
// js颜色选择
import "@claviska/jquery-minicolors/jquery.minicolors.min";
// 条形码
import JsBarcode from "jsbarcode";
// 二维码
import "./plugins/qrcode.js";
// 水印
import watermark from "./plugins/watermark.js";
// 直接打印需要
import {io} from "socket.io-client";
//引入标尺
import lImg from "./css/image/l_img.svg";
import vImg from "./css/image/v_img.svg";
// pdf
import {jsPDF} from "jspdf";
import html2canvas from "html2canvas";
import Nzh from "nzh/dist/nzh.min.js"
// 解析svg 到 canvas, 二维码条形码需要
import Canvg from 'canvg';
// 默认自定义拖拽列表
import defaultTypeProvider from "./etypes/default-etyps-provider";

// ...省略

// 最后导出关键模块
var defaultElementTypeProvider = defaultTypeProvider(hiprint)
export {
  hiprint,
  defaultElementTypeProvider
}
  1. src/index.js 定义融合引入的入口文件。
// 引入关键模块
import {hiprint, defaultElementTypeProvider} from './hiprint/hiprint.bundle.js'
// 调用浏览器打印js
import "./hiprint/plugins/jquery.hiwprint.js";
// 默认配置
import "./hiprint/hiprint.config";
// 样式
import "./hiprint/css/hiprint.css"
import "./hiprint/css/print-lock.css"

// ...省略

// 挂载到全局 （其他环境引入）
window.hiprint = hiprint;
// 导出 自定义的一些方法 / hiPrintPlugin vue插件
export {
  autoConnect,
  disAutoConnect,
  hiprint,
  hiPrintPlugin,
  defaultElementTypeProvider,
}

3 打印重叠？

全部打印重叠在一页？那基本就是样式问题了。

需要在入口文件(index.html) 引入 print-lock.css

如域名： www.abc.com， 那么请确保 www.abc.com/print-lock.css 能够正常访问！

名称必须是 print-lock.css 并且需要时 link 标签

// 在index.html 名称必须为 print-lock.css 
<link rel="stylesheet" type="text/css" media="print" href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css">
// 也可为相对链接/自有链接 eg: public/print-lock.css
<link rel="stylesheet" type="text/css" media="print" href="/print-lock.css">

4 取消自动连接?

如果你看到与下图连接错误：

连接错误

这就是默认的 socket.io 自动连接打印客户端失败的报错。 因为没有打开客户端。

如若不需要直接打印功能，或者不自动连接。 在入口文件添加以下代码：

// main.js
import {autoConnect, disAutoConnect} from 'vue-plugin-hiprint'
console.log('disAutoConnect'); // 为了检验执行顺序
disAutoConnect(); // 取消自动连接

注意：入口文件！入口文件！入口文件！

原理看下图：

自动连接原因

你可以在控制台查看，当你你执行disAutoConnect时，是否先输出了 document ready。

如果是，那么请调整你代码执行位置。

5 线上无法自动连接客户端?

网站需要升级 https。 原因请阅读以下链接文章：

www.cnblogs.com/daysme/p/15…

当然，如果你有其他办法，那也是可以的。

6 如何自定义可以拖拽的元素?

详见我的另外两篇文章：

如何自定义可拖拽元素provider： https://mp.weixin.qq.com/s/n9i1j8hhVJvnlfJRPRtWog

实战-动态provider： https://mp.weixin.qq.com/s/UVkhul1tynjaUjdC_NaHfw

7 如何动态更新拖拽元素?

插件提供了一个hiprint.updateElementTypeAPI。 使用方式如下：

// tid 是定义可以拖拽的元素时自己 定义的
var tid = 'defaultModule.text';
hiprint.updateElementType(tid, (type) => {
  type.title = '这是更新后的元素';
  return type;
})

8 如何查看元素支持哪些参数?

  1. 查看文档

官网文档：hiprint.io/docs/start

我的文档：ccsimple.gitee.io/sv-print-do…

  1. 我写的 使用-参数篇文章

使用-参数篇：mp.weixin.qq.com/s/vfgSG62tA…

9 如何重新参数/自定义参数？

使用插件提供的hiprint.setConfig API。 参见文章：

使用-参数篇：mp.weixin.qq.com/s/vfgSG62tA…

10 打印回调问题？

浏览器打印，无法监听是否点击了弹出预览窗口中的 打印 或是 取消 按钮。

如果可以实现，那就不至于开发个打印客户端了~

// 浏览器预览打印
hiprintTemplate.print(this.printData, {}, {
  callback: () => {
    console.log('浏览器打印窗口已打开')
  }
})
// 直接打印
// 打印机名称: 通过 hiprintTemplate.getPrinterList() 获取 其中的 name
hiprintTemplate.print2(printData, {printer: '打印机名称', title: '打印标题'})
hiprintTemplate.on('printSuccess', function (data) {
  console.log('打印完成')
})
hiprintTemplate.on('printError', function (data) {
  console.log('打印失败')
})

11 设计器编辑/快捷键问题？

支持的快捷键如下：

  1. 删除元素（BackSpace/Delete）
  2. 多选元素（按住Ctrl/Command 点击鼠标左键）
  3. 拖拽元素（按住Ctrl/Command 可拖出设计器外）
  4. 二维码/条形码 大小调整（按住Shift 自由调整）
  5. 横向拖拽（按住Shift 拖拽）
  6. 纵向拖拽（按住Shift+Alt 拖拽）
  7. 取消元素吸附（按住按住Ctrl/Command 拖拽）
  8. 元素位置微调（选中元素 方向键 调整）
  9. 撤销（Ctrl/Command + Z）
  10. 重做（Ctrl/Command + Shift + Z）
  11. 复制元素（选中元素 Ctrl/Command + C）
  12. 粘贴复制的元素（Ctrl/Command + V）

其他编辑操作：

  1. 框选元素：(空白处开始拖拽，出现矩形选区)
  2. 框选元素微调：(矩形选区 方向键 调整)
  3. 多选元素对齐：(调用 hiprintTemplate.setElsAlign)
  4. 多选元素间隙：(调用 hiprintTemplate.setElsSpace)
  5. 获取多选元素：(调用 hiprintTemplate.getSelectEls)
  6. 更新多选元素参数：(调用 hiprintTemplate.updateOption)

示例：

// 多选元素对齐： 支持 left、vertical、right、top、horizontal、bottom、distributeHor、distributeVer
// 左对齐
hiprintTemplate.setElsAlign(‘left’);
// 间隙
hiprintTemplate.setElsSpace(10); // 垂直
hiprintTemplate.setElsSpace(10，true); // 水平
// 获取多选元素 (没有table)
var eles = hiprintTemplate.getSelectEls();
// 更新多选元素参数
// fontSize 是指元素支持的那些参数， 12 是值
hiprintTemplate.updateOption('fontSize', 12);

12 保存模板/导入模板？

// 保存模板
var json = hiprintTemplate.getJson();
// 保存模板 tid 模式 （数据相对少一些,但是一定需要先 init 对应 provider）
var jsonTid = hiprintTemplate.getJsonTid();
// 导入模板
hiprintTemplate.updata(json);
// 多面板模板导入，选中第二个面板
hiprintTemplate.updata(json,1);

13 图片元素选择图片？

hiprintTemplate = new hiprint.PrintTemplate({
  template: {}, // 模板json对象
  settingContainer: '#PrintElementOptionSetting', // 元素参数容器
  onImageChooseClick: (target) => {
    // 创建input，模拟点击，然后 target.refresh 更新
    let input = document.createElement("input");
    input.setAttribute("type", "file");
    input.click();
    input.onchange = function () {
      var file = this.files[0];
      var reader = new FileReader();
      if (file) {
        var reader = new FileReader();
        //通过文件流行文件转换成Base64字行串 
        reader.readAsDataURL(file);
        //转换成功后
        reader.onloadend = function () {
          // 通过 target.refresh 更新图片元素
          target.refresh(reader.result);
        }
      }
    }
    input.remove();
  }
});

14 关于打印纸张大小问题？

插件只是模拟一个打印的纸张大小的画布， 实际打印还是需要打印机支持对应的纸张大小才行。

  1. 浏览器打印，需要勾选对应的纸张大小，（需要打印机先设置，不会就百度）

纸张大小

  1. 直接打印，需要设置打印机默认为该模板的纸张大小，这是由于 electron API 的 bug

直接打印纸张大小不生效原因

  1. 转pdf打印 这是一个预览功能，请下载最新打印客户端源码测试
// 关键是两个参数: type:'pdf', pageSize:'80x80'
var options = {type:'pdf',pageSize:'打印机自定义的纸张大小名称', printer: '打印机名称', title: '打印标题'}
iprintTemplate.print2(printData, options);

15 关于提问的问题？

吐槽一下😂~ 有些小伙伴在群里，发的问题，真的是不太容易理解，或者说是看不懂。所以...

1 不要连 “截图” 都没有

为什么最好带上截图呢？ 因为每个人的表达能力和理解能力都不一样。当然也不能只发个截图，描述都没有。

有时你觉得你描述的很清楚了，换个角度，别人就一定能理解清楚你说的是什么了吗？

所以提问的时候尽可能的，表达清楚你遇到的问题，带上截图或许是麻烦了一些，但是对于大多数码仔来说，有图，或许就有真相。我相信大多技术圈的码友看到BUG截图，还是会好奇去点开看看的。

至少，我看到截图的时候，会想着点开看看这是个什么 BUG

2 不要愚蠢的 “反问/确认“

有时候确实“需要反问/确认”一下，比如你跟客户/老板沟通需求的时候，没太理解的时候。

但是我觉得这不适合在技术圈子里，当你反问的时候，你应该去实践操作一下，而不是在这里等着别人，回复没错，是的。至少在我看来，更喜欢看到你回复，好的，谢谢，我试试。

“反问/确认”这看着没毛病，实际好像感觉是别人没跟你讲清楚一样😂

当别人指出了问题，或者提出建议之后，动手实践去吧。

总结

以上是只是部分使用过程中的一些常见问题。 实际开发中，可能还会有更多的使用问题。

有问题不要怕，要仔细翻阅文档！ 有问题不要怕，要仔细翻阅文档！ 有问题不要怕，要仔细翻阅文档！

下一篇，将会罗列一些常用元素使用参数问题。或者说是实际开发过程中，一些需求的处理。

敬请期待下一篇😄~

欢迎各位码友转发及留言反馈，觉得不错就点个赞再走咯~

avatar
文章
阅读
粉丝