简体   繁体   中英

convert mySQL BLOB to HTML file in NodeJS/Reactjs

I am making a website, and i need to display the description of each project . So i ve started with a simple TEXT() on DB field but the output is a full block text... Then, I ve replace the TEXT() by a BLOB() on my DB with a description.txt, but as unexpected the text is not formatted too, it still as text block. After this change the description.txt by a description.html (with correct ) and the output is read as.text:/ ( i mean this is not read as html file). There is my NodeJS code:

router.get("/:idProject/description", (req, res) => {
    const { idProject } = req.params;
    const sql = "SELECT p.description FROM project AS p WHERE id = ? ";
    connection.query(sql, [idProject], (err, result) => {
        if (err) {
            res.status(500).send("Impossible de trouver le projet");
        } else {
            const convertBufferToString = Buffer.from(result[0].description);

            res.status(200).send(convertBufferToString);
        }
    });
});

And my ReactJS code:

function Description({ projectName, url }) {
    const { id } = useParams();
    const [description, SetDescription] = useState(null);

    const getDescription = (idProject) => {
        const projectURL = `${process.env.REACT_APP_HOST}/projects/${idProject}/description`;
        Axios.get(projectURL)
            .then((response) => response.data)
            .then((data) => SetDescription(data));
    };
    useEffect(() => {
        getDescription(id);
    }, [id]);

    return (
        <React.Fragment>
            <Typography variant="h3">{projectName}</Typography>
            <Typography paragraph variant="body1">
            </Typography>
            <Link href={url}> Lien du site</Link>
                {description ? description : "Description du projet"}
        </React.Fragment>
    );
}

export default Description

I ve trying many things like, new BLob, new File, new FileReader etc but i dont know how to resolve this problem. So my question is: if its possible, how I can read the res.send(BLOB or Buffer) as HTML in ReactJS pls? Instead any suggestion to get a formated description by project.id?

By advance, thanks a lot!

Thanks to my schoolmate Bastiste, who find the solution:

in React:

return (
        <React.Fragment>
            <Typography variant="h3">{projectName}</Typography>
            <Typography paragraph variant="body1" dangerouslySetInnerHTML={{ __html: description }}/>
            <Link href={url}> Lien du site</Link>
        </React.Fragment>
    );

complete guide react dangerouslysetinnerhtml

And now the outpout is as expected! Thanks to him

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM