首页 前端知识 前端html-docx实现html转word,并导出文件,文字 图片

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

2024-08-25 23:08:16 前端知识 前端哥 476 911 我要收藏

前端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文档里,这样,没有网,也能看到图片

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16857.html
标签
word
评论
发布的文章

LoopBack组件JSONAPI使用指南

2024-09-04 23:09:43

编译JSONCPP源码

2024-09-04 23:09:49

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!