前端html-docx实现html转word，并导出文件，文字+图片

qq_41737172

已于 2024-06-06 15:07:08 修改

阅读量563

点赞数 6

分类专栏： vue node 文章标签：前端 html word

于 2024-05-30 17:19:59 首次发布

本文链接：https://blog.csdn.net/qq_41737172/article/details/139329591

版权

vue 同时被 2 个专栏收录

19 篇文章 1 订阅

订阅专栏

node

2 篇文章 0 订阅

订阅专栏

前端html-docx实现html转word，并导出文件
前端web页面有文字，有图片，保存web的css效果
在这里插入图片描述

使用工具：html-docx
官方网址：http://docs.asprain.cn/html-docx/readme.html

步骤：
1 npm install html-docx-js
npm install file-saver
import FileSaver from “file-saver”;
import htmlDocx from “html-docx-js/dist/html-docx”;

2 写html，写行内样式，word可显示效果；
设置图片宽度 width=‘XX’（不设置的话，图片显示宽高效果不理想）

3 导出的方法 var converted = htmlDocx.asBlob(content);
saveAs(converted, ‘test.docx’);

<template>
  <div class="container">
    <breadCrumb></breadCrumb>
    <section>
      <wrapBox class="ar-box">
        <div id="pcContract">
          <div class="ar-title" style="text-align: center;font-size: 24px; font-weight: bold; line-height: 60px;">
            <p>关于{{alarm.monitorPoint.name}}限高架发生碰撞报警的报告</p>
          </div>
          <div class="sr-con">
            <div class="ar-conbox">
              <div class="ar-contit" style="font-size: 20px; font-weight: bold; line-height: 60px;">一、告警通知</div>
              <div class="ar-context ml20" style="text-indent: 2em;margin: 10px 0;"> {{alarm.remark}} </div>
            </div>
            <div class="ar-conbox">
              <div class="ar-contit" style="font-size: 20px; font-weight: bold; line-height: 60px;">二、监测数据</div>
              <div class="mb10" style="font-size: 18px; font-weight: bold; line-height: 60px;margin-bottom: 20px ;">2.1
                视频监测图片：</div>
              <div class="ar-context">
                <div class="ar-imgs" style="text-align: center;margin-bottom: 20px;">
                  <img class="ar-imgCss" :src="imgList[0]" width="600" />
                  <p>碰撞前</p>
                </div>
                <div class="ar-imgs" style="text-align: center;margin-bottom: 20px;">
                  <img class="ar-imgCss" :src="imgList[2]" width="600" />
                  <p>碰撞中</p>
                </div>
                <div class="ar-imgs" style="text-align: center;margin-bottom: 20px;">
                  <img class="ar-imgCss" :src="imgList[4]" width="600" />
                  <p>碰撞后</p>
                </div>
              </div>
            </div>
          </div>
          <footer>
            <p class="dateP" style="text-align: right;">{{alarm.addTime | ymd3}}</p>
          </footer>
        </div>
        <el-button type="primary" @click="download()">下载</el-button>
      </wrapBox>
    </section>
  </div>
</template>
<script>
  import alarmApi from '@/api/alarm/record'
  import deviceApi from '@/api/device/device'
  import ChartItem from "../Equipment/chartItem";

  import FileSaver from "file-saver";
  import htmlDocx from "html-docx-js/dist/html-docx";

  export default {
    name: "",
    components: {
      ChartItem,
    },
    data() {
      return {
        id: '',
        alarm: { monitorPoint: { name: '' } },
        imgList: [],
      };
    },
    computed: {   },
    mounted() {
      this.init();
      this.$nextTick(() => {
      });
    },
    methods: {
      init() {
        this.id = this.$route.params.id ? this.$route.params.id : '';
        console.log(',', this.id)
        alarmApi.getDetail(this.id).then((res) => {
          if (res.flag) {
            this.alarm = res.object;
            this.getImg()
          } else {
          }
        }).catch();
      },
      getImg() {
        let data = {
          showProof: true,
          ids: [this.alarm.id]
        }
        alarmApi.getData(data).then((res) => {
          if (res.flag == 0) {
            let strImg = res.data[0].alarmLogProof[0].imageUrl;
            let splitImg = strImg ? strImg.split(",") : '';
            this.imgList = splitImg
          }
        })
      },
      download() {
        let contentHtml = document.getElementById('pcContract').innerHTML;
        let content = `
          <!DOCTYPE html><html>
          <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          </head>
          <body>
            <div>
            ${contentHtml}
            </div>
          </body>
        </html>
        `;
        let converted = htmlDocx.asBlob(content);
        FileSaver.saveAs(converted, `关于${this.alarm.monitorPoint.name}限高架发生碰撞报警的报告.docx`);
      },
      //over
    },
  };
</script>
<style lang="scss" scoped>
  .container {
    >section {
      padding: 20px;

      .detail {

        header {
          margin-bottom: 20px;

          h2 {
            font-size: 18px;
            color: $cyan2;
          }
        }

        section {
          display: flex;
          flex-direction: column;
          color: #859fce;


          .buttons {
            padding-left: 20px;

            .el-button {
              width: 100px;
            }
          }
        }
      }
    }
  }

  .ar-box {
    color: #fff;

  }

  .ar-conbox {
    margin-bottom: 20px;
  }

  .ar-title {
    text-align: center;
    font-size: 20px;

  }

  .ar-title p {
    margin-bottom: 10px;
  }

  .ar-contit {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .ar-imgs {
    text-align: center;
    margin-bottom: 20px;
  }

  .ar-imgCss {
    width: 60%;
  }

  .ml20 {
    margin-left: 20px;
  }

  .mb10 {
    margin-bottom: 10px;
  }

  .dateP {
    text-align: right;
  }
</style>

以上方法，有个问题，只有在有网络的情况下，图片才能显示，因为图片是在线地址，所以，docx的大小很小；后面一篇文章，将图片转成base64，把图片加载到docx文档里，这样，没有网，也能看到图片