vue3项目中前端导出word文档和导出excel文档

一、导出word文档

参考文章https://blog.csdn.net/qq_53722480/article/details/130017092
1、使用到的包如下：

"docxtemplater":"^3.42.4","file-saver":"^2.0.5","jszip-utils":"^0.1.0","pizzip":"^3.1.4",

2、页面中使用，注意：demo.docx模板文件放在public目录下

<script setup>import JSZipUtils from"jszip-utils";import JSZip from"pizzip";import Docxtemplater from"docxtemplater";import{ saveAs }from"file-saver";//导出方法constexportDoc=()=>{// 读取并获得模板文件的二进制内容"
  JSZipUtils.getBinaryContent(`${"/demo"}.docx`,(error, content)=>{// 抛出异常if(error){throw error;}// 创建一个PizZip实例，内容为模板的内容const zip =newJSZip(content);// 创建并加载docxtemplater实例对象const doc =newDocxtemplater().loadZip(zip);// 设置模板变量的值
    doc.setData({isTable:[{index:1,name:"测试数据",id:'fdfd'},{index:2,name:'小如',id:'fdgfrdgr'}],// 文档中循环数据});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;}// 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）const out = doc.getZip().generate({type:"blob",mimeType:"application/vnd.openxmlformats-officedocument.wordprocessingml.document",});// 将目标文件对象保存为目标类型的文件，并命名saveAs(out,"模板文件.docx");});}</script>

3、demo.docx文件内容如下

4、下载后的模板文件.docx如下

二、导出excel文档

1、使用到的包如下

"xlsx":"^0.18.5"

2、界面中导出excel

// 前端导出excle的方法import{ aoaToSheetXlsx }from'@/utils/ExportExcel'functionexportExcles(){let header =[//表头{label:'名称',prop:'name'},{label:'类型',prop:'type'},{label:'状态',prop:'status'}]let data=[//导出的数据{name:'测试',type:'1',status:'0'},{name:'测试',type:'1',status:'0'},{name:'测试',type:'1',status:'0'},{name:'测试',type:'1',status:'0'},{name:'测试',type:'1',status:'0'},]aoaToSheetXlsx({
    header,data: data,filename:'excel导出名字',//excel文件名})}

3、ExportExcel.js如下：

import{utils, writeFile}from'xlsx';constDEF_FILE_NAME='new-excel';exportfunctionjsonToSheetXlsx({
  data,
  header,
  filename =DEF_FILE_NAME,
  json2sheetOpts ={},
  write2excelOpts ={bookType:'xlsx'},}){const tHeader = header.map(v=>{return(v.label)})const filterVal = header.map(v=>{return(v.prop)})const newData =formatJson(filterVal, data)const arrData =[...newData];if(tHeader){
    arrData.unshift(tHeader);
    json2sheetOpts.skipHeader =true;}const worksheet = utils.json_to_sheet(arrData, json2sheetOpts);/* add worksheet to workbook */const workbook ={SheetNames:[filename],Sheets:{[filename]: worksheet,},};/* output format determined by filename */writeFile(workbook, filename, write2excelOpts);/* at this point, out.xlsb will have been downloaded */}exportfunctionaoaToSheetXlsx({
  data,
  header,
  filename =DEF_FILE_NAME,
  write2excelOpts ={bookType:'xlsx'},}){const tHeader = header.map(v=>{return(v.label)})const filterVal = header.map(v=>{return(v.prop)})const newData =formatJson(filterVal, data)const arrData =[...newData];if(tHeader){
    arrData.unshift(tHeader);}const worksheet = utils.aoa_to_sheet(arrData);const name = filename +'.xlsx'/* add worksheet to workbook */const workbook ={SheetNames:[filename],Sheets:{[filename]: worksheet,},};/* output format determined by filename */writeFile(workbook, name, write2excelOpts);/* at this point, out.xlsb will have been downloaded */}functionformatJson(filterVal, jsonData){return jsonData.map(v=> filterVal.map(j=>{if(j ==='timestamp'){returnparseTime(v[j])}else{return v[j]}}))}

4、以上代码导出的excel文件效果如下