Vue中下载内容为word文档

1.使用 html-docx-js：这是一个将 HTML 转换为 Word 文档的库。
2. 利用 Blob 和 FileSaver.js：创建并下载生成的 Word 文档。

在 Vue.js 中实现步骤如下:

1. npm 安装 html-docx-js 和 file-saver

npm install html-docx-js
npm install file-saver

2.引入插件

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

3. 页面使用（vue3中使用）

<template><div><div ref="contentToConvertRef"><!-- 这里是你要转换为 Word 文档的页面内容 --><!-- 样式要写行内，表格样式在下面处理了--><h3 style="text-align: center">这是一个标题</h3><el-table :data="tableData" ref="tableRef"><el-table-column prop="name" label="名称" align="center" /><el-table-column prop="age" label="年龄" align="center" /><el-table-column prop="sex" label="性别" align="center" /><el-table-column prop="phone" label="联系电话" align="center" /><el-table-column prop="address" label="地址" align="center" /><el-table-column label="操作" align="center"><template #default><el-button type="text" @click="viewTableData">查看</el-button><el-button type="text" @click="editTableData">修改</el-button></template></el-table-column> </el-table><!-- 你可以在这里放置更多内容 --></div><button @click="downloadAsWord">下载为 Word</button></div>
</template>

<script setup lang="ts">const contentToConvertRef = ref<any>(null)const downloadAsWord = async () => {// 获取要转换为 Word 的 HTML 内容if (!contentToConvertRef.value.length) {return}// 表格下载会不全，如果有表格需要修改样式添加下面这部分const tables = contentToConvertRef.value.querySelectorAll('table')tables.forEach((table: any, tableIndex: any) => {table.style.width = '100%'table.querySelectorAll('td, th').forEach((cell: any, index: any) => {if (cell) {const indexNum = (index + 1) % 7 // 因为我最后一列是操作列，不想让下载所以进行了判断，如果没有则不需要判断if (indexNum === 0) {// 添加这个时候一定要在css中给些样式，不然页面会有变化cell.style.display = 'none'} else {// 每列进行了平分宽度cell.style.width = '20%'// 如果没有给写列居中，下载时页面会进行居中，如果不需要则可不写cell.style.textAlign = 'center'}}})})const content = contentToConvertRef.value.innerHTML// 包装 HTML 为完整的文档结构const contentWithHeader = `<!DOCTYPE html><html><head><meta charset="utf-8"><title>Document</title></head><body>${content}</body></html>`// 使用 htmlDocx 转换为 Word 文档const docxBlob = htmlDocx.asBlob(contentWithHeader)const newDate = dateFormat(new Date())// 使用 file-saver 保存文件saveAs(docxBlob, `${newDate}报告.docx`)}
</script><style lang="scss" scoped>.el-table {:deep(.el-table__cell:last-child) {display: block !important;}}
</style>