导出pdf完善功能，优化样式

package.json

@@ -33,6 +33,7 @@
     "@zxcvbn-ts/core": "^3.0.4",
     "ant-design-vue": "^4.1.2",
     "axios": "^1.6.7",
+    "canvg": "1.5.3",
     "china-area-data": "^5.0.1",
     "clipboard": "^2.0.11",
     "codemirror": "^5.65.3",

src/views/adweb/seo/Pdf.vue

@@ -75,6 +75,7 @@
       </section>
       <section class="row r2">
         <div class="item impressionsNum" style="border-color: #E3EDFE">
+          <img src="@/assets/pdfExport/img/uvicon.png"/>
           <div>
             <p class="date"><span class="fb theme-color font-size-24"
                                   style="color: #4385F4!important;">{{ statistics.uv }}</span></p>
@@ -82,6 +83,7 @@
           </div>
         </div>
         <div class="item" style="border-color: #C6DAFB">
+          <img src="@/assets/pdfExport/img/pvicon.png"/>
           <div>
             <p class="date"><span class="fb theme-color font-size-24"
                                   style="color: #4385F4!important;">{{ statistics.pv }}</span></p>
@@ -89,6 +91,7 @@
           </div>
         </div>
         <div class="item" style="border-color: #AAC8FA">
+          <img src="@/assets/pdfExport/img/unReadEnquiryNum.png"/>
           <div>
             <p class="date"><span class="fb theme-color font-size-24"
                                   style="color: #4385F4!important;">{{ statistics.averageVisit }}</span></p>
@@ -96,6 +99,7 @@
           </div>
         </div>
         <div class="item" style="border-color: #98BCF9">
+          <img src="@/assets/pdfExport/img/pingjun.png"/>
           <div>
             <p class="date"><span class="fb theme-color font-size-24"
                                   style="color: #4385F4!important;">{{ statistics.averageVisitDuration }}</span>
@@ -104,6 +108,7 @@
           </div>
         </div>
         <div class="item" style="border: none">
+          <img src="@/assets/pdfExport/img/conversionRate.png"/>
           <div>
             <p class="date"><span class="fb theme-color font-size-24"
                                   style="color: #4385F4!important;">{{ statistics.averageVisitPage }}</span>
@@ -172,7 +177,7 @@
             <a-row type="flex">
               <a-col :span="3" v-if="appointKeywordNum">
                 <div class="item">
-                  <img src="@/assets/pdfExport/zhidingci.svg" />
+                  <img src="@/assets/pdfExport/img/zhidingci.png" />
                   <p>指定词</p>
                   <p>{{ appointKeywordNum }}</p>
                 </div>
@@ -182,17 +187,17 @@
                 <div class="wrap">
                   <p class="t1">指定词排名</p>
                   <div class="content">
-                    <div class="d1"><img src="@/assets/pdfExport/NO1.svg" />1-10位</div>
+                    <div class="d1"><img src="@/assets/pdfExport/img/NO1.png" />1-10位</div>
                     <div class="d2">{{ rankInfo.appointKeyword.firstNum }}个
                     </div>
                   </div>
                   <div class="content">
-                    <div class="d1"><img src="@/assets/pdfExport/NO2.svg" />11-30位</div>
+                    <div class="d1"><img src="@/assets/pdfExport/img/NO2.png" />11-30位</div>
                     <div class="d2">{{ rankInfo.appointKeyword.secondNum }}个
                     </div>
                   </div>
                   <div class="content">
-                    <div class="d1"><img src="@/assets/pdfExport/NO3.svg" />31-100位</div>
+                    <div class="d1"><img src="@/assets/pdfExport/img/NO3.png" />31-100位</div>
                     <div class="d2">{{ rankInfo.appointKeyword.thirdType }}个
                     </div>
                   </div>
@@ -200,7 +205,7 @@
               </a-col>
               <a-col :span="3" v-if="longTailKeywordNum">
                 <div class="item">
