当前位置：首页 > news >正文

vue纯前端根据页面或者后台数据，读取本地文档模板，填充数据后并导出

news 来源：原创 2025/6/14 6:40:54

最近接了个活，需要根据表格数据和用户给定的文档模板，生成报告，因为没得后端，所以做了一个纯前端的生成报告并下载，现实如下：

纯前端根据页面或者后台数据，读取本地文档模板，填充数据后并导出

1、技术 vue3 + element-plus 或者 vue2 + element-ui
2、安装依赖

npm install docxtemplater
npm install pizzip
npm install file-saver

3、模板文件，以doc为例，放在本地public
在这里插入图片描述
4、具体代码实现（复制可用）

<!-- 前端实现，获取本地文档模板，在页面上根据数据，导出一个有数据的word -->
<template><el-table :data="tableData" style="width: 100%"><el-table-column label="Date" width="180"><template #default="scope"><div style="display: flex; align-items: center"><el-icon><timer /></el-icon><span style="margin-left: 10px">{{ scope.row.date }}</span></div></template></el-table-column><el-table-column label="Name" width="180"><template #default="scope"><el-popover effect="light" trigger="hover" placement="top" width="auto"><template #default><div>name: {{ scope.row.name }}</div><div>address: {{ scope.row.address }}</div></template><template #reference><el-tag>{{ scope.row.name }}</el-tag></template></el-popover></template></el-table-column><el-table-column label="Operations"><template #default="scope"><el-button size="small" @click="generateReport(scope.row)">生成报告</el-button><el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button><el-button  size="small"  type="danger"  @click="handleDelete(scope.$index, scope.row)">Delete</el-button></template></el-table-column></el-table>
</template><script setup>
// import Docxtemplater from 'docxtemplater'
// import PizZip from 'pizzip'
import { saveAs } from 'file-saver'const tableData = [{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},
]
const handleEdit = (index,row ) => {console.log(index, row)
}
const handleDelete = (index, row) => {console.log(index, row)
}const generateReport = async (row) => {console.log(row)try {// 1. 加载Word模板文件console.log(window.origin)const response = await fetch('/mb.docx')const arrayBuffer = await response.arrayBuffer()// 2. 初始化docxtemplater（老版本）// const zip = new PizZip(arrayBuffer)// const doc = new Docxtemplater().loadZip(zip)//新const PizZip = require('pizzip');const Docxtemplater = require('docxtemplater');const zip = new PizZip(arrayBuffer);const doc = new Docxtemplater(zip);// 3. 准备模板数据（根据你的Word模板结构调整）let templateData = {title: '数据分析报告',name:row.name,date:row.date,address:row.address,}// 4. 渲染模板doc.render(templateData)// 5. 生成并下载文件const out = doc.getZip().generate({ type: 'blob' })saveAs(out, `数据分析报告_${new Date().getTime()}.docx`)} catch (error) {console.error('生成报告失败:', error)}
}
</script>