最近在做一个考试平台的时候,遇到了这样一个需求,就是需要导出题库为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
最后,祝大家都能工作顺利,万事顺心