Browse Source

change: indent计价导出.压缩图片用以减小PDF体积.

peter 1 week ago
parent
commit
efdc9df865
1 changed files with 33 additions and 23 deletions
  1. 33 23
      src/pages/indent-manage/indent/components/exportQuota2.vue

+ 33 - 23
src/pages/indent-manage/indent/components/exportQuota2.vue

@@ -73,8 +73,8 @@
             style="vertical-align: top; text-align: right"
           >
             <img
-              v-if="mainPicture"
-              :src="mainPicture"
+              v-if="mainPicture2"
+              :src="mainPicture2"
               width="300px"
             />
           </td>
@@ -298,7 +298,10 @@
         </tr>
         <tr>
           <td colspan="2">
-            <p style="padding-top: 20px" v-html="exportForm.notes.replace(/\n/g, '<br>')"></p>
+            <p
+              style="padding-top: 20px"
+              v-html="exportForm.notes.replace(/\n/g, '<br>')"
+            ></p>
           </td>
         </tr>
 
@@ -306,7 +309,7 @@
           <td colspan="2">
             <p style="padding-top: 20px">
               <img
-                v-for="(item, index) in otherPicture"
+                v-for="(item, index) in otherPicture2"
                 :key="index"
                 :src="item"
                 width="250px"
@@ -356,8 +359,6 @@
 
 <script lang="ts" setup>
 import { defineComponent, computed } from 'vue'
-import jspdf from 'jspdf'
-import html2canvas from 'html2canvas'
 import dayjs from 'dayjs'
 import { downloadPDF } from '@/api/indent'
 defineComponent({
@@ -390,9 +391,6 @@ const city_short = {
   '': '',
 } as any
 
-const getLogoPath = () => {
-  return new URL('/assets/logo.png', import.meta.url).href
-}
 const getFreightType = (row: any) => {
   let result = 'Sea'
 
@@ -427,21 +425,13 @@ const generatePDF = () => {
 }
 // 把这个方法暴露给父组件, 否则无法在父组件被调用
 defineExpose({ generatePDF })
-const shouldSplit = (
-  nodes: HTMLElement[],
-  index: number,
-  pageHeight: number,
-) => {
-  // 计算当前这块dom是否跨越了a4大小,以此分割
-  // console.log(index, 'index start')
-  if (
-    nodes[index].offsetTop + nodes[index].clientHeight < pageHeight &&
-    nodes[index + 1] &&
-    nodes[index + 1].offsetTop + nodes[index + 1].clientHeight > pageHeight
-  ) {
-    return true
+
+const sliceImage = (urlString: string, width: number, height = width) => {
+  if (urlString) {
+    const extractedString = urlString.replace(/^https?:\/\/[^/]+/, '')
+    const resizedImageUrl = `https://mediahub.promocollection.com.au/fit-in/${width}x${height}${extractedString}`
+    return resizedImageUrl
   }
-  return false
 }
 
 const mainPicture = computed(() => {
@@ -453,6 +443,15 @@ const mainPicture = computed(() => {
   }
   return ''
 })
+const mainPicture2 = computed(() => {
+  if (
+    Array.isArray(productInfo.product_image) &&
+    productInfo.product_image.length
+  ) {
+    return sliceImage(productInfo.product_image[0], 300)
+  }
+  return ''
+})
 const otherPicture = computed(() => {
   if (
     Array.isArray(productInfo.product_image) &&
@@ -462,6 +461,17 @@ const otherPicture = computed(() => {
   }
   return []
 })
+const otherPicture2 = computed(() => {
+  if (
+    Array.isArray(productInfo.product_image) &&
+    productInfo.product_image.length > 1
+  ) {
+    return productInfo.product_image
+      .slice(1)
+      .map((i: string) => sliceImage(i, 200))
+  }
+  return []
+})
 const computedCreator = computed(() => {
   let result = ''
   if (creatorOptions.length) {