Estoy descargando el contenido del archivo README.md usando axios en reaccionar. Los contenidos se cargan en base64 . Quiero mostrar todo el contenido dentro de este archivo Léame. Seguí estas respuestas pero ninguna de ellas funcionó para mí. A continuación se muestra mi código.
import "./styles.css"; import { useEffect, useState } from 'react'; import axios from 'axios'; export default function App() { const [md, setMd] = useState(''); useEffect(() => { async function fetchReadMeContents() { const response = await axios({ url: "https://api.github.com/repos/zafar-saleem/anymnd/git/blobs/7af90ceab018a889b46634331cab822d94ff2b19", }); console.log('response: ', response.data); const text = await response.data.content; setMd(text); } fetchReadMeContents(); }, []); return ( <code className="App"> {md} </code> ); }El código anterior se muestra a continuación.
IyMgUmVxdWlyZW1lbnRzCkJlbG93IGlzIHRoZSBnZXR0aW5nIHN0YXJ0ZWQg c2VjdGlvbiB0byBzdGFydCB0aGUgcHJvamVjdC4gRm9yIG1vcmUgZGV0YWls cywgcGxlYXNlIHJlYWQgdGhlIFt3aWtpXShodHRwczovL2dpdGh1Yi5jb20v emFmYXItc2FsZWVtL2JyZWxhLXRlc3Qvd2lraSkgcGFnZS4KCiMjIEdldHRp bmcgc3RhcnRlZApJbiBvcmRlciB0byBydW4gdGhpcyBwcm9qZWN0IGluIHRo ZSBicm93c2VyIHN1Y2Nlc3NmdWxseSwgcGxlYXNlIGZvbGxvdyB0aGUgc3Rl cHMgYmVsb3chCgogICAgMS4gQ2xvbmUgdGhpcyByZXBvc2l0b3J5LgogICAg Mi4gY2QgaW50byBgL3Jvb3RgIGkuZS4gYGJyZWxhLXRlc3QvYCBkaXJlY3Rv cnkuCiAgICAzLiBSdW4gYHlhcm4vbnBtIGluc3RhbGxgIGNvbW1hbmQgdG8g ZG93bmxvYWQgYW5kIGluc3RhbGwgYWxsIGRlcGVuZGVuY2llcy4KICAgIDQu IFRvIHJ1biB0aGlzIHByb2plY3QgdXNlIGBucG0gc3RhcnQveWFybmAgY29t bWFuZCBpbiBjb21tYW5kIGxpbmUuCiAgICAAquí está el enlace de codesandbox https://codesandbox.io/s/floral-wave-8rf4l?file=/src/App.js:0-590 .
¿Cómo puedo representar el contenido del archivo Léame?
Puede usar atob() y btoa() para convertir base64 y cadenas juntas.
1. Convertir String a Base64 ( MDN describe btoa )
El método
btoa()crea una cadena ASCII codificada en Base64 a partir de una cadena binaria (es decir, un objeto String en el que cada carácter de la cadena se trata como un byte de datos binarios).
const encodedData = btoa('Hello, world'); // encode a string2. Convierta Base64 a String ( MDN describe atob )
La función
atob()decodifica una cadena de datos que se ha codificado mediante la codificación Base64.
const decodedData = atob(encodedData); // decode the stringEntonces puede usar el siguiente código para representar el contenido de su archivo README.md.
useEffect(() => { async function fetchReadMeContents() { const response: any = await axios({ url: readmeFileUrl, }); const text: any = await response.text(); if (response.status === 200) { setMd(atob(text)); } } if (readmeFileUrl) { fetchReadMeContents(); } }, [readmeFileUrl]); return ( <code>{md}</code> );