feat:PC 数据导出需求开发

src/web/templates/pc/dataExport_sieve.html

@@ -933,7 +933,7 @@
         </div>
       </div>
       <div class="dataExport_main">
-        <div v-if="isfixed && dataType === '1'" class="fixedTr data_fixed">
+        <div v-if="isfixed" class="fixedTr data_fixed">
           <div id="previewData_bz" class="previewData_bz"></div>
           <!-- <table class="d_bz" cellspacing="0" cellpadding="0">
             <tr>
@@ -966,10 +966,8 @@
               <td>${item.url}</td>
             </tr>
         </table>
-        <div v-if="isfixed && dataType === '2'" class="fixedTr data_fixed">
-          <div id="previewData_gj" class="previewData_gj"></div>
-          <!-- <table class="d_gj" cellspacing="0" cellpadding="0">
-            <tr>
+        <table v-if="dataType === '2'" class="d_gj" cellspacing="0" cellpadding="0">
+            <tr id="firstTrGj">
               <td :rowspan="item.rowspan" :colspan="item.colspan" v-for="(item, index) in title" :key="index">
                 <span v-if="index===13&&dataType === '2'||index===12&&dataType === '2'">${item.title}<br/>(万元)</span>
                 <span v-else>${item.title}</span>
@@ -988,28 +986,6 @@
               <td>联系电话</td>
               <td>电子邮箱</td>
             </tr>
-          </table> -->
-        </div>
-        <table v-if="dataType === '2'" class="d_gj" cellspacing="0" cellpadding="0">
-          <tr id="firstTrGj">
-            <td :rowspan="item.rowspan" :colspan="item.colspan" v-for="(item, index) in title" :key="index">
-              <span v-if="index===13&&dataType === '2'||index===12&&dataType === '2'">${item.title}<br/>(万元)</span>
-              <span v-else>${item.title}</span>
-            </td>
-					</tr>
-          <tr>
-            <td>单位名称</td>
-            <td>联系人</td>
-            <td>联系电话</td>
-  
-            <td>单位名称</td>
-            <td>联系人</td>
-            <td>联系电话</td>
-  
-            <td>联系人</td>
-            <td>联系电话</td>
-            <td>电子邮箱</td>
-          </tr>
             <tr v-for="(item, index) in dataInfo.list" :key="index">
               <td>${index+1}</td>
               <td>${item.area}</td>
@@ -1158,77 +1134,17 @@
       }
     },
     mounted () {
-      window.addEventListener('scroll', this.handleScroll)
+      window.addEventListener('scroll', this.handleScroll, true)
     },
     destroyed () {
-      window.removeEventListener('scroll', this.handleScroll)
+      window.removeEventListener('scroll', this.handleScroll, true)
     },
     watch: {
       isfixed (newval, oldval) {
         if (newval) {
-          setTimeout(() => {
-            // 获取表格td宽度
-            if(this.dataType === '1') {
-              var topTds = $(".d_bz tr:last");
-            } else {
-              var topTds = $(".d_gj:nth-child(2) tr:first");
-              var topTdsMin = $(".d_gj:nth-child(2) tr:last");
-            }
-            var proNode = document.getElementById('previewData_bz')
-            var node = document.getElementById('firstTr')
-            if(this.dataType ===  '2') {
-              proNode = document.getElementById('previewData_gj')
-              node = document.getElementById('firstTrGj')
-              var height = 54
-            } else {
-              var height = node.offsetHeight // dom高
-            }
-            var width = node.offsetWidth // dom宽
-            html2canvas(node, {
-              width: width,
-              height: height,
-              backgroundColor: '#EBF5FE',
-              scale: 2,
-              X: 0,
-              Y: 0,
-              // scrollX: -3, // 如果左边多个白边 设置该偏移-3 或者更多
-              // scrollY: -10,
-              useCORS: true, // 是否使用CORS从服务器加载图像 !!!
-              allowTaint: true // 是否允许跨域图像污染画布  !!!
-            }).then(function(canvas){
-              proNode.append(canvas)
-            });
-            // 获取顶部title DOM
-            // if(this.dataType === '1') {
-            //   var fixedTds = $('.fixedTr.data_fixed .d_bz tr').children()
-            //   topTds = topTds.children();
-            // } else {
-            //   let $widthMinArr = []
-            //   var fixedTds = $('.fixedTr.data_fixed .d_gj tr:nth-child(1)').children()
-            //   var fixedMinTds = $('.fixedTr.data_fixed .d_gj tr:nth-child(2)').children()
-            //   topTds = topTds.children();
-            //   topTdsMin = topTdsMin.children()
-            //   for(let m = 0; m < topTdsMin.length; m++){
-            //     const $width = $(topTds.eq(m)).outerWidth()
-            //     $widthMinArr.push($width)
-            //   }
-            //   // 把取到的宽度赋值给顶部title
-            //   for(var f = 0; f < fixedMinTds.length; f++) {
-            //     const $Dom = $(fixedMinTds.eq(f))
-            //     $($Dom).css("width", $widthMinArr[f]+'px')
-            //   }
-            // }
-            // let $widthArr = []
-            // for(let m = 0; m < topTds.length; m++){
-            //   const $width = $(topTds.eq(m)).outerWidth()
-            //   $widthArr.push($width)
-            // }
-            // // 把取到的宽度赋值给顶部title
-            // for(var f = 0; f < fixedTds.length; f++) {
-            //   const $Dom = $(fixedTds.eq(f))
-            //   $($Dom).css("width", $widthArr[f]+'px')
-            // }
-          }, 200)
+          this.$nextTick(() => {
+            this.setHtmlCanvas(this.dataType)
+          })
         }
       }
     },
