Vue中下载内容为word文档

奥利奥的路飞

于 2024-08-16 10:27:44 发布

阅读量387

点赞数 5

分类专栏： vue 导出文章标签： vue.js word 前端

本文链接：https://blog.csdn.net/ninewu/article/details/141249691

版权

vue 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

导出

1 篇文章 0 订阅

订阅专栏

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>