导出PDF

src/api/labelSetting/label_setting.js

@@ -20,3 +20,13 @@ export const printLabel = data => createAPI('/label/setting/printLabel','post',d
 
 // 使用真实数据预览标签
 export const previewLabelWithRealData = data => createAPI('/label/setting/previewLabelWithRealData','post',data)
+
+// 导出预览图为PDF
+export const exportPreviewToPdf = (data) => {
+  return createAPI('/label/setting/exportPreviewToPdf', 'post', data, 'download')
+}
+
+// 导出真实数据预览为PDF
+export const exportRealDataPreviewToPdf = (data) => {
+  return createAPI('/label/setting/exportRealDataPreviewToPdf', 'post', data, 'download')
+}

src/views/modules/labelSetting/components/ZPLPreview.vue

@@ -34,6 +34,19 @@
           真实数据预览
         </el-button>
 
+        <el-button
+          type="info"
+          size="mini"
+          icon="el-icon-download"
+          :loading="pdfExportLoading"
+          :disabled="!previewImage"
+          @click="exportToPdf"
+          class="compact-btn"
+          style="flex: 1; height: 24px; min-height: 24px; max-height: 24px; padding: 4px 2px; font-size: 10px; margin: 0; border-radius: 3px;"
+        >
+          导出PDF
+        </el-button>
+
         <PrintButton
           :zpl-code="zplCode"
           :report-id="$route.params.labelSetting && $route.params.labelSetting.labelNo"
@@ -99,7 +112,7 @@ import { ZPLGenerator } from '@/utils/zplGenerator.js'
 import dynamicPaperConfig from '@/utils/paperConfigDynamic.js'
 import { debounce } from 'lodash'
 import { PrintButton } from '@/components/print'
-import { previewLabelWithRealData } from '@/api/labelSetting/label_setting.js'
+import { previewLabelWithRealData, exportPreviewToPdf, exportRealDataPreviewToPdf } from '@/api/labelSetting/label_setting.js'
 
 export default {
   name: 'ZPLPreview',
@@ -134,7 +147,8 @@ export default {
       previewImage: null,
       previewLoading: false,
       realDataPreviewLoading: false,
-      autoPreview: true // 默认开启实时预览
+      pdfExportLoading: false,
+      autoPreview: true, // 默认开启实时预览
     }
   },
   computed: {
@@ -409,6 +423,71 @@ export default {
       console.log('打印成功:', result)
       // 可以在这里添加打印成功后的逻辑，比如更新状态等
     },
+
+    async exportToPdf() {
+      const reportId = this.$route.params.labelSetting && this.$route.params.labelSetting.labelNo
+      const labelType = this.$route.params.labelSetting && this.$route.params.labelSetting.labelType
+      if (!reportId) {
+        this.$message.warning('请先设置标签编号')
+        return
+      }
+
+      if (!this.previewImage) {
+        this.$message.warning('请先生成预览图')
+        return
+      }
+
+      this.pdfExportLoading = true
+
+      try {
+        // 将blob URL转换为base64
+        const imageData = await this.convertBlobToBase64(this.previewImage)
+
+        const response = await exportPreviewToPdf({
+          reportId: reportId,
+          imageData: imageData
+        })
+
+        // 创建下载链接
+        const blob = new Blob([response.data], { type: 'application/pdf' })
+        const url = window.URL.createObjectURL(blob)
+        const link = document.createElement('a')
+        link.href = url
+
+        const filename = `${labelType}.pdf`
+
+        link.download = filename
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+        window.URL.revokeObjectURL(url)
+
+        this.$message.success(`${labelType}PDF导出成功`)
+      } catch (error) {
+        console.error('PDF导出失败:', error)
+        this.$message.error('PDF导出失败: ' + (error.message || '网络错误'))
+      } finally {
+        this.pdfExportLoading = false
+      }
+    },
+
+    async convertBlobToBase64(blobUrl) {
+      return new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest()
+        xhr.onload = function() {
+          const reader = new FileReader()
+          reader.onloadend = function() {
+            resolve(reader.result)
+          }
+          reader.onerror = reject
+          reader.readAsDataURL(xhr.response)
+        }
+        xhr.onerror = reject
+        xhr.open('GET', blobUrl)
+        xhr.responseType = 'blob'
+        xhr.send()
+      })
+    },
   },
 
   beforeDestroy() {