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

复制代码

// 内容需要if判断
        let echHtmlWithIf = '';
        if (this.chartImg.length) {
          if (this.exceed10Min) {
            echHtmlWithIf += `<div v-if="exceed10Min" id="chartId">` +
              this.chartImg.map(item => `<img src="${item.src}" width="550"/>`)
              + `</div>`;
          } else {
            echHtmlWithIf += `  <p v-else class="ml20" style="margin-left: 20px;">报告生成中，预计 ` + this.Dshowtime + `分钟后生成。</p>`;
          }
        } else {
          echHtmlWithIf = "暂无相关数据"
        }
        
//编辑 html 内容
    const html = `
<html>
  <body>
    <div id="pcContract">
          <p style="text-align: center;font-size: 24px; font-weight: bold; line-height: 60px;">
            关于${this.alarm.monitorPoint.name}报告</p>
          <p class="ar-contit" style="font-size: 20px; font-weight: bold; line-height: 60px;">一、通知</p>
          <div class="ar-context ml20" style="text-indent: 2em;margin: 10px 0;">${this.alarm.remark}</div>
          <div class="ar-context ml20" style="text-indent: 2em;margin: 10px 0;"> 经核实，以上告警为:${this.remarkText} ，程度为:${this.resultText}。
          </div>
          <p style="font-size: 20px; font-weight: bold; line-height: 60px;">二、数据</p>
          <p style="font-size: 18px; font-weight: bold; line-height: 60px;margin-bottom: 40px;">2.1图片：</p>
          <div>
            <div style="text-align: center;margin-bottom: 20px;">
              ${img0html}
              <p>碰撞前</p>
            </div>
            <div style="text-align: center;margin-bottom: 20px;">
              ${img2html}
              <p>碰撞中</p>
            </div>
            <div style="text-align: center;margin-bottom: 20px;">
              ${img4html}
              <p>碰撞后</p>
            </div>
          </div>
          <p style="font-size: 18px; font-weight: bold; line-height: 60px; margin-bottom: 40px;">2.2 加速度监测曲线：</p>
          <div>
            ${echHtmlWithIf}
          </div>

          <p class="dateP" style="text-align: right; line-height: 60px;">${this.alarmDate}</p>
        </div>
  </body>
</html>
`;
        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