文章目录

后端 doc 转 docxdcox - preview安装导入使用注意

最近菜鸟刚搞完签字，结果需求就加了，如果合同有附件（.doc.docx），签名就是签到附件里面，没有附件才是签到那个html里面！

这里附件签名过后就不能像html那样可以修改原html了，毕竟这个要写入word文档，实现不了，所以我们公司退而求其次只需要记录附件和签字的对应关系，以及何时签字就行！

实现难点在于：前端只能展示docx；后端也不好把 doc、docx 转换为html ！（只能说 doc 是什么天杀的格式？）

后端 doc 转 docx

但是好在后端可以将 doc 转成 docx，菜鸟是前端不知道后端咋搞的，只要了点代码过来，各位可以参考一下：

<code>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' }">code>

<div id="reportContainer" :style="{ marginLeft: isScale ? bigBoxmargin + 'px' : 'auto' }"></div>code>

</div>

<div class="btnBox">code>

<el-button type="primary" @click="showSign">前往签字</el-button>code>

</div>

<!-- 签字弹窗 -->

<sign v-if="signshow" :dialogVisible="signshow" @closeEvent="hideSign"></sign>code>

</template>

注意