Vue3获取到数据导出为word文档

最近在做一个考试平台的时候,遇到了这样一个需求,就是需要导出题库为word文档,网上搜了搜,发现利用docxtemplater可以实现,那么以下就是我做完这个功能后的一些小笔记

首先,下载如下依赖

npm install docxtemplater --save
npm install jszip
npm install file-saver
npm install pizzip

 第二步:粘贴代码

<template>
    <p>我是导出</p>
    <el-button @click="generate()">导出</el-button>
</template>

<script setup>

import Docxtemplater from 'docxtemplater';
import JSZip from 'jszip';
import 'pizzip/dist/pizzip-utils.js'
import FileSaver from 'file-saver';
import axios from 'axios';
import { onMounted, ref } from 'vue'
let choiceOptions = ref([])
//获取后端数据
async function getData() {
    let res = await axios.get('http://127.0.0.1:3000/getData')
    console.log(res);
    let data = [...res.data]
    let num = 0
    data = data.map(item => {
        return item= {...item,id:++num}
    })
    console.log(data);
    choiceOptions.value = data
}
onMounted(() => {
    getData()
})

// 导出word
function loadFile(url, callback) {
    PizZipUtils.getBinaryContent(url, callback);
}

//我们想要触发导出,只需要触发这个事件就可以了
function generate() {

        //这里的word.docx是我们准备好的word模版
    loadFile('/word.docx', function (error, content) {
        if (error) {
            throw error;
        }
        //此时content就是word文件的二进制内容
        const templateContent = content;

        // 创建docxtemplater实例
        const doc = new Docxtemplater()
        // 将模板内容加载到docxtemplater中
        doc.loadZip(new JSZip(templateContent));
        doc.setData({
            choiceOptions: choiceOptions.value
        })
        try {
            // 生成Word文档
            doc.render();
            const generatedDocument = doc.getZip().generate({ type: 'blob' });
            // 导出Word文档,这个example.docx是我们要导出的文档
            FileSaver.saveAs(generatedDocument, 'example.docx');
        } catch (error) {
            console.error('导出失败：', error);

        }
    });

}
</script>

<style scoped></style>

 word模版就按照docxtemplater官网的需求来,以下是我的模版,注意!!!如果自己的模版编写的有问题,那么导出的文件可能会是空的

对了,本次博主的node和关键依赖版本是这样的

node版本:20.11.1

最后,祝大家都能工作顺利,万事顺心