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

相关推荐
小李飞飞砖几秒前
React Native 组件间通信方式详解
javascript·react native·react.js
小李飞飞砖1 分钟前
React Native 状态管理方案全面对比
javascript·react native·react.js
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
拾光拾趣录3 小时前
虚拟DOM
前端·vue.js·dom
爱学习的茄子3 小时前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神3 小时前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript
ruanhongbiao3 小时前
饿了么el-upload上传组件报错:TypeError: ***.upload.addEventListener is not a function
javascript·elementui
_一两风3 小时前
JS执行机制-event loop
javascript
止观止3 小时前
JavaScript对象创建9大核心技术解析
开发语言·javascript·ecmascript
1024小神3 小时前
cocos游戏开发中,如何制作一个空气墙
前端·javascript