当前位置: 首页 > news >正文

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

文章目录

  • 后端 doc 转 docx
  • dcox - 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-lineElMessage({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 可以见我上一篇文章:前端实现签字效果+合同展示

http://www.lryc.cn/news/417797.html

相关文章:

  • Vue3 组件通信
  • 如何在Ubuntu 14.04上安装、配置和部署Rocket.Chat
  • ISO 26262中的失效率计算:IEC TR 62380-Section 15-Switches and keyboards
  • Linux安全与高级应用(五)深入探讨Linux Shell脚本应用:从基础到高级
  • Java中等题-解码方法(力扣)
  • 【Git】git 从入门到实战系列(二)—— Git 介绍以及安装方法
  • 【QT 5 QT 6 构建工具qmake-cmake-和-软件编译器MSVCxxxvs MinGWxxx说明】
  • SD卡参数错误:深度解析与数之寻软件恢复实战
  • 深入理解和应用RabbitMQ的Work Queues模型
  • 嵌入式面试八股文(三)·野指针产生原因和解决方法、指针函数和函数指针的区别
  • OpenCV 中 CV_8UC1,CV_32FC3,CV_32S等参数的含义
  • v 3 + vite + ts 自适应布局(postcss-pxtorem)
  • (MTK)java文件添加简单接口并配置相应的SELinux avc 权限笔记2
  • Linux安全与高级应用(六)Linux Shell脚本编程的高级应用:条件测试与if语句的妙用
  • 升级MacOS(Mojave)后使用git问题
  • 基于PFC和ECN搭建无损RoCE网络的工作流程分析
  • 射频功率放大器调测简略
  • Linux使用docker搭建Redis 哨兵模式
  • springboot给类进行赋初值的四种方式
  • Day32 | 1049. 最后一块石头的重量 II 494. 目标和 474.一和零
  • linux 查看一个端口是否被占用
  • 【Git】5. 配置 Git
  • C语言:文件处理
  • SpringBoot MybatisPlus selectOne的坑
  • Spring源码-ClassPathXmlApplicationContext的refresh()都做了什么?
  • 网站加密和混淆技术简介
  • Kafka + Kraft 集群搭建教程,附详细配置及自动化安装脚本
  • “Apple Intelligence”的“系统提示词”被曝光了
  • django学习-数据表操作
  • 机器学习-决策树