vue无需引入第三方, 将web页面内容直接下载为docx

vue无需引入第三方, 将web页面内容直接下载为docx

将web页面内容重绘 html ,通过 a 标签直接下载

通过写行内样式,控制docx中的文字图效果

复制代码
 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 = "暂无相关数据"
        }

        let img0 = false, img2 = false, img4 = false
        let img0html = `<img src="${this.img64[0]}" width="550" />`,
          img2html = `<img src="${this.img64[1]}" width="550" />`,
          img4html = `<img src="${this.img64[2]}" width="550" />`

        this.nullImgs.forEach(e => {
          if (e == 0) {
            img0 = true
          } else if (e == 2) {
            img2 = true
          } else if (e == 4) {
            img4 = true
          }
        });

        if (img0) {
          img0html = `<img src="${this.errorImgurl}" width="200">`
        }
        if (img2) {
          img2html = `<img src="${this.errorImgurl}"  width="200">`
        }
        if (img4) {
          img4html = `<img src="${this.errorImgurl}"  width="200">`
        }

        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
        // 导出
       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();
相关推荐
光影少年2 分钟前
vue3.0性能提升主要通过那几方面体现的?
前端·vue.js
小磊哥er15 分钟前
【前端工程化】前端开发中的这些设计规范你知道吗
前端
江城开朗的豌豆15 分钟前
路由守卫:你的Vue路由‘保安’,全局把关还是局部盯梢?
前端·javascript·vue.js
Jinxiansen021123 分钟前
Vue 3 响应式核心源码详解(基于 @vue/reactivity)
前端·javascript·vue.js
OEC小胖胖5 小时前
去中心化身份:2025年Web3身份验证系统开发实践
前端·web3·去中心化·区块链
Cacciatore->6 小时前
Electron 快速上手
javascript·arcgis·electron
vvilkim6 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
某公司摸鱼前端7 小时前
ES13(ES2022)新特性整理
javascript·ecmascript·es13
ai小鬼头8 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz8 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试