JS 代码段集锦
复制粘贴就完事!
目录
复制到剪切板
function fallbackCopyTextToClipboard (text) {
const textArea = document.createElement('textarea');
textArea.value = text;
textArea.style.position = 'fixed'; // avoid scrolling to bottom
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
document.execCommand('copy');
} finally {
document.body.removeChild(textArea);
}
}
function copyToClipboard (text) {
if (!navigator.clipboard) {
return fallbackCopyTextToClipboard(text);
}
return navigator.clipboard.writeText(text);
}
处理剪切板的文件
myInputElement.addEventListener('paste', handlePaste);
handlePaste (e) {
const clipboardItems = e.clipboardData.items;
let file = null;
for (let i = 0; i < clipboardItems.length; i++) {
if (clipboardItems[i].kind === 'file') {
file = clipboardItems[i].getAsFile();
console.log('Pasted file is', file);
break;
}
}
}
下载 CORS 图片
export function downloadImage (imgsrc, name) {
const image = new Image()
// Cors Canvas pollution
image.setAttribute('crossOrigin', 'anonymous')
image.onload = function () {
const canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
const context = canvas.getContext('2d')
context.drawImage(image, 0, 0, image.width, image.height);
const _dataURL = canvas.toDataURL('image/png') // get base64 of image
// User Blob in case the file is large, causing downloading failure in some browsers
const blob_ = dataURLtoBlob(_dataURL)
const url = {
name: name || 'Image', // No need of .png suffix
src: blob_
};
if (window.navigator.msSaveOrOpenBlob) { // if browser is IE
navigator.msSaveBlob(url.src, url.name) // filename includes extensions, saving to browser's default download target folder
} else {
const link = document.createElement('a');
link.setAttribute('href', window.URL.createObjectURL(url.src));
link.setAttribute('download', url.name + '.png')
document.body.appendChild(link)
link.click();
}
};
image.src = imgsrc;
function dataURLtoBlob (dataurl) {
let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], { type: mime })
}
}
下载 CORS 文件
// save blob with name
function saveBlob (blob, filename) {
const link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = filename
link.click()
}
// get blob by file url
function getBlob (url) {
return new Promise(resolve => {
const xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.responseType = 'blob'
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.response)
}
}
xhr.send()
})
}
export default function saveAs (url, filename) {
getBlob(url).then(blob => {
saveBlob(blob, filename)
})
}