vue element ui 导出word文件方法

1首先安装导出word需要的依赖

-- 安装 docxtemplater
npm install docxtemplater pizzip  --save
 
-- 安装 jszip-utils
npm install jszip-utils --save
 
-- 安装 jszip
npm install jszip --save
 
-- 安装 FileSaver
npm 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模板文件（按自己所需格式），放到项目public文件夹下，如图所示：

 4.前端页面部分如图

 代码如下

1.  
   <div class="home-css">
2.  
   <el-button style="margin: 20px" type="success" size="large" @click="outword"
3.  
   >导出申请表</el-button
4.  
   >
5.  
   <el-card class="el-card-css">
6.  
   <div style="display: flex; align-items: center; margin-top: 20px">
7.  
   <span>所在部门:</span>
8.  
   <el-input v-model="organ" placeholder="" clearable class="input" />
9.  
   <span>姓名:</span>
10.  
    <el-input v-model="name" placeholder="" clearable class="input" />
11.  
    <span>性别:</span>
12.  
    <el-input v-model="gender" placeholder="" clearable class="input" />
13.  
    </div>
14.  
    <div style="display: flex; align-items: center; margin-top: 20px">
15.  
    <span>年龄:</span>
16.  
    <el-input v-model="age" placeholder="" clearable class="input" />
17.  
    <span>出差天数:</span>
18.  
    <el-input v-model="days" placeholder="" clearable class="input" />
19.  
    <span>职务:</span>
20.  
    <el-input v-model="worker" placeholder="" clearable class="input" />
21.  
    </div>
22.  
     
23.  
    <div style="display: flex; align-items: center; margin-top: 20px">
24.  
    <span>时间:</span>
25.  
    <el-input v-model="date" placeholder="" clearable class="input" />
26.  
    </div>
27.  
     
28.  
    <div style="display: flex; align-items: center; margin-top: 20px">
29.  
    <span>工作详情:</span>
30.  
    <el-input
31.  
    v-model="work"
32.  
    maxlength="90"
33.  
    show-word-limit
34.  
    type="textarea"
35.  
    style="width: 500px; margin-left: 20px"
36.  
    />
37.  
    </div>
38.  
    </el-card>
39.  
    </div>

data数据如下

1.  
   organ: '',
2.  
   name: '',
3.  
   gender: '',
4.  
   age: '',
5.  
   days: '',
6.  
   worker: '',
7.  
   date: '',
8.  
   work: '',
9.  
    
10.  
    wordData: {
11.  
    title: '出差申请表',
12.  
    organ: '',
13.  
    name: '',
14.  
    gender: '',
15.  
    age: '',
16.  
    days: '',
17.  
    worker: '',
18.  
    date: '',
19.  
    work: ''
20.  
    },

点击导出方法事件如下

1.  
   outword () {
2.  
   this.wordData.organ = this.organ
3.  
   this.wordData.name = this.name
4.  
   this.wordData.gender = this.gender
5.  
   this.wordData.age = this.age
6.  
   this.wordData.days = this.days
7.  
   this.wordData.worker = this.worker
8.  
   this.wordData.date = this.date
9.  
   this.wordData.why = this.why
10.  
     
11.  
    const that = this
12.  
    const word = '/出差申请表.docx'
13.  
    const wordname = '出差申请表.docx'
14.  
    JSZipUtils.getBinaryContent(word, function (error, content) {
15.  
    if (error) {
16.  
    throw error
17.  
    }
18.  
    const zip = new PizZip(content)
19.  
    const doc = new Docxtemplater().loadZip(zip)
20.  
    doc.setData({
21.  
    ...that.wordData
22.  
    })
23.  
     
24.  
    try {
25.  
    doc.render()
26.  
    } catch (error) {
27.  
    const e = {
28.  
    message: error.message,
29.  
    name: error.name,
30.  
    stack: error.stack,
31.  
    properties: error.properties
32.  
    }
33.  
    console.log(JSON.stringify({ error: e }))
34.  
    throw error
35.  
    }
36.  
    const out = doc.getZip().generate({
37.  
    type: 'blob',
38.  
    mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
39.  
    })
40.  
    saveAs(out, wordname)
41.  
    })
42.  
    },

5.注意word文件格式一定要以.docx结尾，文件名一定要对应上，不然会报错，报错的话就看引入的word文件

这篇好文章是转载于：学新通技术网