使用XWPFTemplate进行java后端word模版导出；前端使用vue-office/docx回显

1.pom引入poi-tl

　　　　<dependency>
            <groupId>com.deepoove</groupId>
            <artifactId>poi-tl</artifactId>
            <version>1.7.3</version>
       </dependency>

 

2.word模版

 

3.业务代码

String filePath = "excel/材料支付封面.docx";
ClassPathResource templateResource = new ClassPathResource(templatePath);

InputStream wordTemplate = templateResource.getStream();

Map<String, Object> map = new HashMap<>();
map.put("sgdw", "中交路桥建设有限公司"); // 施工单位
map.put("zfqh", "一标段-田柳站"); // 支付期号
map.put("bzdw", "山东高速物资集团有限公司"); // 编制单位
map.put("zdb", "山东恒建工程监理咨询有限公司"); // 驻地办
map.put("zjb", "山东高速工程项目管理有限公司"); // 总监办
map.put("rq", "2024-07-20"); // 日期
OutputStream out = response.getOutputStream();
XWPFTemplate template = XWPFTemplate.compile(wordTemplate).render(map);
template.write(out);
out.flush();
out.close(); 

 前端vue：

1.npm引入vue-office/docx

npm install --save @vue-office/docx

2.html

<vue-office-docx id="fileView" v-if="docx" :src="docx" @rendered="rendered" />

3.引入

//引入VueOfficeDocx组件
import VueOfficeDocx from "@vue-office/docx";
//引入相关样式
import "@vue-office/docx/lib/index.css";




components: {
    VueOfficeDocx
  },

4.js

// 接口返回后blob转为url
const blob = new Blob([data]);
const url = window.URL.createObjectURL(blob);
this.docx = url;

rendered() {
  console.log("渲染完成");
  this.hasDownload = true;
},
 
// 打印
onPrint() {
   let dom = document.getElementById("fileView");
   const newDom = dom.querySelector(".docx-wrapper");
   this.$print(newDom);
},
 
// 下载
onDownload() {
   saveAs(this.fileInfo.blob, this.fileInfo.fileName);
},