vue3 print ts打印组件

落叶上的秋

已于 2023-12-07 14:32:59 修改

阅读量751

点赞数 10

文章标签： vue typescript

于 2023-12-06 11:49:18 首次发布

本文链接：https://blog.csdn.net/huanglgln/article/details/134827568

版权

依赖安装

npm install vue3-print-ts

vue3.2.*请使用v0.2.*版本；vue3.3.*请使用v0.3.*版本

全局注入

import { createApp } from 'vue'
import App from './App.vue'
import Print from 'vue3-print-ts'

const app = createApp(App)
app.directive("print", Print)

页面使用（element plus ui 例子）

<template>
  <div class="container">
    <el-row :gutter="24">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        相关文档：
        <a href="https://github.com/huang-long/vue3-print-ts" target="_blank">vue3-print-ts</a>
      </el-col>
    </el-row>

    <el-divider content-position="left">print</el-divider>

    <el-row :gutter="24">
      <el-button type="primary" size="small" icon="Printer" v-print="printObj">打印</el-button>
      <div id="loading" v-show="printLoading"></div>
    </el-row>
    <el-divider content-position="center">打印区域</el-divider>
    <div id="printMe" class="print-area">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
    </div>
    <el-divider content-position="center">打印区域</el-divider>
  </div>
</template>

<script lang="ts" setup name="DemoPrint" directives="print">
import { ref } from 'vue';
import type { PrintConf } from 'vue3-print-ts';

const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])

let printLoading = ref(true);
let printObj= ref<PrintConf>({
  ids: "printMe",
  printTitle: '打印测试',
  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
  showBackground: true,
  beforePrint() {
    console.log('打印之前')
  },
  afterPrint() {
    console.log('打印之后')
  }
})
</script>
<style lang="less" scoped>
.print-area {
  max-width: 800px;
}
</style>

文档说明

Parame	Explain	Type	OptionalValue	DefaultValue
ids	Range print ID ,required value	String	String[]	—
standard	Document type	String	String[]	html5/loose/strict
extraHead	`<head></head>`Add DOM nodes in the node, example:<meta charset="UTF-8">	String	String[]	—
extraCss	`<link>` New CSS style sheet, example: http://www.**.com/aa.css	String	—	-
printTitle	`<title></title>` Content of label	String	—	-
beforePrint	Callback function before calling printing tool, example: calback(event)	VoidFunction	—	-
afterPrint	Callback function after calling printing tool, example: calback(event)	VoidFunction	—	-
showBackground	print page show background style	Boolean	—	false