Preview预览组件

注意

需要 组件 ^0.2.x 版本

组件参数

参数键名	数据类型	默认值	说明	备注
printTemplate	模板json/模板对象	undefined	模板
printData	json	undefined	打印数据
printerList	array	[]	打印机列表	显示时,会自己加载
selectedPrinter	string	""	默认选中打印机名称
showPdf	boolean	true	是否显示 导出pdf 按钮
showImg	boolean	true	是否显示 导出图片 按钮
showPrint2	boolean	true	是否显示 直接打印 按钮
modalShow	boolean	false	是否显示

示例(vue3)

<template>
  <div style="width: 100vw; height: 97vh;">
    <button @click="testPreview">显示预览组件</button>
    <Preview ref="previewRef" :modalShow="modalShow"></Preview>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, ref } from "vue";
  import { Designer, Header, Preview, DragBox } from "@sv-print/vue3";
  import templateJson from "./templateJson";
  let template = ref(templateJson);
  const previewRef = ref(null);
  const testPreview = () => {
    // 查看 vue 组件实例
    console.log(previewRef.value);
    // 查看当前 实际的 preview 实例
    console.log(previewRef.value.getTarget());
    // vue 组件实例抛出的方法
    previewRef.value.init(template.value, {
      name: "i不简",
    });
    previewRef.value.show();
  }
</script>