clipboard polyfill
v4.1.1
clipboard-polyfillclipboard-polyfill para copiar texto! Nota: A partir de 2020, puede utilizar navigator.clipboard.writeText(...) en las versiones estables de todos los principales navegadores. Esta biblioteca sólo te será útil si deseas:
text/html en Firefox ≤126,ClipboardItem en Firefox ≤126, ojsdom ).Consulte la sección Compatibilidad a continuación para obtener más detalles.
Hace que copiar en la web sea tan fácil como:
clipboard . writeText ( "hello world" ) ; Esta biblioteca es un ponyfill/polyfill para la moderna API de portapapeles asíncrona basada en Promise .
Si usa npm , instale:
npm install clipboard-polyfillAplicación de ejemplo que copia texto al portapapeles:
import * as clipboard from "clipboard-polyfill" ;
function handler ( ) {
clipboard . writeText ( "This text is plain." ) . then (
( ) => { console . log ( "success!" ) ; } ,
( ) => { console . log ( "error!" ) ; }
) ;
}
window . addEventListener ( "DOMContentLoaded" , function ( ) {
const button = document . body . appendChild ( document . createElement ( "button" ) ) ;
button . textContent = "Copy" ;
button . addEventListener ( "click" , handler ) ;
} ) ;Notas:
button ).async / await import * as clipboard from "clipboard-polyfill" ;
async function handler ( ) {
console . log ( "Previous clipboard text:" , await clipboard . readText ( ) ) ;
await clipboard . writeText ( "This text is plain." ) ;
}
window . addEventListener ( "DOMContentLoaded" , function ( ) {
const button = document . body . appendChild ( document . createElement ( "button" ) ) ;
button . textContent = "Copy" ;
button . addEventListener ( "click" , handler ) ;
} ) ; import * as clipboard from "clipboard-polyfill" ;
async function handler ( ) {
console . log ( "Previous clipboard contents:" , await clipboard . read ( ) ) ;
const item = new clipboard . ClipboardItem ( {
"text/html" : new Blob (
[ "<i>Markup</i> <b>text</b>. Paste me into a rich text editor." ] ,
{ type : "text/html" }
) ,
"text/plain" : new Blob (
[ "Fallback markup text. Paste me into a rich text editor." ] ,
{ type : "text/plain" }
) ,
} ) ;
await clipboard . write ( [ item ] ) ;
}
window . addEventListener ( "DOMContentLoaded" , function ( ) {
const button = document . body . appendChild ( document . createElement ( "button" ) ) ;
button . textContent = "Copy" ;
button . addEventListener ( "click" , handler ) ;
} ) ;Consulte la especificación API del Portapapeles para obtener más detalles.
Notas:
async para la sintaxis await .text/plain y text/html son los únicos tipos de datos que se pueden escribir en el portapapeles en la mayoría de los navegadores.read() puede devolver solo un subconjunto de tipos de datos admitidos, incluso si el portapapeles contiene más tipos de datos. No hay forma de saber si había más tipos de datos.overwrite-globals Si desea que la biblioteca sobrescriba la API del portapapeles global con sus implementaciones, importe clipboard-polyfill/overwrite-globals . Esto convertirá la biblioteca de un ponyfill a un polyfill adecuado, para que puedas escribir código como si la API asíncrona del portapapeles ya estuviera implementada en tu navegador:
import "clipboard-polyfill/overwrite-globals" ;
async function handler ( ) {
const item = new window . ClipboardItem ( {
"text/html" : new Blob (
[ "<i>Markup</i> <b>text</b>. Paste me into a rich text editor." ] ,
{ type : "text/html" }
) ,
"text/plain" : new Blob (
[ "Fallback markup text. Paste me into a rich text editor." ] ,
{ type : "text/plain" }
) ,
} ) ;
navigator . clipboard . write ( [ item ] ) ;
}
window . addEventListener ( "DOMContentLoaded" , function ( ) {
const button = document . body . appendChild ( document . createElement ( "button" ) ) ;
button . textContent = "Copy" ;
button . addEventListener ( "click" , handler ) ;
} ) ;No se recomienda este enfoque porque puede romper cualquier otro código que interactúe con las API globales del portapapeles y puede ser incompatible con futuras implementaciones del navegador.
Promise incluido Si necesita obtener una versión que "simplemente funcione", descargue clipboard-polyfill.window-var.promise.es5.js e inclúyala usando una etiqueta <script> :
< script src =" ./clipboard-polyfill.window-var.promise.es5.js " > </ script >
< button onclick =" copy() " > Copy text! </ button >
< script >
// `clipboard` is defined on the global `window` object.
function copy ( ) {
clipboard . writeText ( "hello world!" ) ;
}
</ script > Gracias a las ventajas del ecosistema JS moderno, ya no ofrecemos compilaciones de árbol sacudido, minimizadas o CommonJS. Para obtener dichas compilaciones sin perder compatibilidad, pase las compilaciones clipboard-polyfill a través de esbuild . Por ejemplo:
mkdir temp && cd temp && npm install clipboard-polyfill esbuild
# Minify the ES6 build:
echo ' export * from "clipboard-polyfill"; ' | npx esbuild --format=esm --target=es6 --bundle --minify
# Include just the `writeText()` export and minify:
echo ' export { writeText } from "clipboard-polyfill"; ' | npx esbuild --format=esm --target=es6 --bundle --minify
# Minify an ES5 build:
cat node_modules/clipboard-polyfill/dist/es5/window-var/clipboard-polyfill.window-var.promise.es5.js | npx esbuild --format=esm --target=es5 --bundle --minify
# Get a CommonJS build:
echo ' export * from "clipboard-polyfill"; ' | npx esbuild --format=cjs --target=es6 --bundleclipboard-polyfill ? Los navegadores han implementado varias API del portapapeles a lo largo del tiempo, y escribir en el portapapeles sin provocar errores en varios navegadores antiguos y actuales es bastante complicado. En todos los navegadores que admiten la copia al portapapeles de alguna manera, clipboard-polyfill intenta actuar lo más cerca posible de la API del portapapeles asíncrono. (Consulte más arriba las exenciones de responsabilidad y las limitaciones).
Consulte esta presentación para conocer un historial más extenso del acceso al portapapeles en la web.
clipboard-polyfill agrega soporte.Soporte de escritura para la versión más antigua del navegador:
| Navegador | writeText() | write() (HTML) | write() (otros formatos) |
|---|---|---|---|
| Safari 13.1 | ☑️ | ☑️ | ☑️ ( image/uri-list , image/png ) |
| Cromo 86 ᵃ / Borde 86 | ☑️ | ☑️ | ☑️ ( image/png ) |
| Cromo 76ᵃ / Borde 79 | ☑️ | ✅ | ☑️ ( image/png ) |
| Chrome 66ᵃ / Firefox 63 | ☑️ | ✅ | |
| Safari 10 / Chrome 42ᵃ / Edgeᵈ / Firefox 41 | ✅ | ✅ᵇ | |
| Es decir 9 | ✅ᶜ |
Leer soporte:
| Navegador | readText() | read() (HTML) | read() (otros formatos) |
|---|---|---|---|
| Safari 13.1 | ☑️ | ☑️ | ☑️ ( image/uri-list , image/png ) |
| Cromo 76 ᵃ / Borde 79 | ☑️ | ☑️ ( image/png ) | |
| Cromo 66ᵃ | ☑️ | ||
| Es decir 9 | ✅ᶜ | ||
| Firefox |
window.Promise Promételo si quieres que la biblioteca funcione.clipboard-polyfill siempre informará éxito en este caso.ClipboardItem .text/html no está escrito utilizando el formato CF_HTML esperado. clipboard-polyfill no intenta solucionar este problema, ya que 1) requeriría un rastreo de versiones frágiles del navegador, 2) los usuarios de Edge generalmente no están atascados en la versión <17, y 3) el modo de falla para otros navegadores sería ese portapapeles no válido Se copia HTML. (Error de borde n.° 14372529, n.° 73) clipboard-polyfill utiliza una variedad de heurísticas para solucionar errores de compatibilidad. Háganos saber si tiene problemas de compatibilidad con alguno de los navegadores enumerados anteriormente.
| Navegador | Primera versión compatiblenavigator.clipboard.writeText(...) | Fecha de lanzamiento |
|---|---|---|
| Cromo | 66+ | abril 2018 |
| Firefox | 53+ | octubre 2018 |
| Borde | 79+ (primera versión basada en Chromium) | enero 2020 |
| Safari | 13.1+ | marzo 2020 |
Este proyecto data de una época en la que el acceso al portapapeles en JS apenas era posible y los esfuerzos de la API ergonómica del portapapeles se estaban estancando. (Consulte esta presentación para obtener un poco más de contexto). Afortunadamente, una API ergonómica con la misma funcionalidad ahora está disponible en todos los navegadores modernos desde 2020:
document.execCommand("copy") (con muchos, muchos problemas).clipboard.js (¿medio año antes de que @zenorocha eligiera el mismo nombre?).crbug.com/593475 ).clipboard-polyfill para reflejar una revisión de la API v2 alineada con la especificación preliminar.navigator.clipboard.writeText() .navigator.clipboard.write() (incluida la compatibilidad con text/html ).¡Gracias a Gary Kacmarcik, Hallvord Steen y otros por ayudar a darle vida a la API del portapapeles asíncrono!
Si solo necesita copiar texto en navegadores modernos, considere usar navigator.clipboard.writeText() directamente: https://caniuse.com/mdn-api_clipboard_writetext
Si también necesita copiar texto en navegadores más antiguos, también puede probar esta esencia para obtener una solución sencilla y pirateada.
