fs-admin

Appearance

print 打印组件 ​

TIP

不要用 flex 布局！不要用 flex 布局！不要用 flex 布局！

基础使用 ​

vue
<script setup lang="ts">
// 是否显示打印
const isPrinter = ref(false)
// 打印组件实例
const fsPrinterRef = ref()

/* 开始打印 */
const onPrint = () => {
  //可以使用v-model 也可以使用fsPrinterRef.value?print()方法
  isPrinter.value = true
}
</script>
<template>
  <fs-printer v-model="isPrinter" ref="fsPrinterRef">
      <!-- 要打印的内容 -->
       <div style="overflow: auto">
        <el-table :data="tableData">
          <el-table-column prop="date" label="Date" width="180" />
          <el-table-column prop="name" label="Name" width="180">
            <template #default="{ row }">
              <el-tag type="success">{{ row.name }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="Address" width="300" />
        </el-table>
        <div style="margin: 12px 0">更多表单组件演示：</div>
        <div>
          <el-radio-group v-model="status">
            <el-radio value="1">Option 1</el-radio>
            <el-radio value="2">Option 2</el-radio>
          </el-radio-group>
        </div>
        <div>
          <el-checkbox-group v-model="status2">
            <el-checkbox value="1">Option 1</el-checkbox>
            <el-checkbox value="2">Option 2</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
  <fs-printer>
</template>

打印 pdf ​

vue
<script setup lang="ts">
// 引入打印pdf方法
import { printPdf } from '@/components/FsPrinter/util'

const onPrintPdf = () => {
  const loading = ElLoading.service({ text: '加载中' })
  printPdf({
    url: '/test.pdf',
    done: () => {
      loading.close()
    },
  })
}
</script>

属性 ​

参数说明类型默认值可选值
modelValue是否显示打印Booleanfalsetrue
headerStyle页眉样式Object
bodyStyle内容样式Object
footerStyle页脚样式Object
title标题String
direction纸张方向Stringlandscape(横向)
portrait(纵向)
orientation纸张旋转Stringuprightrotate-left(向左旋转)
rotate-right(向右旋转)
target打印位置String_iframe_self
static是否在页面中显示Booleanfalsetrue

事件 ​

名称说明返回值
done打印结束事件

插槽 ​

名称说明参数
default默认插槽
header页眉插槽
footer页脚插槽