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

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

相关推荐
DoraBigHead4 分钟前
🧠【彻底读懂 reduce】acc 是谁?我是谁?我们要干嘛?
前端·javascript·面试
汪子熙25 分钟前
CSS 中 td:last-child a 选择器详解
前端·javascript
q5673152332 分钟前
Koa+Puppeteer爬虫教程页面设计
javascript·css·爬虫
北北~Simple39 分钟前
第一次搭建数据库
服务器·前端·javascript·数据库
GanGuaGua1 小时前
Vue3常用指令
前端·javascript·vue.js
欧阳天风1 小时前
录音实时上传
前端·javascript
灵犀学长1 小时前
解锁HTML5页面生命周期API:前端开发的新视角
前端·html·html5
源码云商1 小时前
基于 SpringBoot + Vue 的 IT 技术交流和分享平台的设计与实现
vue.js·spring boot·后端
致博软件F2BPM1 小时前
Element Plus和Ant Design Vue深度对比分析与选型指南
前端·javascript·vue.js
一斤代码8 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue