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

相关推荐
失落的多巴胺31 分钟前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear34 分钟前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息36 分钟前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月37 分钟前
1.vue权衡的艺术
前端·vue.js·开源
RunsenLIu38 分钟前
基于Vue.js + Node.js + MySQL实现的图书销售管理系统
vue.js·mysql·node.js
样子201841 分钟前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿42 分钟前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘43 分钟前
vue文本插值
javascript·vue.js·ecmascript
华子w90892585944 分钟前
基于 SpringBoot+Vue.js+ElementUI 的 “花开富贵“ 花园管理系统设计与实现7000字论文
vue.js·spring boot·elementui
孤水寒月2 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html