admin管理员组文章数量:1023125
I need to read the contents of a doc/docx file, which is uploaded by the user.
I've tried using jszip with docxtemplater, but I'm unable to read the file.
If besides the docs/docx files it could also read the txt files, that would be great.
I have a docx file like this:
Io sottoscritto/a __NOME__
nato a __CITTA_NASCITA__(__SIGLA_CITTA_NASCITA__) il __DATA_NASCITA__
residente a __RESIDENZA__ in via __VIA_RESIDENZA__ n __NUMERO_RESIDENZA__.
Can you give me a hand?
Link: =/src/App.js:0-2711
Code:
import React, { useState } from "react";
import { TextField } from "@material-ui/core";
import Docxtemplater from "docxtemplater";
import JSZip from "jszip";
export default function App() {
const [state, setState] = useState({
original: [],
edit: [],
arrayO: [],
arrayE: []
});
const { original, edit, arrayO, arrayE } = state;
const showFile = async (e) => {
e.preventDefault();
const reader = new FileReader();
reader.onload = async ({ target: { result } }) => {
/*const reg = /__[A-Z]+(?:_[A-Z]+)*__/gi;
const row = result.split("\n");
let arrayO = result.match(reg);
setState((prev) => ({
...prev,
original: row,
edit: row,
arrayO,
arrayE: arrayO
}));*/
var zip = new JSZip();
zip.loadAsync(result).then(function (zip) {
var doc = new Docxtemplater().loadZip(zip);
var text = doc.getFullText();
console.log(text);
});
};
reader.readAsText(e.target.files[0]);
};
const onChange = (value, label, key) => {
console.log(value, label, key);
console.log(
original.map((e, k) =>
e.includes(label)
? value === ""
? label
: e.replace(label, value)
: edit[k]
)
);
setState((prev) => ({
...prev,
edit: prev.original.map((e, k) =>
e.includes(label)
? value === ""
? label
: e.replace(label, value)
: prev.edit[k]
),
arrayE: prev.arrayE.map((e, k) =>
k === key ? (value === "" ? label : value) : e
)
}));
};
console.log(state);
return (
<div className="App">
<div style={{ flex: 1 }}>
<div style={{}}>
<input type="file" onChange={(e) => showFile(e)} />
{arrayO.map((label, key) => (
<div key={key} style={{ paddingTop: 5 }}>
<TextField
id="outlined-basic"
label={label}
variant="outlined"
size={"small"}
onChange={({ target: { value } }) =>
onChange(value, label, key)
}
/>
</div>
))}
</div>
<div>
{edit.map((el, key) => (
<div key={key}>{el}</div>
))}
</div>
</div>
<div style={{ flex: 1, backgroundColor: "#4287f5" }}>
{arrayO.map((el, key) => (
<div key={key}>{el}</div>
))}
</div>
<div style={{ flex: 1, backgroundColor: "#f5cb42" }}>
{arrayE.map((el, key) => (
<div key={key}>{el}</div>
))}
</div>
</div>
);
}
I need to read the contents of a doc/docx file, which is uploaded by the user.
I've tried using jszip with docxtemplater, but I'm unable to read the file.
If besides the docs/docx files it could also read the txt files, that would be great.
I have a docx file like this:
Io sottoscritto/a __NOME__
nato a __CITTA_NASCITA__(__SIGLA_CITTA_NASCITA__) il __DATA_NASCITA__
residente a __RESIDENZA__ in via __VIA_RESIDENZA__ n __NUMERO_RESIDENZA__.
Can you give me a hand?
Link: https://codesandbox.io/s/lively-butterfly-ey8og?file=/src/App.js:0-2711
Code:
import React, { useState } from "react";
import { TextField } from "@material-ui/core";
import Docxtemplater from "docxtemplater";
import JSZip from "jszip";
export default function App() {
const [state, setState] = useState({
original: [],
edit: [],
arrayO: [],
arrayE: []
});
const { original, edit, arrayO, arrayE } = state;
const showFile = async (e) => {
e.preventDefault();
const reader = new FileReader();
reader.onload = async ({ target: { result } }) => {
/*const reg = /__[A-Z]+(?:_[A-Z]+)*__/gi;
const row = result.split("\n");
let arrayO = result.match(reg);
setState((prev) => ({
...prev,
original: row,
edit: row,
arrayO,
arrayE: arrayO
}));*/
var zip = new JSZip();
zip.loadAsync(result).then(function (zip) {
var doc = new Docxtemplater().loadZip(zip);
var text = doc.getFullText();
console.log(text);
});
};
reader.readAsText(e.target.files[0]);
};
const onChange = (value, label, key) => {
console.log(value, label, key);
console.log(
original.map((e, k) =>
e.includes(label)
? value === ""
? label
: e.replace(label, value)
: edit[k]
)
);
setState((prev) => ({
...prev,
edit: prev.original.map((e, k) =>
e.includes(label)
? value === ""
? label
: e.replace(label, value)
: prev.edit[k]
),
arrayE: prev.arrayE.map((e, k) =>
k === key ? (value === "" ? label : value) : e
)
}));
};
console.log(state);
return (
<div className="App">
<div style={{ flex: 1 }}>
<div style={{}}>
<input type="file" onChange={(e) => showFile(e)} />
{arrayO.map((label, key) => (
<div key={key} style={{ paddingTop: 5 }}>
<TextField
id="outlined-basic"
label={label}
variant="outlined"
size={"small"}
onChange={({ target: { value } }) =>
onChange(value, label, key)
}
/>
</div>
))}
</div>
<div>
{edit.map((el, key) => (
<div key={key}>{el}</div>
))}
</div>
</div>
<div style={{ flex: 1, backgroundColor: "#4287f5" }}>
{arrayO.map((el, key) => (
<div key={key}>{el}</div>
))}
</div>
<div style={{ flex: 1, backgroundColor: "#f5cb42" }}>
{arrayE.map((el, key) => (
<div key={key}>{el}</div>
))}
</div>
</div>
);
}
1 Answer
Reset to default 2I've changed the showfile function to use the result from the file reader to feed it into the PizZip instance :
const showFile = async (e) => {
console.log('showfile', e)
e.preventDefault();
const reader = new FileReader();
reader.onload = async (e) => {
const content = e.target.result;
var doc = new Docxtemplater(new PizZip(content), {delimiters: {start: '12op1j2po1j2poj1po', end: 'op21j4po21jp4oj1op24j'}});
var text = doc.getFullText();
console.log(text)
};
reader.readAsBinaryString(e.target.files[0]);
};
Note that I put some random string for the start and end delimiters to avoid parsing the document as a template.
I need to read the contents of a doc/docx file, which is uploaded by the user.
I've tried using jszip with docxtemplater, but I'm unable to read the file.
If besides the docs/docx files it could also read the txt files, that would be great.
I have a docx file like this:
Io sottoscritto/a __NOME__
nato a __CITTA_NASCITA__(__SIGLA_CITTA_NASCITA__) il __DATA_NASCITA__
residente a __RESIDENZA__ in via __VIA_RESIDENZA__ n __NUMERO_RESIDENZA__.
Can you give me a hand?
Link: =/src/App.js:0-2711
Code:
import React, { useState } from "react";
import { TextField } from "@material-ui/core";
import Docxtemplater from "docxtemplater";
import JSZip from "jszip";
export default function App() {
const [state, setState] = useState({
original: [],
edit: [],
arrayO: [],
arrayE: []
});
const { original, edit, arrayO, arrayE } = state;
const showFile = async (e) => {
e.preventDefault();
const reader = new FileReader();
reader.onload = async ({ target: { result } }) => {
/*const reg = /__[A-Z]+(?:_[A-Z]+)*__/gi;
const row = result.split("\n");
let arrayO = result.match(reg);
setState((prev) => ({
...prev,
original: row,
edit: row,
arrayO,
arrayE: arrayO
}));*/
var zip = new JSZip();
zip.loadAsync(result).then(function (zip) {
var doc = new Docxtemplater().loadZip(zip);
var text = doc.getFullText();
console.log(text);
});
};
reader.readAsText(e.target.files[0]);
};
const onChange = (value, label, key) => {
console.log(value, label, key);
console.log(
original.map((e, k) =>
e.includes(label)
? value === ""
? label
: e.replace(label, value)
: edit[k]
)
);
setState((prev) => ({
...prev,
edit: prev.original.map((e, k) =>
e.includes(label)
? value === ""
? label
: e.replace(label, value)
: prev.edit[k]
),
arrayE: prev.arrayE.map((e, k) =>
k === key ? (value === "" ? label : value) : e
)
}));
};
console.log(state);
return (
<div className="App">
<div style={{ flex: 1 }}>
<div style={{}}>
<input type="file" onChange={(e) => showFile(e)} />
{arrayO.map((label, key) => (
<div key={key} style={{ paddingTop: 5 }}>
<TextField
id="outlined-basic"
label={label}
variant="outlined"
size={"small"}
onChange={({ target: { value } }) =>
onChange(value, label, key)
}
/>
</div>
))}
</div>
<div>
{edit.map((el, key) => (
<div key={key}>{el}</div>
))}
</div>
</div>
<div style={{ flex: 1, backgroundColor: "#4287f5" }}>
{arrayO.map((el, key) => (
<div key={key}>{el}</div>
))}
</div>
<div style={{ flex: 1, backgroundColor: "#f5cb42" }}>
{arrayE.map((el, key) => (
<div key={key}>{el}</div>
))}
</div>
</div>
);
}
I need to read the contents of a doc/docx file, which is uploaded by the user.
I've tried using jszip with docxtemplater, but I'm unable to read the file.
If besides the docs/docx files it could also read the txt files, that would be great.
I have a docx file like this:
Io sottoscritto/a __NOME__
nato a __CITTA_NASCITA__(__SIGLA_CITTA_NASCITA__) il __DATA_NASCITA__
residente a __RESIDENZA__ in via __VIA_RESIDENZA__ n __NUMERO_RESIDENZA__.
Can you give me a hand?
Link: https://codesandbox.io/s/lively-butterfly-ey8og?file=/src/App.js:0-2711
Code:
import React, { useState } from "react";
import { TextField } from "@material-ui/core";
import Docxtemplater from "docxtemplater";
import JSZip from "jszip";
export default function App() {
const [state, setState] = useState({
original: [],
edit: [],
arrayO: [],
arrayE: []
});
const { original, edit, arrayO, arrayE } = state;
const showFile = async (e) => {
e.preventDefault();
const reader = new FileReader();
reader.onload = async ({ target: { result } }) => {
/*const reg = /__[A-Z]+(?:_[A-Z]+)*__/gi;
const row = result.split("\n");
let arrayO = result.match(reg);
setState((prev) => ({
...prev,
original: row,
edit: row,
arrayO,
arrayE: arrayO
}));*/
var zip = new JSZip();
zip.loadAsync(result).then(function (zip) {
var doc = new Docxtemplater().loadZip(zip);
var text = doc.getFullText();
console.log(text);
});
};
reader.readAsText(e.target.files[0]);
};
const onChange = (value, label, key) => {
console.log(value, label, key);
console.log(
original.map((e, k) =>
e.includes(label)
? value === ""
? label
: e.replace(label, value)
: edit[k]
)
);
setState((prev) => ({
...prev,
edit: prev.original.map((e, k) =>
e.includes(label)
? value === ""
? label
: e.replace(label, value)
: prev.edit[k]
),
arrayE: prev.arrayE.map((e, k) =>
k === key ? (value === "" ? label : value) : e
)
}));
};
console.log(state);
return (
<div className="App">
<div style={{ flex: 1 }}>
<div style={{}}>
<input type="file" onChange={(e) => showFile(e)} />
{arrayO.map((label, key) => (
<div key={key} style={{ paddingTop: 5 }}>
<TextField
id="outlined-basic"
label={label}
variant="outlined"
size={"small"}
onChange={({ target: { value } }) =>
onChange(value, label, key)
}
/>
</div>
))}
</div>
<div>
{edit.map((el, key) => (
<div key={key}>{el}</div>
))}
</div>
</div>
<div style={{ flex: 1, backgroundColor: "#4287f5" }}>
{arrayO.map((el, key) => (
<div key={key}>{el}</div>
))}
</div>
<div style={{ flex: 1, backgroundColor: "#f5cb42" }}>
{arrayE.map((el, key) => (
<div key={key}>{el}</div>
))}
</div>
</div>
);
}
1 Answer
Reset to default 2I've changed the showfile function to use the result from the file reader to feed it into the PizZip instance :
const showFile = async (e) => {
console.log('showfile', e)
e.preventDefault();
const reader = new FileReader();
reader.onload = async (e) => {
const content = e.target.result;
var doc = new Docxtemplater(new PizZip(content), {delimiters: {start: '12op1j2po1j2poj1po', end: 'op21j4po21jp4oj1op24j'}});
var text = doc.getFullText();
console.log(text)
};
reader.readAsBinaryString(e.target.files[0]);
};
Note that I put some random string for the start and end delimiters to avoid parsing the document as a template.
本文标签： javascriptReact js read the text of a docdocx fileStack Overflow
版权声明：本文标题：javascript - React js read the text of a docdocx file - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745595297a2158130.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论