feat: 内置报告下载预览功能

src/components/table/report/builtinReportTable.vue

@@ -59,10 +59,10 @@
     </el-table-column>
   </el-table>
   <div class="table-operation-all">
-    <el-checkbox v-model="checkbox" @change="builtinReportCheckbox"></el-checkbox>
+    <el-checkbox v-model="checkboxAll" @change="builtinReportCheckbox"></el-checkbox>
     <div class="table-operation-all-span">
       <span>{{ $t('overall.all') }}</span>
-      <span :disabled="downloadAgentFlag" :class="{'table-operation-all-checkbox': checkbox}" @click="batchDownload">{{$t('report.batchDow')}}</span>
+      <span :class="{'table-operation-all-checkbox': checkboxAll}" @click="batchDownload">{{$t('report.batchDow')}}</span>
     </div>
   </div>
 </template>
@@ -70,6 +70,7 @@
 <script>
 import table from '@/mixins/table'
 import { get } from '@/utils/http'
+import axios from 'axios'
 export default {
   name: 'builtinReportTable',
   mixins: [table],
@@ -99,8 +100,7 @@ export default {
           show: true
         }
       ],
-      checkbox: false,
-      downloadAgentFlag: false,
+      checkboxAll: false,
       checkboxIds: '',
       builtinId: ''
     }
