vue-plugin-hiprint插件的打印及导出pdf简单使用

vue-plugin-hiprint (基于 hiprint 2.5.4) 当时只是为了方便 作者 在vue项目中引入使用，所以以此命名。

此 插件 仅仅是一个 JavaScript【工具库】 而非 Vue【组件库】，所以它默认不包含demo中的那些组件页面（demo代码可复制使用）。

由于hiprint官网最后一次更新时间为2019年【hiprint 2.5.4 是 LGPL 协议】，后在诸多使用者及反馈下进行了许多优化调整。

开源项目地址：https://github.com/CcSimple/vue-plugin-hiprint-start

// clone 项目

git clone https://gitee.com/CcSimple/vue-plugin-hiprint-start.git

// 安装依赖

cd vue-plugin-hiprint-start && npm i

// 运行

npm run serve

Vue2项目融合vue-plugin-hiprint

自己的vue2项目整合vue-plugin-hiprint插件，仅根据自定义模版用于打印预览和导出pdf

将print-lock.css文件复制到public

安装依赖

npm install vue-plugin-hiprint

main.js中 引入安装

import {hiPrintPlugin} from 'vue-plugin-hiprint'
Vue.use(hiPrintPlugin, '$pluginName')
hiPrintPlugin.disAutoConnect(); // 取消自动连接直接打印客户端
import jquery from 'jquery'
Vue.prototype.$ = jquery

打印功能实现

import panel from './panel' 
import printPreview from './preview'
import {hiprint} from 'vue-plugin-hiprint'

//打印预览
    onlyPrint() {
      this.mergeData();
        console.log(this.printData);
        //hiprintTemplate
        this.$print(undefined, panel, this.printData, {}, {
        styleHandler: () => {
          let css = '<link href="http://hiprint.io/Content/hiprint/css/print-lock.css" media="print" rel="stylesheet">';
          return css
      },

导出pdf功能实现

import panel from './panel' 
import printPreview from './preview'
import {hiprint} from 'vue-plugin-hiprint'

// 生成 PDF
    exportToPdf(){
      console.log("触发打印预览");
      this.mergeData();
      // 初始化模板
      const hiprintTemplate = new hiprint.PrintTemplate();
      // 添加面板和元素
      hiprintTemplate.addPrintPanel(panel);

// 导出 PDF
      hiprintTemplate.toPdf(this.printData, this.formInline.customerName+this.formInline.oddNumbers+'.pdf');
      this.$notify({
                title: '成功',
                message: '下载成功',
                type: 'success'
              });
          },

字段名绑定