Preview预览组件

约 796 字大约 3 分钟

...

2026-08-31

注意

Designer设计器组件默认内置了 Preview 组件. 无需单独引入.

Preview预览组件一般用于业务场景, 如: 打印前预览.

示例代码

preview-test.vue
<template>
  <div style="width: 100vw; height: 97vh;">
    <button @click="testPreview">显示预览组件</button>
    <!-- 自 sv-print@0.2.15起 Preview 外层需要 <div id="SVPrint"></div> 包裹 或 Designer组件内 -->
    <div id="SVPrint">
      <Preview ref="previewRef" :modalShow="modalShow"></Preview>
    </div>
  </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>

组件参数

参数键名	数据类型	默认值	说明	备注
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 浏览器打印按钮右侧

自定义预览

通过调用模板对象 API。完全自定义预览组件。

preview-custom.vue
<template>
  <!-- 样式完全你自己喜欢 -->
  <div id="preview_content">加载中...</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
// @sv-print/vue3 依赖 sv-print！
import { hiprint } from 'sv-print';
import templateJson from './templateJson';
const printData = { name: 'sv-print' };
let printTemplate = new hiprint.PrintTemplate({ template: templateJson });
onMounted(() => {
  setTimeout(() => {
    if (globalThis.$('#preview_content').length && printTemplate) {
      // 返回的是jq obj对象
      const obj = await printTemplate.getHtml(printData);
      // 插入到 #preview_content 容器中
      globalThis.$('#preview_content').html(obj);
    }
  }, 0);
});
</script>

版权所有

版权归属：sv-print

许可证：署名 4.0 国际 (CC-BY-4.0)