前端使用docx-preview展示docx + 后端doc转docx

文章目录

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

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

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

后端 doc 转 docx

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

publicvoiddocToDocx(String batchId,HttpServletResponse response)throwsIOException{//  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 =newFile("E:\\03 项目沟通文档\\1820994860746969088-(7.31第二次修改)农大三代建库测序技术委托合同.doc");try(ByteArrayOutputStream byteArrayOutputStream =newByteArrayOutputStream();InputStream docxInputStream =newFileInputStream(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)=>{awaitnextTick();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-lineElMessage({message:"网络问题，请刷新界面！",type:"error",});});}).catch((err)=>{
    console.log(err);});

template

<template><divclass="bigBox":style="{ height: bigBoxHeight + 'px' }"><divid="reportContainer":style="{ marginLeft: isScale ? bigBoxmargin + 'px' : 'auto' }"></div></div><divclass="btnBox"><el-buttontype="primary"@click="showSign">前往签字</el-button></div><!-- 签字弹窗 --><signv-if="signshow":dialogVisible="signshow"@closeEvent="hideSign"></sign></template>

注意

1、这里的请求一定要加上 responseType: “arraybuffer”,

2、这里 bigBoxHeight 、bigBoxmargin 可以见我上一篇文章：前端实现签字效果+合同展示