-                  <img src="@/assets/pdfExport/changweici.svg" />
+                  <img src="@/assets/pdfExport/img/changweici.png" />
                   <p>关键词</p>
                   <p>{{ longTailKeywordNum }}</p>
                 </div>
@@ -209,78 +214,26 @@
                 <div class="wrap">
                   <p class="t1">关键词排名</p>
                   <div class="content">
-                    <div class="d1"><img src="../../../assets/seo/NO1.svg" />1-10位</div>
+                    <div class="d1"><img src="@/assets/pdfExport/img/NO1.png" />1-10位</div>
                     <div class="d2">{{ rankInfo.longTailKeyword.firstNum }}个
                     </div>
                   </div>
                   <div class="content">
-                    <div class="d1"><img src="@/assets/pdfExport/NO2.svg" />11-30位</div>
+                    <div class="d1"><img src="@/assets/pdfExport/img/NO2.png" />11-30位</div>
                     <div class="d2">{{ rankInfo.longTailKeyword.secondNum }}个
                     </div>
                   </div>
                   <div class="content">
-                    <div class="d1"><img src="@/assets/pdfExport/NO3.svg" />31-100位</div>
+                    <div class="d1"><img src="@/assets/pdfExport/img/NO3.png" />31-100位</div>
                     <div class="d2">{{ rankInfo.longTailKeyword.thirdType }}个
                     </div>
                   </div>
                 </div>
               </a-col>
-              <a-col :span="24" v-if="appointKeywordsList.length > 0">
-                <h2 class="title mb">指定词排名列表</h2>
-                <a-table
-                  ref="table"
-                  size="middle"
-                  :scroll="{x:true}"
-                  :columns="appointKeywordPageListColumns"
-                  :pagination="ipagination"
-                  :dataSource="appointKeywordsList"
-                >
-                  <template #bodyCell="{ column, record, index, text }">
-                    <template v-if="column.key === 'rowIndex'">
-                      {{ index + 1 }}
-                    </template>
-
-                    <template class="tag" v-if="column.key === 'lastRank'">
-                      {{ record.lastRank }}
-                    </template>
-
-                    <template v-if="column.key === 'positionUrl'">
-                      <a :href="text" target="_blank">{{ text }}</a>
-                    </template>
-                  </template>
-                </a-table>
-              </a-col>
-              <a-col :span="24" v-if="longTailKeywordsList.length > 0">
-                <h2 class="title mb">关键词排名列表</h2>
-                <a-table
-                  ref="table"
-                  size="middle"
-                  :scroll="{x:true}"
-                  :columns="longTailPageListColumns"
-                  :pagination="ipagination"
-                  :dataSource="longTailKeywordsList"
-                >
-                  <template #bodyCell="{ column, record, index, text }">
-                    <template v-if="column.key ==='rowIndex'">
-                      {{ index + 1 }}
-                    </template>
-                    <template class="tag" v-if="column.key ==='lastRank'">
-                      {{ record.lastRank }}
-                    </template>
-                    <template v-if="column.key ==='positionUrl'">
-                      <a :href="text" target="_blank">{{ text }}</a>
-                    </template>
-                  </template>
-                </a-table>
-              </a-col>
-
             </a-row>
             </div>
         </section>
-      </div>
-    </section>
-
-    <section class="row title-row">
+        <section class="row title-row">
       <img class="left-bg" src="@/assets/pdfExport/img/title-left-bg.png" />
       <p class="title"><img src="@/assets/pdfExport/img/title-dot.png" />指定词排名列表</p>
       <img class="right-bg" src="@/assets/pdfExport/img/title-right-bg.png" />
@@ -337,7 +290,8 @@
         </template>
       </a-table>
     </section>
-    <!--网站外链-->
+      </div>
+      <!--网站外链-->
     <div class="bg-advich">
       <section class="row title-row">
         <img class="left-bg" src="@/assets/pdfExport/img/title-left-bg.png" />
@@ -350,28 +304,28 @@
       </section>
       <section class="row r2">
         <div class="item" style="border-color: #e3edfe">