@@ -1247,6 +1163,35 @@
           $(".d_bz img").width(w);
         });
       },
+      setHtmlCanvas (type) {
+        var proNode = document.getElementById('previewData_bz')
+        if(!proNode) return
+        proNode.innerHTML = ''
+        var node = document.getElementById('firstTr')
+        if(type ===  '2') {
+          node = document.getElementById('firstTrGj')
+          var height = 54
+        } else {
+          var height = node.offsetHeight // dom高
+        }
+        if(node) {
+          var width = node.offsetWidth // dom宽
+          html2canvas(node, {
+            width: width,
+            height: height,
+            backgroundColor: '#EBF5FE',
+            scale: 2,
+            X: 0,
+            Y: 0,
+            // scrollX: -3, // 如果左边多个白边 设置该偏移-3 或者更多
+            // scrollY: -10,
+            useCORS: true, // 是否使用CORS从服务器加载图像 !!!
+            allowTaint: true // 是否允许跨域图像污染画布  !!!
+          }).then(function(canvas){
+            proNode.append(canvas)
+          });
+        }
+      },
       // 监听滚动
       handleScroll () {
         var st =
@@ -1265,22 +1210,31 @@
           $('.footer-two').removeClass('bottomfixed').hide()
         }
         st > 1300 ? (this.isfixed = true) : (this.isfixed = false)
+        // 获取表格滚动距离
+        let $scrollLeft = document.querySelector('.previewData_bz canvas')
+        let $scrolltable = document.querySelector('.dataExport_main')
+        if($scrolltable) {
+          $scrolltable = $scrolltable.scrollLeft
+        }
+        if ($scrollLeft) {
+          $scrollLeft.style.transform = 'translateX(-' + $scrolltable + 'px)'
+        }
       },
       selectField (data) {
         this.dataType = data
         if(data === '1') {
           this.title = [{rowspan: 1,colspan: 1,title: '序号',},
-        {rowspan: 1,colspan: 1,title: '省份',},
-        {rowspan: 1,colspan: 1,title: '城市',},
-        {rowspan: 1,colspan: 1,title: '公告标题',},
-        {rowspan: 1,colspan: 1,title: '公告类别',},
-        {rowspan: 1,colspan: 1,title: '发布时间',},
-        {rowspan: 1,colspan: 1,title: '采购单位',},
-        {rowspan: 1,colspan: 1,title: '中标单位',},
-        {rowspan: 1,colspan: 1,title: '项目名称',},
-        {rowspan: 1,colspan: 1,title: '中标金额',},
-        {rowspan: 1,colspan: 1,title: '公告内容',},
-        {rowspan: 1,colspan: 1,title: '剑鱼标讯地址',}]
+            {rowspan: 1,colspan: 1,title: '省份',},
+            {rowspan: 1,colspan: 1,title: '城市',},
+            {rowspan: 1,colspan: 1,title: '公告标题',},
+            {rowspan: 1,colspan: 1,title: '公告类别',},
+            {rowspan: 1,colspan: 1,title: '发布时间',},
+            {rowspan: 1,colspan: 1,title: '采购单位',},
+            {rowspan: 1,colspan: 1,title: '中标单位',},
+            {rowspan: 1,colspan: 1,title: '项目名称',},
+            {rowspan: 1,colspan: 1,title: '中标金额',},
+            {rowspan: 1,colspan: 1,title: '公告内容',},
+            {rowspan: 1,colspan: 1,title: '剑鱼标讯地址',}]
         } else if(data === '2'){
           // this.title = ['序号', '省份', '城市', '公告标题', '公告类别', '公告内容', '发布时间', '公告地址', '剑鱼标讯地址', '项目名称', '项目编号', '项目范围', '预算金额', '中标金额', '开标日期', '采购单位信息', '招标代理机构', '中标单位信息(来源:招标公告网站)', '中标单位信息(来源:国家企业公示网站)']
           this.title = [
@@ -2027,6 +1981,7 @@
                 dataNode.renderImg()
                 var ele = document.getElementById("dataExport_table");
                 ele.scrollIntoView()
+                dataNode.setHtmlCanvas(dataType)
               })
             } else {
               dataNode._data.noDataDialog = true