CEES-manage/src/views/demo/jeecg/PrintDemo.vue

<template>
  <PageWrapper>
    <a-card :bordered="false" class="j-print-demo">
      <div style="text-align: right">
        <a-button type="primary" ghost @click="onPrint">打印</a-button>
      </div>
      <section ref="print" id="printContent">
        <div style="text-align: center">
          <p style="font-size: 24px; font-weight: 800">打印测试表单</p>
        </div>
        <!--签字-->
        <a-col :md="24" :sm="24">
          <div class="sign" style="text-align: center; height: inherit">
            <a-col :span="24">
              <span>打印人员:</span>
              <a-input style="width: 30%" v-model:value="model.printer" />
              <span style="margin-left: 12.5%">打印日期:</span>
              <a-input style="width: 30%" v-model:value="model.printTime" />
            </a-col>
            <a-col :span="24"> </a-col>
            <a-col :span="24" style="margin-top: 20px">
              <span>打印内容:</span>
              <a-input style="width: 80%" v-model:value="model.printContent" />
            </a-col>
            <a-col :span="24" style="margin-top: 20px">
              <span>打印目的1:</span>
              <a-input style="width: 80%" v-model:value="model.printReason" />
            </a-col>
            <a-col :span="24" style="margin-top: 20px">
              <span>打印目的2:</span>
              <a-input style="width: 80%" v-model:value="model.printReason" />
            </a-col>
            <a-col :span="24" style="margin-top: 20px">
              <span>打印目的3:</span>
              <a-input style="width: 80%" v-model:value="model.printReason" />
            </a-col>
            <a-col :span="24" style="margin-top: 20px">
              <span>打印目的4:</span>
              <a-input style="width: 80%" v-model:value="model.printReason" />
            </a-col>
            <a-col :span="24" style="margin-top: 20px">
              <span>打印目的5:</span>
              <a-input style="width: 80%" v-model:value="model.printReason" />
            </a-col>
            <a-col :span="24" style="margin-top: 20px">
              <span>打印目的6:</span>
              <a-input style="width: 80%" v-model:value="model.printReason" />
            </a-col>
            <a-col :span="24" style="margin-top: 20px">
              <span>打印目的7:</span>
              <a-input style="width: 80%" v-model:value="model.printReason" />
            </a-col>
            <a-col :span="24" style="margin-top: 20px">
              <span>打印目的8:</span>
              <a-input style="width: 80%" v-model:value="model.printReason" />
            </a-col>
            <a-col :span="24" style="margin-top: 20px">
              <span>打印目的9:</span>
              <a-input style="width: 80%" v-model:value="model.printReason" />
            </a-col>
            <a-col :span="24" style="margin-top: 20px">
              <span>打印目的10:</span>
              <a-input style="width: 80%" v-model:value="model.printReason" />
            </a-col>
            <a-col :span="24" style="margin-top: 20px">
              <span>打印目的11:</span>
              <a-input style="width: 80%" v-model:value="model.printReason" />
            </a-col>
            <a-col :span="24" style="margin-top: 20px">
              <span>打印目的12:</span>
              <a-input style="width: 80%" v-model:value="model.printReason" />
            </a-col>
            <a-col :span="24" style="margin-top: 20px">
              <span>打印目的13:</span>
              <a-input style="width: 80%" v-model:value="model.printReason" />
            </a-col>
            <a-col :span="24" style="margin-top: 20px">
              <span>打印目的14:</span>
              <a-input style="width: 80%" v-model:value="model.printReason" />
            </a-col>
            <a-col style="margin-top: 20px" :span="24">
              <span>打印图片:</span>
              <br />
              <a-upload
                action="/jsonplaceholder.typicode.com/posts/"
                listType="picture-card"
                :fileList="model.fileList"
                @preview="handlePreview"
                @change="handleChange"
              >
                <div v-if="model.fileList.length < 3">
                  <Icon icon="ant-design:plus-outlined" />
                  <div class="ant-upload-text">Upload</div>
                </div>
              </a-upload>
              <a-modal :open="previewVisible" :footer="null" @cancel="previewVisible = false">
                <img alt="example" style="width: 100%" :src="previewImage" />
              </a-modal>
            </a-col>
          </div>
        </a-col>
      </section>
    </a-card>
  </PageWrapper>
</template>
<script lang="ts">
  import { ref, reactive } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import Icon from '/@/components/Icon/src/Icon.vue';
  import { printJS } from '/@/hooks/web/usePrintJS';

  export default {
    name: 'PrintDemo',
    components: { PageWrapper, Icon },
    props: {
      reBizCode: {
        type: String,
        default: '',
      },
    },
    setup() {
      const model = reactive({
        printer: '张三',
        printTime: '2021-12-31 23:59:59',
        printContent: '打印内容：这是一个打印测试！',
        printReason: '做一个打印测试',
        fileList: [
          {
            uid: '-1',
            name: 'xxx.png',
            status: 'done',
            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          },
          {
            uid: '-2',
            name: 'pic1.png',
            status: 'done',
            url: 'https://www.gizbot.com/img/2016/11/whatsapp-error-lead-image-08-1478607387.jpg',
          },
        ],
      });
      const previewImage = ref('');
      const previewVisible = ref(false);

      function onPrint() {
        printJS({
          printable: '#printContent',
          type: 'html',
        });
      }

      function handlePreview(file) {
        previewImage.value = file.url || file.thumbUrl;
        previewVisible.value = true;
      }

      function handleChange({ fileList }) {
        model.fileList = fileList;
      }

      return {
        model,
        previewImage,
        previewVisible,
        onPrint,
        handlePreview,
        handleChange,
      };
    },
  };
</script>
<style lang="less" scoped>
  .j-print-demo .ant-card-body {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 1%;
    border: 0 solid black;
    min-width: 800px;
    color: #000000 !important;
  }

  .sign .ant-input {
    font-weight: bolder;
    text-align: center;
    border-left-width: 0 !important;
    border-top-width: 0 !important;
    border-right-width: 0 !important;
    outline: none !important;
    box-shadow: none !important;
  }

  /* you can make up upload button and sample style by using stylesheets */
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>