|
|
@@ -0,0 +1,128 @@
|
|
|
+import { useEffect, useState } from 'react';
|
|
|
+import s from './index.less';
|
|
|
+import { Modal } from 'antd';
|
|
|
+const jsDiff = require('diff');
|
|
|
+const mammoth = require('mammoth');
|
|
|
+const PreviewWord = ({ url, open, onCancel }) => {
|
|
|
+ const [diffArr, setDiffArr] = useState([]);
|
|
|
+ const [loading, setLoading] = useState(false);
|
|
|
+
|
|
|
+ // 读取input上传合同文件
|
|
|
+ const onChange = async id => {
|
|
|
+ const fileInput = document.getElementById(id);
|
|
|
+ const selectedFile = fileInput.files[0];
|
|
|
+ if (selectedFile) {
|
|
|
+ const readText = await readDocx(selectedFile);
|
|
|
+ // console.log(readText);
|
|
|
+ id == 'fileInput1' ? setValue1(readText) : setValue2(readText);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ function readDocx(file) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ const reader = new FileReader();
|
|
|
+
|
|
|
+ reader.onload = function(event) {
|
|
|
+ const arrayBuffer = event.target.result;
|
|
|
+
|
|
|
+ mammoth
|
|
|
+ .extractRawText({ arrayBuffer: arrayBuffer })
|
|
|
+ .then(result => {
|
|
|
+ const text = result.value;
|
|
|
+ resolve(text);
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ reject(err);
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ reader.onerror = function(event) {
|
|
|
+ reject(new Error('文件读取失败'));
|
|
|
+ };
|
|
|
+
|
|
|
+ // 读取文件
|
|
|
+ reader.readAsArrayBuffer(file);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ //读取当前url合同
|
|
|
+ const readUrlDocx = async url => {
|
|
|
+ const arrayBuffer = await fetch(url)
|
|
|
+ .then(res => {
|
|
|
+ if (!res.ok) {
|
|
|
+ throw new Error(`HTTP error! Status: ${res.status}`);
|
|
|
+ }
|
|
|
+ return res.arrayBuffer();
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ console.error('发生错误:', error);
|
|
|
+ });
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ mammoth
|
|
|
+ .extractRawText({ arrayBuffer: arrayBuffer })
|
|
|
+ .then(function(result) {
|
|
|
+ var text = result.value; // The raw text
|
|
|
+ const newText = text.replace(/\n+/g, '\n');
|
|
|
+ resolve(newText);
|
|
|
+ })
|
|
|
+ .catch(function(error) {
|
|
|
+ console.error(error);
|
|
|
+ reject(new Error('文件读取失败'));
|
|
|
+ });
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ const initData = async () => {
|
|
|
+ setLoading(true);
|
|
|
+ const text1 = await readUrlDocx('/2023-6-16采购合同模板.docx');
|
|
|
+ const text2 = await readUrlDocx(url);
|
|
|
+ if (!text1 || !text2) return;
|
|
|
+ const res = jsDiff['diffChars'](text1, text2);
|
|
|
+ console.log(res);
|
|
|
+ setLoading(false);
|
|
|
+ setDiffArr(res);
|
|
|
+ };
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (!open || !url) return;
|
|
|
+ initData();
|
|
|
+ }, [open, url]);
|
|
|
+
|
|
|
+ const getCharDiff = () => {
|
|
|
+ const charColorMap = {
|
|
|
+ add: s.charAdd,
|
|
|
+ removed: s.charRemoved,
|
|
|
+ };
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ {diffArr.map((item, index) => {
|
|
|
+ const { value, added, removed } = item;
|
|
|
+ const type = added ? 'add' : removed ? 'removed' : '';
|
|
|
+ return (
|
|
|
+ <span key={index} className={` ${charColorMap[type]} ${s.charPreWrap}`}>
|
|
|
+ {value}
|
|
|
+ </span>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ };
|
|
|
+ return (
|
|
|
+ <Modal
|
|
|
+ title="比对结果"
|
|
|
+ open={open}
|
|
|
+ loading={loading}
|
|
|
+ onCancel={onCancel}
|
|
|
+ width={1000}
|
|
|
+ footer={false}
|
|
|
+ bodyStyle={{ height: '80vh', overflowY: 'auto' }}
|
|
|
+ >
|
|
|
+ {getCharDiff()}
|
|
|
+ </Modal>
|
|
|
+ // <>
|
|
|
+ // <input id="fileInput1" type="file" accept=".docx" onChange={() => onChange('fileInput1')} />
|
|
|
+ // <input id="fileInput2" type="file" accept=".docx" onChange={() => onChange('fileInput2')} />
|
|
|
+ // {getCharDiff()}
|
|
|
+ // </>
|
|
|
+ );
|
|
|
+};
|
|
|
+export default PreviewWord;
|
