Vue中实现HTML到HTMLDocx转换：一种简单而快捷的文档生成方式

npm install html-docx-js

<template>
  <div>
    <button @click="convertToDocx">导出文档</button>
  </div>
</template>

<script>
import htmlDocx from 'html-docx-js';

export default {
  name: 'DocxConversion',
  data() {
    return {
      htmlContent: '<h1>这是一个示例文档</h1><p>这是文档内容的一部分。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2270">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680269188252.png" alt="绘蛙AI商品图">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2270">绘蛙AI商品图</a>
                            <p>电商场景的AI创作平台，无需高薪聘请商拍和文案团队，使用绘蛙即可低成本、批量创作优质的商拍图、种草文案</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="绘蛙AI商品图">
                                <span>178</span>
                            </div>
                        </div>
                        <a href="/ai/2270" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="绘蛙AI商品图">
                        </a>
                    </div>
                '
    }
  },
  methods: {
    convertToDocx() {
      const docx = htmlDocx.asBlob(this.htmlContent);
      const link = document.createElement('a');
      link.href = URL.createObjectURL(docx);
      link.download = '导出的文档.docx';
      link.click();
    }
  }
}
</script>