vue element ui 导出word文件方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了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文件夹下，如图所示：

vue element ui 导出word文件方法

4.前端页面部分如图

vue element ui 导出word文件方法

代码如下

      <div class="home-css">
        <el-button style="margin: 20px" type="success" size="large" @click="outword"
          >导出申请表</el-button
        >
        <el-card class="el-card-css">
          <div style="display: flex; align-items: center; margin-top: 20px">
            <span>所在部门:</span>
            <el-input v-model="organ" placeholder="" clearable class="input" />
            <span>姓名:</span>
            <el-input v-model="name" placeholder="" clearable class="input" />
            <span>性别:</span>
            <el-input v-model="gender" placeholder="" clearable class="input" />
          </div>
          <div style="display: flex; align-items: center; margin-top: 20px">
            <span>年龄:</span>
            <el-input v-model="age" placeholder="" clearable class="input" />
            <span>出差天数:</span>
            <el-input v-model="days" placeholder="" clearable class="input" />
            <span>职务:</span>
            <el-input v-model="worker" placeholder="" clearable class="input" />
          </div>

          <div style="display: flex; align-items: center; margin-top: 20px">
            <span>时间:</span>
            <el-input v-model="date" placeholder="" clearable class="input" />
          </div>

          <div style="display: flex; align-items: center; margin-top: 20px">
            <span>工作详情:</span>
            <el-input
              v-model="work"
              maxlength="90"
              show-word-limit
              type="textarea"
              style="width: 500px; margin-left: 20px"
            />
          </div>
        </el-card>
      </div>

data数据如下

      organ: '',
      name: '',
      gender: '',
      age: '',
      days: '',
      worker: '',
      date: '',
      work: '',

      wordData: {
        title: '出差申请表',
        organ: '',
        name: '',
        gender: '',
        age: '',
        days: '',
        worker: '',
        date: '',
        work: ''
      },

点击导出方法事件如下

    outword () {
      this.wordData.organ = this.organ
      this.wordData.name = this.name
      this.wordData.gender = this.gender
      this.wordData.age = this.age
      this.wordData.days = this.days
      this.wordData.worker = this.worker
      this.wordData.date = this.date
      this.wordData.why = this.why

      const that = this
      const word = '/出差申请表.docx'
      const wordname = '出差申请表.docx'
      JSZipUtils.getBinaryContent(word, function (error, content) {
        if (error) {
          throw error
        }
        const zip = new PizZip(content)
        const doc = new Docxtemplater().loadZip(zip)
        doc.setData({
          ...that.wordData
        })

        try {
          doc.render()
        } catch (error) {
          const e = {
            message: error.message,
            name: error.name,
            stack: error.stack,
            properties: error.properties
          }
          console.log(JSON.stringify({ error: e }))
          throw error
        }
        const out = doc.getZip().generate({
          type: 'blob',
          mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
        })
        saveAs(out, wordname)
      })
    },

5.注意word文件格式一定要以.docx结尾，文件名一定要对应上，不然会报错，报错的话就看引入的word文件文章来源地址https://www.toymoban.com/news/detail-499542.html

到了这里，关于vue element ui 导出word文件方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！