Tengo una sección en la que quiero que el usuario copie html al portapapeles, este elemento debe estar oculto aquí es lo que tengo hasta ahora
demostración en vivo: demostración en vivo
Aquí está el código que tengo hasta ahora.
export default function App() { const tableRef = useRef(null); const textRef = useRef(null); const [copySuccess, setCopySuccess] = useState(""); const copyToClipboard = (e) => { let tableRange = document.createRange(); tableRange.selectNodeContents(tableRef.current); let sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(tableRange); document.execCommand("Copy"); sel.removeAllRanges(); setCopySuccess("Copied!"); }; return ( <div className="App"> <textarea ref={textRef} style={{ opacity: 0, position: "absolute", top: "-200px" }} ></textarea> <div aria-hidden="true" ref={tableRef} className="table" style={{ display: "none" }} > <table> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> </tbody> </table> </div> {document.queryCommandSupported("copy") && ( <div> <button onClick={copyToClipboard}>Copy</button> {copySuccess} </div> )} </div> ); }Esperado: copie la tabla html oculta al portapapeles
¿Qué debo hacer para poder copiar ese elemento oculto al portapapeles?
Ok, el elemento oculto no está disponible directamente en DOM, por lo que no puede copiarlo desde allí. Solo se utilizan para transportar datos de un estado a otro o desde el formulario de representación hasta el controlador. Si necesita esos datos, puede vincularlos en ViewBag.
const a = window.param; window.param = ViewBag.param; const copyToClipboard = (e) => { ViewBag.param = e; let tableRange = document.createRange(); tableRange.selectNodeContents(tableRef.current); let sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(tableRange); document.execCommand("Copy"); sel.removeAllRanges(); setCopySuccess("Copied!"); };Consulte este enlace también. Acceda a una propiedad viewbag en reactjs