vue 把html转成blob传给后台方法；把后台传回的blod，保存文件

vue 把html转成blob传给后台方法；把后台传回的blod，保存文件

// 内容需要if判断
        let echHtmlWithIf = '';
        if (this.chartImg.length) {
          if (this.exceed10Min) {
            echHtmlWithIf += `` +
              this.chartImg.map(item => ``)
              + ``;
          } else {
            echHtmlWithIf += `  
报告生成中，预计 ` + this.Dshowtime + `分钟后生成。
`;
          }
        } else {
          echHtmlWithIf = "暂无相关数据"
        }
        
//编辑 html 内容
    const html = `

  
    
          

            关于${this.alarm.monitorPoint.name}报告
          
一、通知
          ${this.alarm.remark}
           经核实，以上告警为:${this.remarkText} ，程度为:${this.resultText}。
          
          
二、数据
          
2.1图片：
          
            
              ${img0html}
              
碰撞前
            
            
              ${img2html}
              
碰撞中
            
            
              ${img4html}
              
碰撞后
            
          
          
2.2 加速度监测曲线：
          
            ${echHtmlWithIf}
          

          
${this.alarmDate}
        
  

`;
        this.html = html

直接导出 html 内容，保存到本地

         const blob = new Blob([html], {
           type: 'application/msword',
         });
         const link = document.createElement('a');
        link.download = `关于${this.alarm.monitorPoint.name}报告.docx`;
        link.href = URL.createObjectURL(blob);
        link.click();

将 html 转 blod 并 通过formData传给后台

 let html = this.html;
        let blob = new Blob([html], {
          type: 'application/msword'
        });

        let f = new FormData();
        f.append('file', blob);
        f.append('alarmLogId', this.id);
        f.append('result', this.resultText);
        f.append('remark', this.remarkText);

        alarmApi.alarmLogUploadReport(f).then((res) => {
          if (res.flag == 0) {
            console.log(res.object)
       }
        })

将后台传回blod， 下载到本地为docx

 		  const data = res
 		  console.log(data)		//  Blob {size: 1502869, type: "text/xml"}
          var blob = new Blob([data])
          var url = window.URL.createObjectURL(blob)
          var link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', `关于${this.alarm.monitorPoint.name}报告.docx`)
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)

推荐扩展阅读
vue 把blob传给后台方法
链接: http://t.csdnimg.cn/BApMC