clipboard polyfill
v4.1.1
clipboard-polyfillclipboard-polyfill ! Примечание. Начиная с 2020 года вы можете использовать navigator.clipboard.writeText(...) в стабильных версиях всех основных браузеров. Эта библиотека будет вам полезна, только если вы хотите:
text/html в Firefox ≤126,ClipboardItem в Firefox ≤126 илиjsdom ).Более подробную информацию см. в разделе «Совместимость» ниже.
Делает копирование в Интернете таким же простым, как:
clipboard . writeText ( "hello world" ) ; Эта библиотека представляет собой ponyfill/polyfill для современного API асинхронного буфера обмена на основе Promise .
Если вы используете npm , установите:
npm install clipboard-polyfillПример приложения, копирующего текст в буфер обмена:
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 ) ;
} ) ;Примечания:
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 ) ;
} ) ;Дополнительные сведения см. в спецификации API буфера обмена.
Примечания:
async функции для синтаксиса await .text/plain и text/html — единственные типы данных, которые можно записывать в буфер обмена в большинстве браузеров.read() может возвращать только подмножество поддерживаемых типов данных, даже если буфер обмена содержит больше типов данных. Невозможно определить, было ли больше типов данных.overwrite-globals версию Если вы хотите, чтобы библиотека перезаписывала глобальный API буфера обмена своими реализациями, импортируйте clipboard-polyfill/overwrite-globals . Это превратит библиотеку из понифилла в полноценный полифил, и вы сможете писать код так, как если бы API асинхронного буфера обмена уже был реализован в вашем браузере:
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 ) ;
} ) ;Этот подход не рекомендуется, так как он может нарушить работу любого другого кода, который взаимодействует с глобальными переменными API буфера обмена, и может быть несовместим с будущими реализациями браузера.
Promise Если вам нужно получить версию, которая «просто работает», загрузите clipboard-polyfill.window-var.promise.es5.js и включите ее с помощью тега <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 > Благодаря удобствам современной экосистемы JS мы больше не предоставляем древовидные, минифицированные сборки или сборки CommonJS. Чтобы получить такие сборки без потери совместимости, передайте сборки clipboard-polyfill через esbuild . Например:
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 ? Со временем в браузерах было реализовано несколько API-интерфейсов буфера обмена, и запись в буфер обмена без возникновения ошибок в различных старых и текущих браузерах довольно сложна. В каждом браузере, который каким-либо образом поддерживает копирование в буфер обмена, clipboard-polyfill пытается действовать как можно ближе к API асинхронного буфера обмена. (См. выше отказ от ответственности и ограничения.)
В этой презентации вы найдете более подробную историю доступа к буферу обмена в Интернете.
clipboard-polyfill .Напишите поддержку по самой ранней версии браузера:
| Браузер | writeText() | write() (HTML) | write() (другие форматы) |
|---|---|---|---|
| Сафари 13.1 | ☑️ | ☑️ | ☑️ ( image/uri-list , image/png ) |
| Хром 86 ᵃ / Край 86 | ☑️ | ☑️ | ☑️ ( image/png ) |
| Хром 76ᵃ / Край 79 | ☑️ | ✅ | ☑️ ( image/png ) |
| Chrome 66ᵃ / Firefox 63 | ☑️ | ✅ | |
| Safari 10/Chrome 42ᵃ/Edgeᵈ/Firefox 41 | ✅ | ✅ᵇ | |
| ИЕ 9 | ✅ᶜ |
Читать поддержку:
| Браузер | readText() | read() (HTML) | read() (другие форматы) |
|---|---|---|---|
| Сафари 13.1 | ☑️ | ☑️ | ☑️ ( image/uri-list , image/png ) |
| Хром 76 ᵃ / Край 79 | ☑️ | ☑️ ( image/png ) | |
| Хром 66ᵃ | ☑️ | ||
| ИЕ 9 | ✅ᶜ | ||
| Firefox |
window.Promise Обещайте, если хотите, чтобы библиотека работала.clipboard-polyfill всегда будет сообщать об успехе.ClipboardItem .text/html не записывается с использованием ожидаемого формата CF_HTML . clipboard-polyfill не пытается обойти эту проблему, поскольку 1) для этого потребуется анализ хрупкой версии браузера, 2) пользователи Edge обычно не застревают на версии < 17 и 3) режимом сбоя для других браузеров будет недопустимый буфер обмена. HTML копируется. (Ошибка Edge № 14372529, № 73) clipboard-polyfill использует различные эвристики для обхода ошибок совместимости. Сообщите нам, если у вас возникнут проблемы совместимости с каким-либо из браузеров, перечисленных выше.
| Браузер | Поддержка первой версииnavigator.clipboard.writeText(...) | Дата выпуска |
|---|---|---|
| Хром | 66+ | апрель 2018 г. |
| Firefox | 53+ | Октябрь 2018 г. |
| Край | 79+ (первая версия на базе Chromium) | январь 2020 г. |
| Сафари | 13.1+ | март 2020 г. |
Этот проект появился в то время, когда доступ к буферу обмена в JS был едва возможен, а работа над эргономичным API буфера обмена застопорилась. (Подробнее см. в этой презентации.) К счастью, с 2020 года эргономичный API с той же функциональностью теперь доступен во всех современных браузерах:
document.execCommand("copy") (с множеством проблем).clipboard.js (за полгода до того, как @zenorocha выбрал то же имя?).crbug.com/593475 ).clipboard-polyfill чтобы отразить пересмотр API v2 в соответствии с черновой спецификацией.navigator.clipboard.writeText() .navigator.clipboard.write() (включая поддержку text/html ).Спасибо Гэри Качмарчику, Холлворду Стину и другим за помощь в воплощении в жизнь API асинхронного буфера обмена!
Если вам нужно только скопировать текст в современных браузерах, рассмотрите возможность прямого использования navigator.clipboard.writeText() : https://caniuse.com/mdn-api_clipboard_writetext
Если вам также нужно скопировать текст в старых браузерах, вы также можете попробовать этот вариант простого хакерского решения.
