首页 > 其他分享 >js复制黏贴功能

js复制黏贴功能

时间:2024-11-08 11:57:27浏览次数:1  
标签:selection const dom js 复制 props Message 黏贴

一、首先实现一个把canvas转换为图片,简单点就是把dom转换为图片
1、优先想到的就是html2canvas ,具体使用参考官网
但是它有一个bug,你复制的容器不能使用css3的box-shadow要不然会导致你转换的图片变成白色和灰色相间的背景色,并且无解,
如果有跨域问题,那就继续使用html2canvas

2、dom-to-image 插件也可以将dom转换为图片,并且你容器使用任意css3属性都无影响

安装 npm install dom-to-image --save-dev
使用
import domtoimage from 'dom-to-image'
domtoimage
      .toPng('转换的容器,支持vdom', config)
      .then(baseUrl => {
           waferCopyBigImage.value = baseUrl  //这时候就拿到图片了
       })

二、将图片复制到剪切板

有两种方式
1、document.execCommand('copy')  //这个无兼容问题
2、navigator.clipboard.writeText()  //这个方法不支持在http下面

很多插件都是把这两个集成进去了

<template>
  <div v-if="copySuccess" class="copy-success" :style="menuStyle" @click="copyWaferHandler">
    复制
  </div>
  <div
    ref="waferCopyBigImageContainer"
    :style="{
      width: waferMapContentSize?.width + 'px',
      height: waferMapContentSize?.height + 'px',
      position: 'absolute',
      left: '1000%',
      overflow: 'hidden',
      background: '#fff',
    }"
    v-if="waferCopyBigImage"
  >
    <img width="100%" height="100%" v-if="waferCopyBigImage" :src="waferCopyBigImage" />
  </div>
</template>
<script setup lang="ts" name="WaferCopyContent">
import { ref, nextTick } from 'vue'
import { Message } from '@arco-design/web-vue'
import domtoimage from 'dom-to-image'
import type { IWaferMapSize } from '../wafer-map-canvas'
const props = defineProps<{
  copySuccess: boolean
  waferMapContentSize?: IWaferMapSize
  menuStyle: any
  copyContentBox: HTMLDivElement | null
}>()

const emits = defineEmits<{
  (e: 'copySet', value: boolean): void
}>()
const waferCopyBigImage = ref<string | null>(null)
const waferCopyBigImageContainer = ref<HTMLElement | null>(null)

const copyWaferHandler = e => {
  emits('copySet', false)
  e.stopPropagation()
  e.preventDefault()
  console.log('复制')
  document.execCommand('delete')
  Message.loading('复制中...')
  copyImage()
}

const copyImage = async () => {
  const config = {
    width: props.waferMapContentSize?.width,
    height: props.waferMapContentSize?.height,
    backgroundColor: '#fff',
  }
  if (props && props.copyContentBox) {
    domtoimage
      .toPng(props.copyContentBox, config)
      .then(baseUrl => {
        waferCopyBigImage.value = baseUrl
        Message.clear()
        nextTick(() => {
          const selection = window.getSelection()
          if (!selection) {
            return
          }
          selection.removeAllRanges()

          selection?.empty()
          const range = document.createRange()
          range.selectNode(waferCopyBigImageContainer.value!)
          selection?.addRange(range)
          try {
            document.execCommand('copy')
            Message.info('图片已复制到剪贴板')
          } catch (err: any) {
            Message.error('复制失败:', err)
          }
          if (selection) {
            selection.removeAllRanges()
          }
        })
      })
      .catch(err => {
        Message.clear()
        console.log('转换失败', err)
      })
  }
}
</script>
<style scoped lang="scss">
.copy-success {
  position: absolute;
  padding: 0 10px;
  width: 50px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  cursor: pointer;
  background-color: var(--color-bg-popup);
  border: 1px solid var(--color-fill-3);
  border-radius: var(--border-radius-medium);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1019607843);
}
</style>

