js 获取剪切板内容
js 获取剪切板内容
·
1. 粘贴事件
const items = (event.clipboardData || window.clipboardData).items
const len = items.length
let isFalg = true
for (let i = 0; i < len; i++) {
if (items[i].kind === 'file' && items[i].type.indexOf('image') !== -1) {
isFalg = false
// 图片格式
const file = items[i].getAsFile() // 获取⽂件数据
const blob = new Blob([file], { type: file.type })
console.log('粘贴的是图⽚类型', blob, file)
const formdate = new FormData()
formdate.append('file', file)
}
}
if (isFalg) {
const html = (event.clipboardData || window.clipboardData).getData('text/html')
if (html) {
// html格式
} else {
// 字符串格式
const text = (event.clipboardData || window.clipboardData).getData('text')
}
}
2. 手动获取
navigator.permissions.query({ name: 'clipboard-read' }).then((result) => {
if (result.state === 'granted' || result.state === 'prompt') {
navigator.clipboard.read().then((data) => {
for (let i = 0; i < data.length; i++) {
let contentType = data[i].types[data[i].types.length - 1]
data[i].getType(contentType).then((blob) => {
const reader = new FileReader()
if (contentType == 'text/html' || contentType == 'text/plain') {
// html 和 字符串
reader.readAsText(blob, 'utf-8')
reader.onload = function () {
console.log(reader.result);
}
} else {
// 图片
let file = new File([blob], uuid(), { type: contentType, lastModified: Date.now() });
}
})
}
})
}
})
3. 写入剪切板
export const copySelect = (selArea) => {
console.log("复制的内容:");
console.log(selArea);
const input = document.createElement('input')
input.style.position = 'absolute'
input.style.left = '-9999px'
input.style.top = '-9999px'
document.body.appendChild(input)
input.value = selArea
input.select()
document.execCommand('copy')
// console.log('复制成功')
document.body.removeChild(input)
}
更多推荐
已为社区贡献2条内容
所有评论(0)