vue前端下载word 文档

1.

 

 

   
import { asBlob } from 'html-docx-js-typescript'
// 要保存这个docx文件推荐引入file-saver哦，你可以用npm i -D file-saver来安装
import { saveAs } from 'file-saver'
import html2canvas from 'html2canvas'

 async exportWord () {
      this.wordLoading = true
      try {
        await html2canvas(this.$refs.icmptimesImg, {
          //scale: -1,//缩放,
          dpi: 800,
          useCORS: true,
        }).then((canvas) => {
          this.icmptimesImgUrl = canvas.toDataURL()
        })
      } catch (error) {
        console.log("html2canvas error!")
        this.wordLoading = false
      }

      try {
        await html2canvas(this.$refs.tcptimesImg, {
          // scale: -1,//缩放,
          dpi: 800,
          useCORS: true
        }).then((canvas) => {
          this.tcptimesImgUrl = canvas.toDataURL()
        })
      } catch (error) {
        console.log("html2canvas error!")
        this.wordLoading = false
      }

      let content = this.$refs.wordhtml.innerHTML
      content = this.insertImg(content, 'id="icmptimesImg"', this.icmptimesImgUrl)
      content = this.insertImg(content, 'id="tcptimesImg"', this.tcptimesImgUrl)
      content = content.replace(/\b(el-tag el-tag--warning el-tag--dark|el-tag el-tag--success el-tag--dark|el-tag el-tag--dark|el-tag el-tag--danger el-tag--dark)\b/g, function ($0, $1, $2, $3) {
        return {
          "el-tag el-tag--warning el-tag--dark": "el-tag--warning",
          "el-tag el-tag--success el-tag--dark": "el-tag--success",
          "el-tag el-tag--dark": "el-tag--dark",
          "el-tag el-tag--danger el-tag--dark": "el-tag--danger"
        }[$1];
      });
      let cssstyle = `html {
      font-size: 14px;
      line-height: 1.15;
    }

    body {
      height: 100%;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      border-spacing: 2px;
      border-spacing: 2px;
      table-layout: fixed;
      word-break: break-all;
      word-wrap: break-word;
    }

    table td,
    table th {
      border: 1px solid #cad9ea;
      color: #666;
      height: 30px;
      padding-left: 10px;
    }

    table td {
      word-break: break-all;
      word-wrap: break-word;
    }

    table>tr {
      vertical-align: middle;
    }

    tr {
      display: table-row;
      border-color: inherit;
    }

    .td-title {
      color: #000;
      background-color: #e8e8e8;
    }

    .el-tag--dark {
      height: 30px;
      margin: 5px 0px 5px 10px;
      display: inline-block;
      padding: 0 10px;
      line-height: 30px;
      font-size: 12px;
      border-width: 1px;
      border-style: solid;
      border-radius: 4px;
      box-sizing: border-box;
      white-space: nowrap;
      background-color: #409eff;
      border-color: #409eff;
      color: #fff;
    }

   .el-tag--success {
      height: 30px;
      margin: 5px 0px 5px 10px;
      display: inline-block;
      padding: 0 10px;
      line-height: 30px;
      font-size: 12px;
      border-width: 1px;
      border-style: solid;
      border-radius: 4px;
      box-sizing: border-box;
      white-space: nowrap;
      background-color: #67c23a;
      border-color: #67c23a;
      color: #fff;
    }

    .el-tag--warning {
      height: 30px;
      margin: 5px 0px 5px 10px;
      display: inline-block;
      padding: 0 10px;
      line-height: 30px;
      font-size: 12px;
      border-width: 1px;
      border-style: solid;
      border-radius: 4px;
      box-sizing: border-box;
      white-space: nowrap;
      background-color: #e6a23c;
      border-color: #e6a23c;
      color: #fff;
    }

    .el-tag--danger {
      height: 30px;
      margin: 5px 0px 5px 10px;
      display: inline-block;
      padding: 0 10px;
      line-height: 30px;
      font-size: 12px;
      border-width: 1px;
      border-style: solid;
      border-radius: 4px;
      box-sizing: border-box;
      white-space: nowrap;
      background-color: #f56c6c;
      border-color: #f56c6c;
      color: #fff;
    }`
      const htmlString = `<!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style>
        ${cssstyle}
      </style>
      </head>
      <body>
        ${content}
      </body>
      </html>`
      try {
        const fileData = asBlob(htmlString).then(data => {
          saveAs(data, '测试报告.docx') // 保存为docx文件
          this.wordLoading = false
        }) // asBlob() 返回 Promise<Blob|Buffer>，用promise.then还是async语法都行 
      } catch (error) {
        this.wordLoading = false
      }
    }