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();
相关推荐
昔人'14 小时前
html`<mark>`
前端·javascript·html
云中雾丽14 小时前
Flutter主流的本地存储方案
前端
ss27314 小时前
手写Spring第7弹:Spring IoC容器深度解析:XML配置的完整指南
java·前端·数据库
前端拿破轮14 小时前
从0到1搭一个monorepo项目(二)
前端·javascript·面试
止观止14 小时前
XSS 攻击详解:原理、类型与防范策略
前端·xss
SuperherRo14 小时前
JS逆向-安全辅助项目&Yakit热加载&魔术方法&模版插件语法&JSRpc进阶调用&接口联动
javascript·安全·yakit·jsrpc·热加载
用户479492835691514 小时前
用|运算符写管道?Symbol.toPrimitive让JavaScript提前用上|>语法
前端·javascript
知识分享小能手15 小时前
uni-app 入门学习教程,从入门到精通,uni-app 基础知识详解 (2)
前端·javascript·windows·学习·微信小程序·小程序·uni-app
文心快码BaiduComate15 小时前
限时集福!Comate挂件/皮肤上线,符(福)气掉落中~
前端·后端·程序员
勇敢di牛牛15 小时前
vue3 + mars3D 三分钟画一个地球
前端·vue.js