JS前端导出

前端导出

//1导出  后台返回的文件路径，进行拼接下载
    itemDown() {
      console.log('点击了导出按钮', AIAPI.IdentifyRecord.exportIdentificationRecordById)
      async () => {
        const loading = this.$loading.service({
          target: '#IdentifyRecord',
          lock: true,
          text: '正在导出...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
        })
        const params = this.ruleForm
        const res = await newPost9004({
          url: AIAPI.IdentifyRecord.exportIdentificationRecordById,
          data: params,
        })
        const { code, message, data } = res.data
        loading.close()
        if (code === 200) {
          const downloadFileA = document.createElement('a')
          document.body.append(downloadFileA)
          //自己定义的路径 加上 后端返回的路径
          downloadFileA.href = this.Url + '/' + data
          downloadFileA.download = ''
          downloadFileA.rel = 'noopener noreferrer'
          downloadFileA.click()
          document.body.removeChild(downloadFileA)
          this.$message.success('导出成功!')
        } else {
          this.$message.error(message)
        }
      }
    },
//2 导出 后端返回二进制流文件 拿到结果在进行类型转换
    async itemDown() {
      const loading = this.$loading.service({
        target: '#IdentifyRecord',
        lock: true,
        text: '正在导出...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const params = this.ruleForm
      /*
       * 解析blob响应内容并下载
       * @param {*} res blob响应内容
       * @param {String} mimeType MIME类型
       */
      function resolveBlob(res, mimeType) {
        const aLink = document.createElement('a')
        let blob = new Blob([res.data], { type: mimeType })
        let fileName = '识别记录.xlsx'
        aLink.href = URL.createObjectURL(blob)
        aLink.setAttribute('download', fileName) // 设置下载文件名称
        document.body.appendChild(aLink)
        aLink.click()
        document.body.removeChild(aLink)
      }
      let res = await newPost9004({
        method: 'post',
        url: AIAPI.IdentifyRecord.exportIdentificationRecordById,
        data: params,
        responseType: 'blob'
      })
      resolveBlob(
        res,
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      )
      loading.close()
    },

图片地址转 base64

//点击动植物ai识别获取当前行的数据
aiDistinguish(item) {
      let base_url = item.img[0].url //后台获取的图片路径
      let isBase = false
      getBase64(base_url)
        .then(function(base64) {
          // const that = this 转base64成功之后要做的事情
          localStorage.setItem('url2', base64)
          isBase = true
          // console.log(base64)
        }, function(err) {
          console.log(err)
        })
//主方法 用来图片地址转base64的
      function getBase64(img) { // 传入图片路径，返回base64
        function getBase64Image(img, width, height) { // width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
          let canvas = document.createElement('canvas')
          canvas.width = width ? width : img.width
          canvas.height = height ? height : img.height
          let ctx = canvas.getContext('2d')
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
          let dataURL = canvas.toDataURL()
          return dataURL
        }
        let image = new Image()
        image.crossOrigin = ''
        image.src = img
        let deferred = $.Deferred()
        if (img) {
          image.onload = function () {
            deferred.resolve(getBase64Image(image))// 将base64传给done上传处理
          }
          return deferred.promise()// 问题要让onload完成后再return sessionStorage['imgTest']
        }
      }
      if (isBase) {
        let path = '/index/aiIdentify/onlineAIRecognition'
        this.$router.push(path)
      }
    },

单击按钮video截图_图片保存至本地比获取图片地址转成base64的相关信息

// 动植物AI识别按钮
    aiDistinguish() {
      let fileName = '识别图片'
      savePic(fileName)
      function savePic(fileName) {
        let fileType = 'png' // 如果文件名中没有带后缀，默认使用png
        let video = document.querySelector('#ai_pich') // 找到需要截图的video标签
        let canvas = window.canvas = document.createElement('canvas')
        canvas.width = video.videoWidth
        canvas.height = video.videoHeight
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height) // 图片大小和视频分辨率一致
        let strDataURL = canvas.toDataURL('image/' + fileType) // canvas中video中取一帧图片并转成dataURL
        let arr = strDataURL.split(',')
        //获取了 转成base64的文件
        localStorage.setItem('url', strDataURL)
        let mime = arr[0].match(/:(.*?);/)[1]
        let bstr = atob(arr[1])
        let n = bstr.length
        let u8arr = new Uint8Array(n)
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        let blob = new Blob([u8arr], {
          type: mime
        })
        let url = window.URL.createObjectURL(blob)
        let a = document.createElement('a')
        a.style.display = 'none'
        a.href = url
        a.download = fileName
        document.body.appendChild(a)
        a.click()
        setTimeout(function () {
          document.body.removeChild(a)
          window.URL.revokeObjectURL(url)
        }, 1000)
      }
      let path = '/index/aiIdentify/onlineAIRecognition'
      this.$router.push(path)
    },

将base64转成文件类型

function dataURLtoFile(dataurl, filename) { // 将base64转换为文件
      let arr = dataurl.split(','); let mime = arr[0].match(/:(.*?);/)[1]
      let bstr = atob(arr[1]); let n = bstr.length; let u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, { type: mime })
    }

新增导出具体代码

 <el-button plain size="small" class="but1" @click="handleDown" v-loading="loading1">导出</el-button>
 import { getRllDataPageExport } from "@/api/dataAnalysis";
 	handleDown() {
        this.loading1=true; 
        let params = {
          startTime: this.params.startTime + ' 00:00:00',
          endTime: this.params.endTime + ' 23:59:59',
          projectId: this.params.projectId
    };
	getRllDataPageExport(params).then(res => {
		 //res后端范湖的是blob文件流
         //文件流处理	
         let blob = new Blob([res], { type: "application/vnd.ms-excel" });  
         //创建一个隐藏的a链接
         const a = document.createElement("a");
         //将a标签添加到body中
         document.body.appendChild(a);
         //去除a标签的样式
         a.style.display = "none";  
         //设置连接地址
         a.href = URL.createObjectURL(blob);
         //设置下载文件的名称
         a.download = '人流量数据.xlsx';
         //模拟点击事件
         a.click();
         //移除创建的a标签和下载地址
         document.body.removeChild(a);
         window.URL.revokeObjectURL(a.href);
         this.loading1=false;
       }).catch(err=>{
       console.log('err',err)
    })
 },
// dataAnalysis.js文件中定义 getRllDataPageExport接口  
// 注意事项：responseType: 'blob'
export function getRllDataPageExport(params, encryptType = 1) {
    return request({
        url: `/dataHistory/getRllDataPageExport`,
        method: 'get',
        responseType: 'blob',
        params: {
            ...params,
            encryptType
        }
    })
}

注意事项：responseType: ‘blob’