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

最近菜鸟刚搞完签字,结果需求就加了,如果合同有附件(.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)
### 集成 `docx-preview` 库实现 Word 文档在线预览 为了在 React 项目中集成 `docx-preview` 来实现在线预览 Word 文档,需遵循以下方法: #### 安装依赖包 首先,在命令行工具中执行如下 npm 命令安装所需的库: ```bash npm install docx-preview react-docx-preview ``` #### 创建组件用于展示文档 创建一个新的 React 组件专门用来处理并显示 `.docx` 文件的内容。 ```jsx import React, { useState } from 'react'; import DocxPreview from 'react-docx-preview'; function DocumentViewer({ file }) { const [error, setError] = useState(null); if (error) return <div>Error loading document</div>; return ( <DocxPreview file={file} onError={(err) => setError(err)} /> ); } export default DocumentViewer; ``` 此代码片段定义了一个名为 `DocumentViewer` 的函数式组件[^1]。该组件接收一个属性 `file` 表示要加载的 DOCX 文件路径或 Blob 对象,并通过 `DocxPreview` 组件渲染出来。如果遇到错误,则会简单地显示出错提示信息。 #### 使用组件上传并查看文件 为了让用户能够选择本地计算机上的 .doc 或者 .docx 文件并通过上述组件进行预览,还需要构建一个表单允许文件输入以及触发更新状态逻辑。 ```jsx import React, { useRef, useEffect } from 'react'; import DocumentViewer from './DocumentViewer'; // 上一步创建好的组件 const FileUploader = () => { const inputRef = useRef(); const [selectedFile, setSelectedFile] = React.useState(); function handleFileChange(event){ let files = event.target.files || []; if(files.length === 0) return; setSelectedFile(URL.createObjectURL(files[0])); } useEffect(() => { return () => URL.revokeObjectURL(selectedFile); }, [selectedFile]); return ( <> <input type="file" ref={inputRef} onChange={handleFileChange} accept=".doc,.docx"/> {!!selectedFile && <DocumentViewer file={selectedFile}/>} </> ) }; export default FileUploader; ``` 这段代码实现了让用户可以选择自己的设备中的 Word 文档(.doc/.docx),一旦选择了有效的文件就会调用 `setSelectedFile()` 更新当前选中的文件链接给父级组件的状态变量 `selectedFile` 。当这个值发生变化时,将会重新渲染页面并将新的文件传递给子组件 `DocumentViewer` 进行实际的渲染工作[^2]。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

PBitW

可以去掘金看更完善版本

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值