文章目录
后端 doc 转 docxdcox - preview安装导入使用注意
最近菜鸟刚搞完签字，结果需求就加了，如果合同有附件（.doc.docx），签名就是签到附件里面，没有附件才是签到那个html里面！
这里附件签名过后就不能像html那样可以修改原html了，毕竟这个要写入word文档，实现不了，所以我们公司退而求其次只需要记录附件和签字的对应关系，以及何时签字就行！
实现难点在于：前端只能展示docx；后端也不好把 doc、docx 转换为html ！（只能说 doc 是什么天杀的格式？）
后端 doc 转 docx
但是好在后端可以将 doc 转成 docx，菜鸟是前端不知道后端咋搞的，只要了点代码过来，各位可以参考一下：
public void docToDocx(String batchId, HttpServletResponse response) throws IOException {// FileEntity data = adminFileService.queryOne(batchId).getData();// String path = data.getPath(); response.setContentType("application/vnd.openxmlformats-officedocument.wordprocessingml.document"); response.setHeader("Content-Disposition", "attachment; filename=\"converted.docx\""); ServletOutputStream outputStream = response.getOutputStream(); File inputWord = new File("E:\\03 项目沟通文档\\1820994860746969088-(7.31第二次修改)农大三代建库测序技术委托合同.doc"); try (ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream(); InputStream docxInputStream = new FileInputStream(inputWord)) { IConverter converter = LocalConverter.builder().build(); boolean flag = false; flag = converter.convert(docxInputStream).as(DocumentType.DOC).to(byteArrayOutputStream).as(DocumentType.DOCX).execute(); if (flag) { converter.shutDown(); } byteArrayOutputStream.writeTo(outputStream); System.out.println("转换成功"); } catch (Exception e) { e.printStackTrace(); }}后端下载的插件名称：
<dependency> <groupId>com.documents4j</groupId> <artifactId>documents4j-local</artifactId> <version>1.0.3</version></dependency><dependency> <groupId>com.documents4j</groupId> <artifactId>documents4j-transformer-msoffice-word</artifactId> <version>1.0.3</version></dependency>好了，后端菜鸟就不多废话了，接下来是重头戏前端代码！
dcox - preview
都转化成了 docx 了，那我前端展示也是分分钟的事情！需要使用插件：dcox - preview ！
安装
npm i docx-preview --save导入
import { renderAsync } from 'docx-preview';使用
js
getPrintApi(route.query.batchId) .then(async (res) => { await nextTick(); let reportContainer = document.getElementById("reportContainer"); renderAsync( res, reportContainer, // HTMLElement 渲染文档内容的元素, null // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null，则将使用 reportContainer。 ) .then((res) => { console.log("res---->", res); let bigBox = document.querySelector(".bigBox"); let contractBox = document.getElementById("reportContainer"); let st = window.getComputedStyle(contractBox, null); var tr = st.getPropertyValue("transform"); if (tr === "none") { isScale.value = false; bigBox.style.height = "auto"; const height = bigBox.offsetHeight; bigBoxHeight.value = height; } else { isScale.value = true; bigBox.style.height = "auto"; const height = bigBox.offsetHeight * 0.5; bigBoxmargin.value = (window.innerWidth - 700 * 0.5) / 2; bigBoxHeight.value = height; } }) .catch((err) => { console.log(err); // eslint-disable-next-line ElMessage({ message: "网络问题，请刷新界面！", type: "error", }); }); }) .catch((err) => { console.log(err); });template
<template> <div class="bigBox" :style="{ height: bigBoxHeight + 'px' }"> <div id="reportContainer" :style="{ marginLeft: isScale ? bigBoxmargin + 'px' : 'auto' }"></div> </div> <div class="btnBox"> <el-button type="primary" @click="showSign">前往签字</el-button> </div> <!-- 签字弹窗 --> <sign v-if="signshow" :dialogVisible="signshow" @closeEvent="hideSign"></sign></template>注意
1、这里的请求一定要加上 responseType: “arraybuffer”,
2、这里 bigBoxHeight 、bigBoxmargin 可以见我上一篇文章：前端实现签字效果+合同展示