使用docx

npm install docx?

按照注釋處理數據并轉換為對應的bolb數據流?

<template><Button type="primary" @click="handleDocxCreate">{{buttonTitle || "報告生成"}}</Button>
</template><script>
import {Document,Paragraph,TextRun,Packer,AlignmentType,Table,TableCell,TableRow,WidthType,BorderStyle,
} from "docx";
export default {props: {buttonTitle: {// 報告生成type: String,},docxData: {type: Array,required: true,//   [//     {//       isTable: Boolean, // 是否為表格,默認為false,若table為true,則data必填,其余忽略//       isAlignment: String, // 字段位置,默認為LEFT,可以為BOTH,CENTER,END,LEFT,RIGHT,START...//       isIndent: Boolean, // 是否首行縮進兩個字符,默認為false//       text: String, // 內容//       size: Number, // 字體大小,默認為22//       font: String, // 字體類型,默認為仿宋//       isBold: Boolean, // 是否加粗,默認為false//       data: [ // Array//         [//           {//             text: String, // 表格單元格內容//             width: Number, // 單元格寬度,默認為每個單元格平均分配寬度,如果不設置則會自動計算//             columnSpan: Number, // 合并單元格,默認為1//             isBolb: Boolean, // 是否加粗,默認為false//             size: Number, // 字體大小,默認為22//             font: String, // 字體類型,默認為仿宋//           }//         ]//       ], // 表格數據,如果isTable為true,則必填////     }//   ]},},data() {return {};},methods: {/*** 文件blob流生成*/async handleDocxCreate() {// 創建 Word 文檔const doc = new Document({sections: [{properties: {},children: this.docxData.map((item) => {// 如果是表格，則處理表格數據if (item.isTable) {return this.handleTabel(item.data);} else {// 否則處理普通文本段落return new Paragraph({alignment: AlignmentType[item.isAlignment || "LEFT"],indent: {firstLine: item.isIndent ? 500 : 0, // 直接設置縮進值（單位為twips，1厘米=567twips，約1.27厘米縮進）},children: [new TextRun({text: item.text || '',bold: item.isBold || false,size: item.size || 22,font: item.font || "仿宋",}),],});}}),},],});// 生成 Blob 對象const blob = await Packer.toBlob(doc);},/*** 表格* @param {*} data*/handleTabel(data) {const table = new Table({width: {size: 100,type: WidthType.PERCENTAGE,},rows: data.map((row, rowIndex) =>new TableRow({children: row.map((cell, cellIndex) => {// 合并單元格return new TableCell({width: {size: cell.width || (cell.length / row.length) * 100,type: WidthType.PERCENTAGE,},columnSpan: cell.columnSpan || 1,children: [new Paragraph({alignment: AlignmentType.CENTER,children: [new TextRun({text: cell.text || '',bold: cell.isBolb || false,size: cell.size || 22,font: cell.font || "仿宋",}),],}),],// 可選：設置單元格樣式shading: { fill: "F3F3F3" }, // 背景色borders: {top: {style: BorderStyle.SINGLE,size: 4,color: "000000",},bottom: {style: BorderStyle.SINGLE,size: 4,color: "000000",},left: {style: BorderStyle.SINGLE,size: 4,color: "000000",},right: {style: BorderStyle.SINGLE,size: 4,color: "000000",},},});}),})),// 設置表格對齊為左對齊alignment: AlignmentType.LEFT,borders: {top: { style: BorderStyle.SINGLE, size: 4, color: "000000" },bottom: { style: BorderStyle.SINGLE, size: 4, color: "000000" },left: { style: BorderStyle.SINGLE, size: 4, color: "000000" },right: { style: BorderStyle.SINGLE, size: 4, color: "000000" },},});return table;},},
};
</script>
<style scoped>
</style>

若需要將該文件傳給后端，需要轉換bolb數據流的類型

      let formData = new FormData();// 轉換文件類型const file = new File([blob], `${this.fileName || "報告.docx"}`, {type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",});formData.append("file", file);ajax.post(uploadUrl, formData).then((response) => {console.log("文件上傳成功", response);})

文件下載

const downloadLink = document.createElement("a");
const blobUrl = URL.createObjectURL(blobData);downloadLink.href = blobUrl;
downloadLink.download = "name.docx";
downloadLink.click();URL.revokeObjectURL(blobUrl);

?