国内的优秀网站,做网站需要什么系统,seo关键词查询工具,淄博城乡建设局网站文章目录 后端 doc 转 docxdcox - preview安装导入使用注意 最近菜鸟刚搞完签字#xff0c;结果需求就加了#xff0c;如果合同有附件#xff08;.doc.docx#xff09;#xff0c;签名就是签到附件里面#xff0c;没有附件才是签到那个html里面#xff01;
这里附件签名… 文章目录 后端 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();}
}后端下载的插件名称
dependencygroupIdcom.documents4j/groupIdartifactIddocuments4j-local/artifactIdversion1.0.3/version
/dependency
dependencygroupIdcom.documents4j/groupIdartifactIddocuments4j-transformer-msoffice-word/artifactIdversion1.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
templatediv classbigBox :style{ height: bigBoxHeight px }div idreportContainer :style{ marginLeft: isScale ? bigBoxmargin px : auto }/div/divdiv classbtnBoxel-button typeprimary clickshowSign前往签字/el-button/div!-- 签字弹窗 --sign v-ifsignshow :dialogVisiblesignshow closeEventhideSign/sign
/template注意
1、这里的请求一定要加上 responseType: “arraybuffer”,
2、这里 bigBoxHeight 、bigBoxmargin 可以见我上一篇文章前端实现签字效果合同展示
