contract-business-web/src/views/contract/components/printPaymentForm.vue

<template>
  <div>
    <xy-dialog title="打印预览" :is-show.sync="isShow" :width="90" @on-ok="print" ok-text="打印">
      <template v-slot:normalContent>
        <div class="form-switch">
          <RadioGroup v-model="currentForm" type="button">
            <Radio label="pre" :disabled="!getBeforeForms">事前审批表格</Radio>
            <Radio label="post" :disabled="!getForms">事后支付表格</Radio>
          </RadioGroup>
        </div>
        
        <div class="white-container" ref="printtable">
          <div class="form-container">
            <!-- Pre-payment Form -->
            <div v-if="currentForm === 'pre'" class="payment-form">
              <div v-if="getBeforeForms" v-html="getBeforeForms"></div>
              <div v-else class="no-form-message">暂无事前审批表格内容</div>
            </div>

            <!-- Post-payment Form -->
            <div v-else class="payment-form">
              <div v-if="getForms" v-html="getForms"></div>
              <div v-else class="no-form-message">暂无事后支付表格内容</div>
            </div>
          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import { detailFundLog } from "@/api/paymentRegistration/fundLog"
import html2canvas from 'html2canvas'
import * as printJS from "print-js"

export default {
  name: 'PrintPaymentForm',
  data() {
    return {
      isShow: false,
      currentForm: 'post',
      fundLog: null
    }
  },
  computed: {
    getBeforeForms() {
      return this.fundLog && this.fundLog.contract && this.fundLog.contract.before_forms
    },
    getForms() {
      return this.fundLog && this.fundLog.contract && this.fundLog.contract.forms
    }
  },
  methods: {
    async getDetailFundLog(id) {
      try {
        const res = await detailFundLog({ id })
        this.fundLog = res
        // 如果没有事前支付表格，默认显示事后支付表格
        if (!this.getBeforeForms) {
          this.currentForm = 'post'
        }
      } catch (error) {
        console.error('获取付款详情失败:', error)
        this.$Message.error('获取付款详情失败')
      }
    },
    replaceControls(element) {
      // 替换所有输入框（文本、数字、日期）为纯文本
      const inputs = element.getElementsByTagName('input')
      Array.from(inputs).forEach(input => {
        const span = document.createElement('span')
        let displayText = input.value || ''
        
        // 处理不同类型的输入框
        if (input.type === 'checkbox' || input.type === 'radio') {
          // 获取当前选中的值
          const checkedInput = element.querySelector(`input[name="${input.name}"]:checked`)
          if (checkedInput) {
            // 获取显示文本（如果有label，使用label的文本）
            const label = element.querySelector(`label[for="${checkedInput.id}"]`)
            displayText = label ? label.textContent : checkedInput.value || ''
          } else {
            displayText = ''
          }
        } else if (input.type === 'date') {
          displayText = input.value ? new Date(input.value).toLocaleDateString() : ''
        }
        
        span.textContent = displayText
        // 复制原始输入框的样式
        span.style.cssText = window.getComputedStyle(input).cssText
        span.style.display = 'inline-block'
        span.style.width = input.offsetWidth + 'px'
        span.style.height = input.offsetHeight + 'px'
        span.style.border = 'none'
        span.style.backgroundColor = 'transparent'
        input.parentNode.replaceChild(span, input)
      })

      // 替换所有下拉框为纯文本
      const selects = element.getElementsByTagName('select')
      Array.from(selects).forEach(select => {
        const span = document.createElement('span')
        span.textContent = select.options[select.selectedIndex]?.text || ''
        // 复制原始下拉框的样式
        span.style.cssText = window.getComputedStyle(select).cssText
        span.style.display = 'inline-block'
        span.style.width = select.offsetWidth + 'px'
        span.style.height = select.offsetHeight + 'px'
        span.style.border = 'none'
        span.style.backgroundColor = 'transparent'
        select.parentNode.replaceChild(span, select)
      })

      // 替换所有文本域为纯文本
      const textareas = element.getElementsByTagName('textarea')
      Array.from(textareas).forEach(textarea => {
        const span = document.createElement('span')
        span.textContent = textarea.value || ''
        // 复制原始文本域的样式
        span.style.cssText = window.getComputedStyle(textarea).cssText
        span.style.display = 'inline-block'
        span.style.width = textarea.offsetWidth + 'px'
        span.style.height = textarea.offsetHeight + 'px'
        span.style.border = 'none'
        span.style.backgroundColor = 'transparent'
        textarea.parentNode.replaceChild(span, textarea)
      })
    },
    async print() {
      try {
        // 创建临时打印容器
        const tempContainer = document.createElement('div')
        tempContainer.style.position = 'absolute'
        tempContainer.style.left = '-9999px'
        tempContainer.style.top = '-9999px'
        document.body.appendChild(tempContainer)
        
        // 复制原始内容到临时容器
        const originalContent = this.$refs['printtable'].cloneNode(true)
        tempContainer.appendChild(originalContent)
        
        // 在临时容器中替换控件
        this.replaceControls(tempContainer)
        
        // 使用临时容器进行打印
        const canvas = await html2canvas(tempContainer, {
          backgroundColor: null,
          useCORS: true,
        })
        
        // 打印完成后移除临时容器
        document.body.removeChild(tempContainer)
        
        printJS({
          printable: canvas.toDataURL(),
          type: 'image',
          documentTitle: `苏州市河道管理处${this.currentForm === 'pre' ? '事前审批表格' : '事后支付表格'}`,
          style: '@page{margin:auto;}'
        })
      } catch (error) {
        console.error('打印失败:', error)
        this.$Message.error('打印失败')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.form-switch {
  margin-bottom: 20px;
  text-align: center;
}

.white-container {
  background: #fff;
  padding: 20px;
}

.form-container {
  position: relative;
  width: 100%;
  padding: 20px;
  font-family: SimSun, serif;
}

.payment-form {
  border: 1px solid #000;
  padding: 20px;
}

.no-form-message {
  text-align: center;
  padding: 40px;
  color: #999;
  font-size: 16px;
}

@media print {
  .white-container {
    padding: 0;
  }
  
  .form-container {
    padding: 0;
  }
  
  .payment-form {
    border: 1px solid #000;
  }
}
</style>