diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
index f68914d65..d2a8e4836 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
@@ -41,6 +41,9 @@
               <el-dropdown-item v-has="'main_edit'">
                 <div id="chart-temp-sync" @click="chartBySync"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
               </el-dropdown-item>
+              <el-dropdown-item v-has="'main_edit'">
+                <div id="chart-htmltopdf" @click="htmlToPdf"><i class="nz-icon nz-icon-download1"></i>{{ $t('overall.downloadToPdf') }}</div>
+              </el-dropdown-item>
             </template>
           </top-tool-more-options>
         </div>
@@ -72,6 +75,9 @@
               <el-dropdown-item v-has="'main_edit'">
                 <div id="chart-temp-sync" @click="chartBySync"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
               </el-dropdown-item>
+              <el-dropdown-item v-has="'main_edit'">
+                <div id="chart-htmltopdf" @click="htmlToPdf"><i class="nz-icon nz-icon-download1"></i>{{ $t('overall.downloadToPdf') }}</div>
+              </el-dropdown-item>
             </template>
           </top-tool-more-options>
         </div>
@@ -146,9 +152,10 @@ import chartTempBox from '@/components/common/rightBox/chartTempBox'
 import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
 import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
 import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
+import htmlToPdfMixin from '@/components/common/mixin/htmlToPdfMixin'
 export default {
   name: 'panelTabNew',
-  mixins: [subDataListMixin, detailViewRightMixin],
+  mixins: [subDataListMixin, detailViewRightMixin, htmlToPdfMixin],
   props: {
     from: String,
     obj: Object,
@@ -172,6 +179,7 @@ export default {
   data () {
     return {
       fromRoute,
+      pdfId: 'pdfDom',
       panelTabLoading: false,
       showTopBtn: false, // top按钮
       visible: false,
@@ -724,6 +732,42 @@ export default {
       if (type === 'duplicate') {
         this.editChart(chartInfo, true)
       }
+    },
+    htmlToPdf () {
+      const dom = document.getElementsByClassName(this.pdfId)[0]
+      if (dom) {
+        // dom = dom.getElementsByClassName('vue-grid-layout')[0]
+        this.scrollbarWrap.scrollTop = this.scrollbarWrap.scrollHeight
+        this.$refs.chartList.onScroll(this.scrollbarWrap.scrollTop)
+        let flag = true
+        this.showScreenLoading(true)
+        let timer = setInterval(() => {
+          flag = true
+          this.$refs.chartList.copyDataList.forEach(chart => {
+            if (chart.type !== 'group') {
+              flag = flag && chart.loaded
+            } else if (chart.collapse) {
+              chart.children.forEach(groupChart => {
+                flag = flag && groupChart.loaded
+              })
+            }
+          })
+          if (flag) {
+            clearInterval(timer)
+            timer = null
+            setTimeout(() => {
+              document.body.style.height = 'auto'
+              // document.getElementsByTagName('html')[0].style.overflow = 'visible'
+              const position = dom.getBoundingClientRect()
+              console.log(position)
+              this.getPdf(dom, -1 * position.left, -1 * position.top)
+              // this.getPdf(dom, 0, 0)
+            }, 2000)
+          }
+        }, 200)
+      } else {
+        this.showScreenLoading(false)
+      }
     }
   },
   mounted () {