web 常见下载，文字图片复制、生成二维码方法汇总

阿东toastLi

已于 2024-03-12 14:52:11 修改

阅读量428

点赞数 10

文章标签：前端

于 2024-03-12 14:51:08 首次发布

本文链接：https://blog.youkuaiyun.com/toastRouter/article/details/136652095

版权

本文介绍了如何在Vue项目中利用qrcode库实现二维码生成、根据链接下载文件以及复制文本和图片的功能，包括直接生成二维码链接、页面渲染二维码、使用fetch下载、文本复制和图片复制到剪贴板的技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、绘制二维码

// 安装下载插件

npm install qrcode
# or
yarn add qrcode

// 构建使用
vue
<template>
  <div>
    <div ref="refQrcode"></div>
  </div>
</template>

<script lang='ts' setup>
import QRCode from 'qrcode';

const qrcodeImage = ref()
const refQrcode = ref() // refDom
// 1 直接生成二维码链接
const qrCodeImg = async (url: string) => {
  // 生成二维码。
  const img = await QRCode.toDataURL(url)
  qrcodeImage.value = img
}


onMounted(() => { 
    // 2直接页面渲染
    QRCode.toCanvas(refQrcode.value, 'https://www.baidu.com', function (error) {
      if (error) {
        console.error(error);
      }
    });
 })
</script>

2、根据链接下载

<script lang='ts' setup>


const download = (url: string, name: string) => {
  //跳过浏览直接下载
  fetch(url)
    .then((res) => res.blob())
    .then((blob) => {
      const a = document.createElement('a')
      const objectUrl = window.URL.createObjectURL(blob)
      a.download = name
      a.href = objectUrl
      a.click()
      window.URL.revokeObjectURL(objectUrl)
      document.body.removeChild(a)
    })
}

</script>

3 复制文本

/**
 * 复制文本
 * @param {String} text
 */
export function copyText(text = '') {
  // console.log('navigator.clipboard', e)
  const input = document.createElement('input')
  input.style.position = 'fixed'
  input.style.top = '-10000px'
  input.style.zIndex = '-999'
  document.body.appendChild(input)
  input.value = text
  input.focus()
  input.select()
  try {
    const result = document.execCommand('copy')
    document.body.removeChild(input)
    if (!result || result === 'unsuccessful') {
      return Promise.reject('复制失败')
    } else {
      return Promise.resolve()
    }
  } catch (e) {
    document.body.removeChild(input)
    return Promise.reject('当前浏览器不支持复制功能，请检查更新或更换其他浏览器使用')
  }
}

4 复制图片

vue
<template>
  <div>
    <div ref="qrcode"></div>

    <el-image
              id="qr-image"
              fit="contain"
              style="width: 148px; height: 148px; border: 10px solid #d9d9d9; border-radius: 4px"
              :src="qrcodeImage"
            />
  </div>
</template>

<script lang='ts' setup>

const copyUrl = (url: string, type = 1) => {
  // 2复制图片
    const imgElement = document.querySelector(`#qr-image`)
    const img = new Image()
    img.src = imgElement.src
    // 4、监听图片加载完成事件
    img.onload = function () {
      //（1）创建 Canvas
      const canvas = document.createElement('canvas')
      canvas.width = img.width
      canvas.height = img.height
      const ctx = canvas.getContext('2d')
      //（2）在Canvas上绘制图片
      ctx.drawImage(img, 0, 0)
      //（3）获取 Canvas 内容作为Blob
      canvas.toBlob(function (blob) {
        //（4）使用Clipboard API 把生成对象URL，写入到剪贴板
        navigator.clipboard
          .write([new ClipboardItem({ 'image/png': blob })])
          .then(() => {
            ElMessage({
              message: '复制成功',
              type: 'success'
            })
          })
          .catch(() => {
            console.error('图像复制失败')
          })
      })
    }

}

</script>