-          <img src="@/assets/pdfExport/img/outlink1.svg" />
+          <img src="@/assets/pdfExport/img/outlink1.png" />
           <div>
             <p class="date"><span class="fb theme-color font-size-24"
-                                  style="color: #4385F4!important;">-</span>
+                                  style="color: #4385F4!important;">{{ detailInfo.outlink1 ? detailInfo.outlink1 : '-' }}</span>
             </p>
             <p class="title">外链总数</p>
           </div>
         </div>
         <div class="item" style="border-color: #C6DAFB">
-          <img src="@/assets/pdfExport/img/outlink2.svg" />
+          <img src="@/assets/pdfExport/img/outlink2.png" />
           <div>
             <p class="date"><span class="fb theme-color font-size-24"
-                                  style="color: #4385F4!important;">-</span>
+                                  style="color: #4385F4!important;">{{ detailInfo.outlink2 ? detailInfo.outlink2 : '-' }}</span>
             </p>
             <p class="title">外链域</p>
           </div>
         </div>
         <div class="item" style="border:none">
-          <img src="@/assets/pdfExport/img/outlink3.svg" />
+          <img src="@/assets/pdfExport/img/outlink3.png" />
           <div>
             <p class="date"><span class="fb theme-color font-size-24"
-                                  style="color: #4385F4!important;">-</span>
+                                  style="color: #4385F4!important;">{{ detailInfo.outlink3 ? detailInfo.outlink3 : '-' }}</span>
             </p>
             <p class="title">外链发布数</p>
           </div>
@@ -379,26 +333,26 @@
 
       </section>
       <section class="row outlink-row">
-        <div class="col-sm-6">
+        <div class="col-sm-6" v-if="detailInfo?.outLinkImg?.length > 0">
           <p class="img-title">外链总数趋势</p>
           <div class="img-wrap-outlink">
-            <img src="" />
+            <img :src="detailInfo.outLinkImg[0]" />
           </div>
 
           <div class="content" id="miaoshu1">
             <p>
-              weer
+              {{ detailInfo.outLinkImgDetail1 }}
             </p>
           </div>
         </div>
-        <div class="col-sm-6">
+        <div class="col-sm-6" v-if="detailInfo?.outLinkImg2?.length > 0">
           <p class="img-title">外链变化趋势</p>
           <div class="img-wrap-outlink">
-            <img src="" />
+            <img :src="detailInfo.outLinkImg2[0]" />
           </div>
           <div class="content" id="miaoshu2">
             <p>
-              werer
+              {{ detailInfo.outLinkImgDetail2 }}
             </p>
           </div>
         </div>
@@ -437,6 +391,10 @@
         </p>
       </section>
     </div>
+    </section>
+
+   
+    
   </div>
 </template>
 
@@ -480,7 +438,17 @@ const mostAccessColumns = ref([
 // 响应式数据
 const customerName = ref("");
 const monthStr = ref("");
-const detailInfo = ref({});
+const detailInfo = ref({
+  thisMonth: '',
+  nextMonth: '',
+  outlink1: null,
+  outlink2: null,
+  outlink3: null,
+  outLinkImg: [],
+  outLinkImg2: [],
+  outLinkImgDetail1: '',
+  outLinkImgDetail2: ''
+});
 const rankInfo = ref({});
 const appointKeywordsList = ref([]);
 const longTailKeywordsList = ref([]);
@@ -502,6 +470,72 @@ const statistics = ref({
   conversionRate: "0%"
 });
 const mostAccessDatasource = ref([]);
+const ipagination = ref({
+  current: 1,
+  pageSize: 50,
+});
+const appointKeywordPageListColumns = ref([
+  {
+    title: "序号",
+    dataIndex: "rowIndex",
+    key: "rowIndex",
+    width: 100,
+    align: "center",
+    fixed: "left",
+
+  },
+  {
+    title: "关键词",
+    dataIndex: "keywords",
+    key: "keywords",
+    fixed: "left",
+    width: 300
+  },
+  {
+    title: "网址",
+    dataIndex: "positionUrl",
+    key: "positionUrl",
+    fixed: "left",
+    width: 600
+  },
+  {
+    title: "排名",
+    dataIndex: "lastRank",
+    key: "lastRank",
+    width: 100,
+  }
+]);
+const longTailPageListColumns = ref([
+  {
+    title: "序号",
+    dataIndex: "rowIndex",
+    key: "rowIndex",
+    width: 100,
+    align: "center",
+    fixed: "left",
+  },
+  {
+    title: "关键词",
+    dataIndex: "keywords",
+    key: "keywords",
+    fixed: "left",
+    width: 300
+  },
+  {
+    title: "网址",
+    dataIndex: "positionUrl",
+    key: "positionUrl",
+    fixed: "left",
+    width: 600
+  },
+  {
+    title: "排名",
+    dataIndex: "lastRank",
+    key: "lastRank",
+    width: 100,
+  }
+]);
+
 
 // 处理从 SeoPdfExport 接收的数据
 const handleSeoPdfExportData = (data) => {  
@@ -525,7 +559,9 @@ const exportPdf = async () => {
   const canvas = await html2Canvas(element, {
     useCORS: true,
     allowTaint: true,
-    scale: 2
+    scale: 2,
+    logging: false, // Disable logging
+    imageTimeout: 0 // No timeout for images
   });
   
   const contentWidth = canvas.width;
@@ -552,7 +588,7 @@ const exportPdf = async () => {
     }
   }
 
-  PDF.save(`${customerName.value}-SEO月度报告.pdf`);
+  PDF.save(`${customerName.value}-${monthStr.value}-SEO月度报告.pdf`);
 };
 
 // 生命周期钩子
@@ -570,10 +606,6 @@ onMounted(async () => {
   }
 });
 
-// 如果使用 mitt，需要在组件卸载时移除事件监听
-// onUnmounted(() => {
-//   emitter.off('SeoPdfExportData', handleSeoPdfExportData);
-// });
 </script>
 
 <style scoped lang="less">

src/views/adweb/seo/SeoPdfExport.vue

@@ -295,15 +295,15 @@
               <a-col :span="24">
                 <div class="item">
                   <p>外链总数</p>
-                  <a-input placeholder="请输入" v-model="detailInfo.outlink1" />
+                  <a-input placeholder="请输入" v-model:value="detailInfo.outlink1" />
                 </div>
                 <div class="item">
                   <p>外链域</p>
-                  <a-input placeholder="请输入" v-model="detailInfo.outlink2" />
+                  <a-input placeholder="请输入" v-model:value="detailInfo.outlink2" />
                 </div>
                 <div class="item">
                   <p>外链发布数</p>
-                  <a-input placeholder="请输入" v-model="detailInfo.outlink3" />
+                  <a-input placeholder="请输入" v-model:value="detailInfo.outlink3" />
                 </div>
               </a-col>
             </a-row>
@@ -326,7 +326,7 @@
                   <a-textarea
                     :style="detailInfo.outLinkImgDetail1.length > 1000 ? 'border-color:red':''"
                     auto-size placeholder="请输入"
-                    v-model="detailInfo.outLinkImgDetail1"></a-textarea>
+                    v-model:value="detailInfo.outLinkImgDetail1"></a-textarea>
                   <span :style="detailInfo.outLinkImgDetail1.length > 1000 ? 'color:red':''"
                         class="suffix-self">
                     {{ detailInfo.outLinkImgDetail1.length }}/1000
@@ -350,7 +350,7 @@
                   <a-textarea
                     :style="detailInfo.outLinkImgDetail2.length > 1000 ? 'border-color:red':''"
                     auto-size placeholder="请输入"
-                    v-model="detailInfo.outLinkImgDetail2"></a-textarea>
+                    v-model:value="detailInfo.outLinkImgDetail2"></a-textarea>
                   <span :style="detailInfo.outLinkImgDetail2.length > 1000 ? 'color:red':''"
                         class="suffix-self">
                     {{ detailInfo.outLinkImgDetail2.length }}/1000