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	是否显示

组件插槽

插槽名称	描述
header	顶部 Header
leftActions	顶部 Header 按钮左侧
rightActions	预览组件顶部 Header 浏览器打印 按钮右侧

示例(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不简",
    });
    // 显示时 传递打印数据, 组件参数
    let printData = {name: "i不简"};
    previewRef.value.show(printData, {
      showPdf: true, // 是否显示 pdf导出
      showImg: true, // 是否显示 图片导出
      showPrint2: true, // 是否显示 静默打印
      showPrint: true, // 是否显示 浏览器打印
      // selectedPrinter: "默认打印机名称", // 选中的打印机
      // 传递给 导出pdf,图片的参数
      // 参数类型参考: node_modules/sv-print/dist/types.d.ts PreviewShowOptions
      // 融合了 导出pdf,图片,静默打印的参数
      options: {
        name: "传递导出名称",
        // 模糊,不清晰调整这个
        pixelRatio: 2, // 提高清晰度 默认 window.devicePixelRatio.
        onProgress: (cur, total) => {
          console.log(cur, total);
        },
      },
      // 一些事件回调
      onClick: (type) => {
        console.log(type);
      },
      onClose: () => {
        console.log("onClose");
      },
      onRender: () => {
        console.log("onRender");
      },
      callBackOptions: {
        statusCallback: (status) => {
          console.log(status);
        },
      },
    });
  }
</script>