vue 将列表中的数据导出为word文件

最新推荐文章于 2024-09-06 17:50:58 发布

feifei_Tang

最新推荐文章于 2024-09-06 17:50:58 发布

阅读量5.7k

点赞数 6

分类专栏： java开发实例 Vue 文章标签： vue 导出word

本文链接：https://blog.csdn.net/feifei_tang/article/details/103198070

版权

本文介绍如何在Vue项目中实现列表数据导出为Word文件。通过安装docxtemplater、jszip-utils、jszip和FileSaver等依赖，引入模板，将列表数据替换到Word模板中，最后调用导出方法，完成数据的Word格式导出。

摘要由CSDN通过智能技术生成

需求：
点击“导出”按钮，将列表中的数据导出为word文件。

1.安装依赖。

需要的插件：docxtemplater、jszip-utils、jszip、FileSaver。

cnpm install docxtemplater pizzip --save-dev
cnpm install jszip-utils --save 
cnpm install jszip --save
cnpm install file-saver --save

2.引入依赖包。

import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import {
   saveAs} from 'file-saver'

3.添加word模板。

（1）首先，根据需要导出的word文件的要求，先使用word制作出模板，数据使用{变量}代替。
比如：
在这里插入图片描述
（2）将word模板添加到项目中。
注意：
模板文件推荐放在静态目录文件下。
使用vue-cli2的时候，放在static目录下。使用vue-cli3的时候，放在public目录下。

4.在组件中使用。

<div>
   <el-table :data="dataList" stripe fit v-loading="tableLoading">
       <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
       <el-table-column prop="enterpriseName" label="企业名称" align="center" ></el-table-column>
       <el-table-column prop="year" label="年份" align="center"></el-table-column>
       <el-table-column prop="quarter"