html导出docx文件

最新推荐文章于 2025-04-23 07:12:58 发布

100斤的狗

最新推荐文章于 2025-04-23 07:12:58 发布

阅读量5.4k

点赞数 6

分类专栏： vue html-docx-js file-saver

本文链接：https://blog.youkuaiyun.com/weixin_46115860/article/details/107731454

版权

vue 同时被 3 个专栏收录

20 篇文章

订阅专栏

html-docx-js

1 篇文章

订阅专栏

file-saver

1 篇文章

订阅专栏

本文介绍了一种将HTML内容转换并导出为DOCX文件的方法，利用html-docx-js和file-saver两个npm包，通过简单的Vue组件实现文件导出功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、npm安装

$ npm install --save html-docx-js

$ npm install --save file-saver

2、引入

import htmlDocx from 'html-docx-js/dist/html-docx';
import saveAs from 'file-saver';

3、点击事件实现导出

<template>
  <div class="about">
    <button @click="this.exportClick">an</button>
  </div>
</template>

<script>
import htmlDocx from 'html-docx-js/dist/html-docx';
import saveAs from 'file-saver';
export default {
  methods: {
    exportClick() {
      var content = ` <h1>This is an about page</h1>
      <h2>This is an about page</h2>`
      var page = '<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body>' + content + '</body></html>'
      var converted = htmlDocx.asBlob(page);
      // 用 FielSaver.js里的保存方法 进行输出
      saveAs(converted, 'test.docx');
    }
  }
}
</script>

4、没事干，整理了一下写法

<script>
// 引入相关插件
import htmlDocx from 'html-docx-js/dist/html-docx';
import saveAs from 'file-saver';

export default {
    data(){
        return{
            // 页面渲染相关
            content:'',
            page:''
        }
    },
  methods: {
    exportDocx() {
      this.content = ` <h1>This is an about page</h1>
      <h2>This is an about page</h2>`;
      this.page = `<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body>${this.content}</body></html>`
      const converted = htmlDocx.asBlob(this.page);
      // 用 FielSaver.js里的保存方法 进行输出
      saveAs(converted, 'test.docx');
    }
  },
  render() {
    return (
      <div class="about">
        <button onClick={this.exportDocx}>文件导出</button>
      </div>
    )
  }
}
</script>