复制的时候有个bug
如果遇到要复制两次的时候,一定要记得把你装载的容器加一个v-if,因为会出现数据层实现了,dom层没有加载的问题,导致转换的图片复制不上

标签:selection,const,dom,js,复制,props,Message,黏贴
From: https://www.cnblogs.com/zhihou/p/18534805

相关文章

  • jeecg使用vue-pdf 和print-js实现pdf预览和打印
    前言近期我正在开发一个前后端分离项目,使用了SpringBoot和Vue2,借助了国内优秀的框架jeecg,前端UI库则选择了ant-design-vue。在项目中,需要实现文件上传功能,同时还要能够在线预览和下载图片和PDF文件,甚至需要在页面上直接打印PDF文件。尽管框架自带了vue-print-nb-jeecg组件......
  • 前端使用 jszip.js 和 FileSaver.js 下载并压缩文件
    asyncexport_data(){letzip=newJSZip()//下载文件并添加到ZIPfor(constiofthis.tableData){constdata=awaitfetch(i.path).then(response=>response.arrayBuffer())constimageByteStream=newUint8Array(data).subarray(1024)......
  • 带你用HTML+CSS+JS实现动态滚动骰子投掷效果!
    今天带大家用HTML+CSS+JS实现动态骰子投掷效果,下面来看看实现的效果:点击开始投掷,骰子开始滚动。点击停止投掷,骰子面会随机定在一个点数 那么如何实现呢?请听我细细讲解:一、骰子面的样式与布局1、样式:1、其中每一面大量的运用了flex布局来实现了骰面上圆点的位置。2......
  • PHP与Vue.js结合,开发现代Web应用的前后端分离
    随着前端技术的迅猛发展,前后端分离已成为现代Web应用开发的重要趋势。在这个架构中,PHP作为后端语言,配合Vue.js这样的前端框架,可以有效提高开发效率和用户体验。PHP与Vue.js的结合,使得开发者能够专注于各自领域的专业技术,形成高效、灵活的开发模式。PHP作为一种成熟的后端开发语言......
  • DevExpress JS & ASP.NET Core v24.1亮点 - 支持DateOnly/TimeOnly类型
    DevExtreme拥有高性能的HTML5/JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NETCore,jQuery,Knockout等)构建交互式的Web应用程序。从Angular和Reac,到ASP.NETCore或Vue,DevExtreme包含全面的高性能和响应式UI小部件集合,可在传统Web和下一代移动应用程序中......
  • 基于springboot+vue.js+uniapp小程序的计算机学习系统附带文章源码部署视频讲解等
    文章目录前言详细视频演示具体实现截图核心技术介绍后端框架SpringBoot前端框架Vue持久层框架MyBaits为什么选择我代码参考数据库参考测试用例参考源码获取前言......
  • 基于springboot+vue.js+uniapp小程序的it职业生涯规划系统附带文章源码部署视频讲解等
    文章目录前言详细视频演示具体实现截图核心技术介绍后端框架SpringBoot前端框架Vue持久层框架MyBaits为什么选择我代码参考数据库参考测试用例参考源码获取前言......
  • 基于springboot+vue.js+uniapp小程序的疫情网课管理系统附带文章源码部署视频讲解等
    文章目录前言详细视频演示具体实现截图核心技术介绍后端框架SpringBoot前端框架Vue持久层框架MyBaits为什么选择我代码参考数据库参考测试用例参考源码获取前言......
  • 基于springboot+vue.js+uniapp小程序的湖南交通工程学院学生就业信息系统附带文章源码
    文章目录前言详细视频演示具体实现截图核心技术介绍后端框架SpringBoot前端框架Vue持久层框架MyBaits为什么选择我代码参考数据库参考测试用例参考源码获取前言......
  • 关于JS中的原型
    1.每个函数都会创建一个prototype属性,这个属性指向一个对象,包含应该由特定引用类型的实例共享的属性和方法。(只要三个函数,就比如会附带出现一块对象储存区,链接名为prototype,一定要记住这一点。也就是说,函数,除了arguments等独特的属性,还有一个prototype。对象通过constructor属性指......