@@ -109,9 +109,9 @@ export default {
     select (objs) {
       this.checkboxIds = objs.map(item => { return item.id }).join(',')
       if (objs.length > 0) {
-        this.checkbox = true
+        this.checkboxAll = true
       } else {
-        this.checkbox = false
+        this.checkboxAll = false
       }
     },
     builtinReportCheckbox (objs) {
@@ -123,32 +123,53 @@ export default {
       console.log(objs)
     },
     batchDownload: function () {
-      this.downloadAgentFlag = true
-      get('/report/job/batchDownloadPdf', { ids: this.checkboxIds }).then(data => {
-        this.downloadAgentFlag = false
-        let fileName = 'confagent'
-        const disposition = data.headers['content-disposition']
-        if (disposition) {
-          fileName = disposition.split(';')[1].split('filename=')[1]
+      const fileName = 'builtinReport' + '-' + this.getTimeString() + '.zip'
+      const params = {
+        ids: this.checkboxIds
       }
-        // 由于ie不支持download属性，故需要做兼容判断
-        if (navigator.appVersion.toString().indexOf('.NET') > 0) {
-          // ie独有的msSaveBlob属性，data.data为Blob文件流
-          window.navigator.msSaveBlob(data.data, fileName)
+      axios.get('/report/job/batchDownloadPdf', { responseType: 'blob', params: params }).then(res => {
+        if (window.navigator.msSaveOrOpenBlob) {
+          // 兼容ie11
+          const blobObject = new Blob([res.data])
+          window.navigator.msSaveOrOpenBlob(blobObject, fileName)
         } else {
-          // 以下流程即为文章开始的下载流程
-          const url = window.URL.createObjectURL(data.data)
-          const link = document.createElement('a')
-          link.style.display = 'none'
-          link.href = url
-          link.download = fileName
-          document.body.appendChild(link)
-          link.click()
-          window.URL.revokeObjectURL(link.href)
+          const url = URL.createObjectURL(new Blob([res.data]))
+          const a = document.createElement('a')
+          document.body.appendChild(a) // 此处增加了将创建的添加到body当中
+          a.href = url
+          a.download = fileName
+          a.target = '_blank'
+          a.click()
+          a.remove() // 将a标签移除
         }
-      }).catch(() => {
-        this.downloadAgentFlag = false
+      }, error => {
+        const $self = this
+        const reader = new FileReader()
+        reader.onload = function (event) {
+          const responseText = reader.result
+          const exception = JSON.parse(responseText)
+          if (exception.message) {
+            $self.$message.error(exception.message)
+          } else {
+            console.error(error)
+          }
+        }
+        reader.readAsText(error.response.data)
       })
+    },
+    getTimeString () {
+      const split = '-'
+      const date = new Date()
+      const year = date.getFullYear()
+      const month = this.formatNum(date.getMonth() + 1)
+      const day = this.formatNum(date.getDate())
+      const hours = this.formatNum(date.getHours())
+      const minutes = this.formatNum(date.getMinutes())
+      const seconds = this.formatNum(date.getSeconds())
+      return year + split + month + split + day + ' ' + hours + split + minutes + split + seconds
+    },
+    formatNum (num) {
+      return num > 9 ? num : '0' + num
     }
   }
 }

src/mixins/data-list.js

@@ -3,6 +3,7 @@ import { defaultPageSize, fromRoute, position } from '@/utils/constants'
 import { get, del } from '@/utils/http'
 import { ref } from 'vue'
 import pagination from '@/components/common/Pagination'
+import axios from 'axios'
 export default {
   components: {
     pagination
@@ -74,7 +75,7 @@ export default {
       if (params) {
         this.searchLabel = { ...this.searchLabel, ...params }
       }
-      this.searchLabel = { ...this.searchLabel, ...this.pageObj }
+      this.searchLabel = { ...this.searchLabel, ...this.pageObj}
       this.tools.loading = true
       delete this.searchLabel.total
       let listUrl = this.url
@@ -146,37 +147,48 @@ export default {
       this.rightBox.show = true
     },
     download (u) {
-      get('/report/job/downloadPdf', { id: u.id }).then(data => {
-        this.downloadAgentFlag = false
-        let fileName = 'confBuiltin'
-        const disposition = data.headers['content-disposition']
-        if (disposition) {
-          fileName = disposition.split(';')[1].split('filename=')[1]
+      const fileName = 'builtinReport' + '-' + this.getTimeString() + '.pdf'
+      const params = {
+        id: u.id
       }
-        // 由于ie不支持download属性，故需要做兼容判断
-        if (navigator.appVersion.toString().indexOf('.NET') > 0) {
-          // ie独有的msSaveBlob属性，data.data为Blob文件流
-          window.navigator.msSaveBlob(data.data, fileName)
+      axios.get('/report/job/downloadPdf', { responseType: 'blob', params: params }).then(res => {
+        if (window.navigator.msSaveOrOpenBlob) {
+          // 兼容ie11
+          const blobObject = new Blob([res.data])
+          window.navigator.msSaveOrOpenBlob(blobObject, fileName)
         } else {
-          // 以下流程即为文章开始的下载流程
-          const url = window.URL.createObjectURL(data.data)
-          const link = document.createElement('a')
-          link.style.display = 'none'
-          link.href = url
-          link.download = fileName
-          document.body.appendChild(link)
-          link.click()
-          window.URL.revokeObjectURL(link.href)
+          const url = URL.createObjectURL(new Blob([res.data]))
+          const a = document.createElement('a')
+          document.body.appendChild(a) // 此处增加了将创建的添加到body当中
+          a.href = url
+          a.download = fileName
+          a.target = '_blank'
+          a.click()
+          a.remove() // 将a标签移除
         }
-      }).catch(() => {
-        this.downloadAgentFlag = false
+      }, error => {
+        const $self = this
+        const reader = new FileReader()
+        reader.onload = function (event) {
+          const responseText = reader.result
+          const exception = JSON.parse(responseText)
+          if (exception.message) {
+            $self.$message.error(exception.message)
+          } else {
+            console.error(error)
+          }
+        }
+        reader.readAsText(error.response.data)
       })
     },
     preview (u) {
-      get('/report/job/view', { id: u.id }).then(res => {
-        if (res.code === 200) {
-          console.log(res)
+      const params = {
+        id: u.id
       }
+      axios.get('/report/job/view', { params: params }).then(res => {
+        const prevWindow = window.open('', '')
+        prevWindow.document.write(res.data)
+        prevWindow.focus()
       })
     },
     esc () {
@@ -194,6 +206,20 @@ export default {
     search (params) {
       this.pageObj.pageNo = 1
       this.getTableData(params)
+    },
+    getTimeString () {
+      const split = '-'
+      const date = new Date()
+      const year = date.getFullYear()
+      const month = this.formatNum(date.getMonth() + 1)
+      const day = this.formatNum(date.getDate())
+      const hours = this.formatNum(date.getHours())
+      const minutes = this.formatNum(date.getMinutes())
+      const seconds = this.formatNum(date.getSeconds())
+      return year + split + month + split + day + ' ' + hours + split + minutes + split + seconds
+    },
+    formatNum (num) {
+      return num > 9 ? num : '0' + num
     }
   },
   watch: {

src/views/charts/charts/chartDetectionsTable.vue

@@ -4,7 +4,7 @@
     <div class="cn-detection__row">
       <div v-if="security" class="cn-detection__header">
         <span :class="iconClass"><i :class="iconClass" class="cn-icon cn-icon-attacker"></i>{{detection.offenderIp || '-'}}</span>
-        <div :class="iconClass" class="domain cn-detection-domain">{{detection.domain}}</div>
+        <div :class="iconClass" class="domain cn-detection-domain" v-if="detection.domain">{{detection.domain}}</div>
         <span class="line">-------</span>
         <span class="circle"></span>
         <i class="cn-icon cn-icon-attacked" ></i>{{detection.victimIp || '-'}}

src/views/report/builtinReport.vue

@@ -4,10 +4,10 @@
       <div class="cn-builtin-left-title">
         {{$t('report.category')}}
       </div>
-      <div class="cn-builtin-left-menu" :class="{'cn-active': builtinId === ''}" @click="builtinTabs('')">
+      <div class="cn-builtin-left-menu" :class="{'cn-active': builtinId === ''}" @click="builtinTabs('', '')">
         {{$t('dns.all')}}
       </div>
-      <div class="cn-builtin-left-menu" :class="{'cn-active': builtinId === item.id}" v-for="item in builtinReportLeftMenu" :key="item.id" @click="builtinTabs(item.id)">
+      <div class="cn-builtin-left-menu" :class="{'cn-active': builtinId === item.id}" v-for="item in builtinReportLeftMenu" :key="item.id" @click="builtinTabs(item, item.id)">
         {{item.name}}
       </div>
     </div>
@@ -85,9 +85,9 @@ export default {
         }
       })
     },
-    builtinTabs (id) {
+    builtinTabs (data, id) {
       this.builtinId = id
-      this.getTableData({ id: this.builtinId })
+      this.getTableData({ name: data.name, tempId: data.id })
     }
   },
   mounted () {