Vue2中使用sv-print示例介绍sv-print 可视化打印组件是使用svelte开发的打印设计器组件(基于 hi

概述

Vue2中使用sv-print示例介绍

示例代码

<template>
  <Designer :autoConnect="false" :template="template" :printData="printData" :events="events" :key="designerKey"></Designer>
</template>

<script>
import { Designer } from '@sv-print/vue'
import { disAutoConnect, hiprint } from "@sv-print/hiprint"

export default {
  components: { Designer },
  data() {
    return { 
        designerKey: 0,
        template: {}, 
        printData: {},
        events: {
            template: {},
            printData: {},
            onSave: function (templateKey, templateLayoutData) {
                //console.log(templateKey)
                //console.log(templateLayoutData)
                this.template = JSON.parse(JSON.stringify(templateLayoutData));
            },
            onEdit: function (templateLayoutData) {
                //console.log(templateLayoutData)
                this.template = JSON.parse(JSON.stringify(templateLayoutData));
            },
            onEditData: function (templatePrintData) {
                //console.log(JSON.parse(JSON.stringify(templatePrintData)))
                this.printData = JSON.parse(JSON.stringify(templatePrintData));
            }
        } 
    };
  },
  mounted() {
    disAutoConnect();
  },
  methods: {
    printTest(){
        let hiprintTemplate = new hiprint.PrintTemplate({
            template : this.events.template
        });
        hiprintTemplate.print(this.events.printData)
    }
  },
};
</script>

示例说明

designerKey :
用于强制组件重新渲染。
第一次传递template和printData时，Designer能够正常显示数据，第二次传递template和printData时(template和printData发生变化后)，Designer显示的是第一次传递的数据。
因此使用:key去强制组件重新渲染。

disAutoConnect :
禁用自动连接客户端打印机。
正常来说，如果使用浏览器打印，就使用disAutoConnect，如果不使用这个的话，可以看到控制台输出，一般都是提示webSocket连接失败。

原本Designer参数里已经有autoConnect了，但为什么还使用disAutoConnect，是因为使用autoConnect后，控制台还是出现了提示webSocket连接失败，所以使用disAutoConnect。

events :
事件回调，这个是为了获取事件回调返回的值。
具体来说，就是要获取设计器里的template和printData。
本来是不需要的，因为onDesigned方法里就会返回hiprint,designerUtils这些对象，用这些对象API去操作设计器就可以了，比如获取模板json之类的。

    onDesigned(e) {
      // 这里会 回调 2 个 关键对象
      console.log(e);
      console.log(e.hiprint); // hiprint 模块
      // 更多 API 可查看 log
      console.log(e.designerUtils); // 设计器 对象
      console.log(e.designerUtils.printTemplate); // 模板 对象
    }

但在实际使用中发现onDesigned方法里的对象，无法获取到模板json, 打印数据，导出json，或者说，获取到的数据始终是初始化时候的数据，之后在设计器里拖拽元素，并不会把数据存到你在onDesigned获取的对象里。具体可自行尝试。

// 获取设计器模板 json
designerUtils.printTemplate.getJson();
// 导出模板json文件
designerUtils.export();

这里开始说下传递的events
sv-print可视化打印组件不完全指南① 评论里，有小伙伴指出，通过props传events,events类型是对象,对象中onSave方法即是改写保存到浏览器的方法。

TA说到onSave方法，是怎么来的？我们可以通过项目下的node_modules,找到sv-print文件夹找到index.mjs. \

然后，搜索一下onSave, 就能找到对应的方法Save(),发现里面写着this.options.events.onSave。

以此类推，用this.options.events可以找到其他的事件，据此，共发现3个方法， this.options.events.onSave,this.options.events.onEdit,this.options.events.onEditData。

这里分别对应设计器里的保存按钮 -> 保存到浏览器，编辑模板数据，编辑打印数据。

以onSave为例，方法里有两个参数(e,t)，因此，我们定义的events里，写一个onSave方法，对应也是两个参数,然后输出，就能看到对应的值是什么了，或者直接看index.mjs，在onSave对应的方法里，看它传了什么值就行，我们可以看到，一个是templateKey,一个是printTemplate.getJson()，据此，就能知道是什么了。

最终，events里共写了3个方法，注意下，onEdit和onEditData是在设计器里打开编辑数据窗体，点击应用后的实践，具体自行尝试。还有，为什么events还写了template和printData参数，这个是为了获取设计器里的数据，通过事件触发，把值写进去，因为用API获取不了。获取到template和printData，才方便我们集成到项目里。

printTest :
打印测试方法, 这个只是个参考案例，就是怎么调用浏览器打印。这个也是为了方便集成项目使用。正常来说，我们不会每次都打开设计器，然后用设计器里的预览 -> 打印去打印报表。
常规操作是我们会用一个设计器去设计模板，把设计的数据存起来，然后在需要的地方，获取设计器模板的内容，配合数据，调用打印。

插件安装

这里讲一下插件怎么配置到设计器上

sv-print在线案例

进入官方文档 sv-print | sv-print (gitee.io)
在首页可以看到"插件支持"，点击去里面，可以看到具体有哪些插件包.

在项目中安装插件包并引入,配置代码如下。

<template>
   <Designer :plugins="plugins" :key="designerKey"></Designer>
</template>
  
<script>
import { Designer } from "@sv-print/vue";
import { default as echartPlugin} from "@sv-print/plugin-ele-echarts"
import { default as bwip } from "@sv-print/plugin-ele-bwip-js"
import { default as fabric} from "@sv-print/plugin-ele-fabric"


export default {
    components: { Designer },
    data() {
        return {
            designerKey : 0,
            plugins:[]
        }
    },
    mounted(){
        this.plugins.push(echartPlugin())
        this.plugins.push(bwip({}))
        this.plugins.push(fabric())
        this.designerKey++;
    },
    ...
}