js复制图片或文字到剪切板

js 复制图片或文字到剪切板

所用技术

复制文字

1. 使用navigator.clipboard.writeText()方法

复制图片

1. 先将base64图片转为blob
2. new一个ClipboardItem对象
3. 使用navigator.clipboard.write()方法

详细封装

由于复制图片和复制文字使用两个不同的 API，需要封装成一个方法，传入配置对象来控制复制图片还是文字。
具体封装如下

/**
 * dataURL转Blob
 *
 * @param {*} dataurl
 * @return {*}
 */
const dataURLToBlob = (dataurl) => {
  let arr = dataurl.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new Blob([u8arr], { type: mime })
}

/**
 * 复制base64
 *
 * @param {*} base64
 * @return {*}
 */
const copyBlobToClipboard = (base64) => {
  return new Promise((resolve, reject) => {
    let blob = dataURLToBlob(base64)
    navigator.clipboard
      .write([
        new window.ClipboardItem({
          [blob.type]: blob,
        }),
      ])
      .then(
        () => {
          resolve(true)
        },
        () => {
          reject(new Error('复制失败'))
        }
      )
  })
}

/**
 * 复制文本
 *
 * @param {*} text
 * @return {*}
 */
const copyTextToClipboard = (text) => {
  return new Promise((resolve, reject) => {
    navigator.clipboard.writeText(text).then(
      () => {
        resolve(true)
      },
      () => {
        reject(new Error('复制失败'))
      }
    )
  })
}

/**
 * 复制图片或文字
 *
 * @param {*} text
 * @return {*}
 */
const copyToClipboard = (opt = { type: null, value: null }) => {
  return new Promise((resolve, reject) => {
    if (opt.type === 'text') {
      copyTextToClipboard(opt.value)
        .then((res) => {
          resolve(res)
        })
        .catch(() => {
          reject(new Error('复制失败'))
        })
    } else if (opt.type === 'base64') {
      copyBlobToClipboard(opt.value)
        .then((res) => {
          resolve(res)
        })
        .catch(() => {
          reject(new Error('复制失败'))
        })
    } else {
      reject(new Error('参数错误'))
    }
  })
}

export default copyToClipboard

使用说明

该方法支持传入配置对象

对象属性	说明	类型	可选值
type	复制类型	string	text / base64
value	要复制的值	string	-

import copyToClipboard from './you/path/to/copy-to-clipboard'

// 复制文字
// const option = {
//   type: 'text',
//   value: '复制赋值复制',
// }

// 复制图片
const option = {
  type: 'base64',
  value:
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAEXRFWHRTb2Z0d2FyZQBTbmlwYXN0ZV0Xzt0AAAAVSURBVBiVY/z//z8DbsCER24ESwMApeMDEeYHI7cAAAAASUVORK5CYII=',
}

copyToClipboard(option)
  .then(() => {
    // 复制成功
  })
  .catch(() => {
    // 复制失败
  })