clipboard polyfill
v4.1.1
clipboard-polyfillclipboard-polyfill 필요하지 않습니다! 참고: 2020년부터 모든 주요 브라우저의 안정 버전에서 navigator.clipboard.writeText(...) 사용할 수 있습니다. 이 라이브러리는 다음을 원하는 경우에만 유용합니다.
text/html 복사,ClipboardItem API를 사용하거나jsdom )에서 API 형태를 폴리필합니다.자세한 내용은 아래 호환성 섹션을 참조하세요.
다음과 같이 쉽게 웹에서 복사할 수 있습니다.
clipboard . writeText ( "hello world" ) ; 이 라이브러리는 최신 Promise 기반 비동기 클립보드 API를 위한 포니필/폴리필입니다.
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 사양을 확인하세요.
참고:
await 구문에는 async 함수를 사용해야 합니다.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 빌드를 제공하지 않습니다. 호환성을 잃지 않고 이러한 빌드를 얻으려면 esbuild 통해 clipboard-polyfill 빌드를 전달하세요. 예를 들어:
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 | ✔️ | ✔️ | 5️ ( image/uri-list , image/png ) |
| 크롬 86ᵃ / 엣지 86 | ✔️ | ✔️ | 5️ ( image/png ) |
| 크롬 76ᵃ / 엣지 79 | ✔️ | ✅ | 5️ ( image/png ) |
| 크롬 66ᵃ / 파이어폭스 63 | ✔️ | ✅ | |
| 사파리 10 / 크롬 42ᵃ / Edgeᵈ / 파이어폭스 41 | ✅ | ✅ᵇ | |
| IE 9 | ✅ᶜ |
지원 읽기:
| 브라우저 | readText() | read() (HTML) | read() (다른 형식) |
|---|---|---|---|
| 사파리 13.1 | ✔️ | ✔️ | 5️ ( image/uri-list , image/png ) |
| 크롬 76ᵃ / 엣지 79 | ✔️ | 5️ ( image/png ) | |
| 크롬 66ᵃ | ✔️ | ||
| IE 9 | ✅ᶜ | ||
| 파이어폭스 |
window.Promise 폴리필해야 합니다. 라이브러리가 작동하도록 하려면 약속하세요.clipboard-polyfill 항상 성공을 보고합니다.ClipboardItem 생성자에 전달하는 객체의 마지막에 배치하는 것이 좋습니다.text/html 데이터 유형이 예상되는 CF_HTML 형식을 사용하여 작성되지 않았습니다. 1) 깨지기 쉬운 브라우저 버전 스니핑이 필요하고, 2) Edge 사용자는 일반적으로 버전 < 17에서 멈추지 않으며, 3) 다른 브라우저의 실패 모드는 유효하지 않은 클립보드가 될 것이기 때문에 clipboard-polyfill 이 문제를 해결 하려고 시도하지 않습니다. HTML이 복사되었습니다. (가장자리 버그 #14372529, #73) clipboard-polyfill 다양한 경험적 방법을 사용하여 호환성 버그를 해결합니다. 위에 나열된 브라우저 중 호환성 문제가 발생하는 경우 알려주시기 바랍니다.
| 브라우저 | 첫 번째 버전 지원navigator.clipboard.writeText(...) | 출시일 |
|---|---|---|
| 크롬 | 66세 이상 | 2018년 4월 |
| 파이어폭스 | 53세 이상 | 2018년 10월 |
| 가장자리 | 79+(첫 번째 Chromium 기반 릴리스) | 2020년 1월 |
| 원정 여행 | 13.1+ | 2020년 3월 |
이 프로젝트는 JS의 클립보드 액세스가 거의 불가능하고 인체공학적 클립보드 API 노력이 정체되던 시절부터 시작되었습니다. (좀 더 자세한 내용은 이 프레젠테이션을 참조하세요.) 다행히도 이제 2020년 이후 모든 최신 브라우저에서 동일한 기능을 갖춘 인체공학적 API를 사용할 수 있습니다.
document.execCommand("copy") 호출을 지원하기 시작합니다(많은 문제가 있음).clipboard.js 로 시작했습니다(@zenorocha가 같은 이름을 선택하기 반년 전?).crbug.com/593475 ).v2 API 점검을 반영하기 위해 이 프로젝트의 이름을 clipboard-polyfill 로 변경했습니다.navigator.clipboard.writeText() 지원을 시작합니다.navigator.clipboard.write() ( text/html 지원 포함) 지원을 시작합니다.비동기 클립보드 API를 구현하는 데 도움을 준 Gary Kacmarcik, Hallvord Steen 및 기타 분들께 감사드립니다!
최신 브라우저에서 텍스트만 복사해야 한다면 navigator.clipboard.writeText() 직접 사용하는 것이 좋습니다: https://caniuse.com/mdn-api_clipboard_writetext
이전 브라우저에서도 텍스트 복사가 필요한 경우 간단한 해키 솔루션을 위해 이 요점을 시도해 볼 수도 있습니다.
