如何使用Vue和HTMLDocx来生成美观的Word文档

npm install htmldocx

<template>  <div>    <button @click="generateWordDoc">生成Word文档</button>  </div></template><script>import htmlDocx from 'html-docx-js/dist/html-docx'export default {  methods: {    generateWordDoc() {      const content = '<h1>这是一个示例Word文档</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>'      const document = htmlDocx.asBlob(content)      saveAs(document, 'example.docx')    }  }}</script>

<template>  <div>    <button @click="generateWordDoc" class="generate-button">生成Word文档</button>  </div></template><style>.generate-button {  background-color: #007bff;  color: #fff;  padding: 10px 20px;  border: none;  border-radius: 5px;  cursor: pointer;}.generate-button:hover {  background-color: #0056b3;}</style>

import Vue from 'vue'import App from './App.vue'import WordDocGenerator from './components/WordDocGenerator.vue'Vue.component('WordDocGenerator', WordDocGenerator)new Vue({  render: h => h(App),}).$mount('#app')