hwmom-ui/src/views/print/view.vue

<template>

  <el-dialog v-model="props.isView" title="预览" :close-on-press-escape="false" :show-close="false">
    <div id="printInfo" ref="printRef">
      <div class="content" v-for=" i in pageDatas"
           :style="{width: cmToPx(pageWidth)+'px',height: cmToPx(pageHeight)+'px',marginBottom:'4px'}">
        <div v-for="i in nodes" class="node" :style="{left:i.position?.x+'px',top: i.position?.y+'px'}">
          <template v-if="i.type === 'text'">
            <TextNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="i"
                      :pageSize="{width:  cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></TextNode>
          </template>
          <template v-if="i.type === 'image'">
            <ImageNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="i"
                       :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></ImageNode>
          </template>
          <template v-if="i.type === 'barCode'">
            <BarCodeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="i"
                         :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></BarCodeNode>
          </template>
          <template v-if="i.type === 'QRCode'">
            <QRCodeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="i"
                        :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></QRCodeNode>
          </template>
          <template v-if="i.type === 'dateTime'">
            <TimeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="i"
                      :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></TimeNode>
          </template>
          <template v-if="i.type === 'select'">
            <SelectNode :isView="true" :isPrint="isPrint" :pageData="i"
                        :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"
                        v-bind="i"></SelectNode>
          </template>

        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="printFun">打印</el-button>
        <!--        <el-button type="primary" v-print="printInfoObj">打印</el-button>-->
        <el-button @click="closeDialog ">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
import { options } from '@/views/print/tool.js';
import TextNode from '@/views/print/nodes/textNode.vue';
import ImageNode from '@/views/print/nodes/image.vue';
import BarCodeNode from './nodes/barCodeNode.vue';
import QRCodeNode from './nodes/QRCodeNode.vue';
import TimeNode from './nodes/timeNode.vue';
import SelectNode from './nodes/selectNode.vue';


const props = defineProps({
  isView: {
    type: Boolean,
    required: false
  }
});
const emit = defineEmits(['update:isView']);


const isPrint = ref(false);
const printRef = ref();
const pageWidth = ref(21);
const pageHeight = ref(29.7);
const pageDatas = ref([{}, {}, {}, {}, {}, {}]);
const { cmToPx } = options;
const nodes = ref([]);
onMounted(() => {
  nodes.value = JSON.parse(localStorage.getItem('printNodes') || '[]');
  console.log(nodes.value);
});

const printInfoObj = {
  id: 'printInfo',
  preview: false,  // 是否开启预览
  beforeOpenCallback(vue) {
    console.log('触发打印工具打开前回调');
  },
  openCallback(vue) {
    console.log('触发打印工具打开的回调');
  },
  closeCallback() {
    console.log('触发关闭打印工具回调');
  },
  previewBeforeOpenCallback() {
    console.log('触发预览前回调');
  },
  previewOpenCallback() {
    console.log('触发预览的回调');
  }
};
const printFun = () => {
  isPrint.value = true;
  nextTick(() => {
    const element = printRef.value;
    let eles = element.querySelectorAll('.content');
    const pros = [];

    eles.forEach((ele, index) => {
      pros.push(
        html2canvas(ele).then(canvas => {
          const imgData = canvas.toDataURL('image/png');
          const pdf = new jsPDF();
          pdf.addImage(imgData, 'PNG', 0, 0);
          pdf.save(`${new Date().getTime()}-${index}.pdf`);
        })
      );
    });
    Promise.all(pros).then((values) => {
      console.log('PDF');
      isPrint.value = false;
    });
  });
};
const closeDialog = () => {
  emit('update:isView', false);
};
</script>
<style scoped>
.content {
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 1px solid #ccc;
}

.node {
  position: absolute;
}
</style>