[Vue3 + TS + Vite] 将带有HTML样式的文本复制到剪切板

换行分割:硬回车

const copyToClipboardWithStyles = async (html: string) => {const modifiedHtml = html.replace(/\n/g, '<br>').replace(/ /g, '&nbsp;')const item = new ClipboardItem({'text/html': new Blob([modifiedHtml], { type: 'text/html' }),'text/plain': new Blob([html], { type: 'text/plain' }),})if (navigator.clipboard) {try {await navigator.clipboard.write([item])} catch (error) {console.error('Failed to copy to clipboard:', error)}} else {console.warn('Your browser does not support writing to the clipboard.')}
}

换行分割:段落

const copyToClipboardWithStyles = async (html: string) => {const paragraphs = html.split('\n').map(line => `<p>${line.replace(/ /g, '&nbsp;')}</p>`)const modifiedHtml = paragraphs.join('')const item = new ClipboardItem({'text/html': new Blob([modifiedHtml], { type: 'text/html' }),'text/plain': new Blob([html], { type: 'text/plain' }),})if (navigator.clipboard) {try {await navigator.clipboard.write([item])} catch (error) {console.error('Failed to copy to clipboard:', error)}} else {console.warn('Your browser does not support writing to the clipboard.')}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/45768.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

我的六天C++外出学习记

第一天 7月7日 星期日 早晨&#xff0c;我早早起来了&#xff0c;穿好衣服吃完饭就出发了。 我从家到学校用了1H&#xff0c;迟到了&#xff01;我急急忙忙去报到。 我们中午和晚上的饭菜虽说有点贵&#xff0c;但实在太美味了&#xff0c;和我们原本初中的饭菜相比&#…

【Flask项目】文件分享系统(一)

前言 笔者之前自学了下Python的轻量级Web框架Flask&#xff0c;学编程大家都知道&#xff0c;不动手实操都是假把式&#xff0c;这样造成的结果就是&#xff0c;你觉得看懂了&#xff0c;也听会了&#xff0c;但是让你自己开做个工具或项目&#xff0c;就是无从下手。因此&…

ACE之ACE_Time_Value

简介 ACE_Time_Value在ACE中表示时间&#xff0c;集成不同平台的时间 结构 #mermaid-svg-dGoKn1R7GicabUif {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-dGoKn1R7GicabUif .error-icon{fill:#552222;}#mermaid-…

手机怎么用代理ip上网

在数字化时代&#xff0c;网络已经成为我们生活中不可或缺的一部分。然而&#xff0c;有时候出于安全、隐私或访问特定网络资源的需要&#xff0c;我们可能需要使用代理IP来上网。那么&#xff0c;什么是代理IP&#xff1f;如何在手机上设置并使用它呢&#xff1f;本文将为您详…

国内Ubuntu安装 stable-diffusion教程,换成国内镜像

安装依赖&#xff1a; 首先更新系统并安装Python 3.10和pip&#xff1a; sudo apt update sudo apt install python3.10 python3-pip 设置Python虚拟环境&#xff08;可选&#xff09;&#xff1a; 安装Python虚拟环境管理工具&#xff0c;并创建激活虚拟环境&#xff1a; su…

AI绘画,Stable Diffusion姓氏头像副业拆解,操作简单,小白也能轻松上手!

前言 嗨&#xff0c;我是月月。 说时候&#xff0c;现在副业项目层出不穷&#xff0c;但要找到一个操作简单、收益可观且具有长期潜力的项目并不容易。 今天&#xff0c;我为大家推荐一个当下非常火爆的副业项目——AI定制百家姓氏头像。这不仅是一个热门项目&#xff0c;更…

Java调用py或者exe文件实现word转PDF

前言 有次上班时小伙伴和我吐槽Java实现word转pdf太麻烦&#xff0c;我灵机一动Java调用python&#xff0c;python实现转换操作不就行了。 开发环境 Java&#xff1a;JDK1.8 python&#xff1a;3.12 代码 import docx2pdf import sys import glob import osdef w2ps(d):word…

云动态摘要 2024-07-12

给您带来云厂商的最新动态,最新产品资讯和最新优惠更新。 最新优惠与活动 数据库上云优选 阿里云 2024-07-04 RDS、PolarDB、Redis、MongoDB 全系产品新用户低至首年6折起! [免费体验]智能助手ChatBI上线 腾讯云 2024-07-02 基于混元大模型打造,可通过对话方式生成可视化…

vue-ref与reactive

ref ref所创建的对象本身不具有响应性&#xff0c;而是将内部值包装在特殊对象中&#xff0c;通过.value访问响应对象。在模板中使用ref时&#xff0c;不需要加.value&#xff0c;会自动解包。ref可以为对象和非对象的普通变量增加响应性。&#xff08;如果是对象用proxy包装再…

Vue3 markRaw的使用

markRaw 作用:将一个对象标记为不可以被转化为代理对象。返回该对象本身。 应用场景: 1.有些值不应被设置成响应式时,例如复杂的第三方类库等 2.当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能 3.在动态渲染组件的时候我们就可以使用 markRaw 包裹。markRaw 的…

Chromium实用技巧篇-如何下载指定版本的Chromium(一)

1. 引言 随着互联网技术的不断发展&#xff0c;网络浏览器已经成为我们日常生活中不可或缺的一部分。作为一款开源浏览器项目&#xff0c;Chromium不仅为Google Chrome提供了坚实的基础&#xff0c;也为其他许多浏览器提供了技术支持。如果您希望体验最前沿的浏览器功能或参与开…

一个很变态但是有用的变现手段:用AI技术搞电商模特图,接单接到手软~

前言 今天带大家拆解一个特别有趣的项目&#xff0c;必须得跟大家分享一下&#xff1a;用AI技术搞电商模特图。 是不是感觉挺科幻的&#xff1f;但这真不是科幻小说里的情节&#xff0c;而是咱们现实生活中已经实现的事情。 想想看&#xff0c;咱们平常在网上看到的那些漂亮…

vue-模板引用

官网原文&#xff1a; 虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作&#xff0c;但在某些情况下&#xff0c;我们仍然需要直接访问底层 DOM 元素。要实现这一点&#xff0c;我们可以使用特殊的 ref attribute&#xff1a; <input ref"input">…

网络基础知识--网络硬件设备介绍(含eNSP模拟器命令使用)

华为 eNSP 模拟器安装教程可参考&#xff1a;华为 eNSP 模拟器安装教程&#xff08;内含下载地址&#xff09;_ensp下载-CSDN博客 华为eNSP&#xff08;Enterprise Network Simulation Platform&#xff09;模拟器是一款由华为提供的免费网络仿真平台&#xff0c;主要用于模拟和…

虚拟机vmware网络设置

一、网络分类 打开vmware workstation网络编辑器可以知道有三种网络类型&#xff0c;分别是&#xff1a;桥接模式、nat模式、仅主机模式。 1、桥接模式 桥接模式是将主机网卡与虚拟机虚拟的网卡利用虚拟网桥进行通信。在桥接的作用下, 类似于把物理主机虚拟为一个交换机, 所有设…

【Wamp】局域网设备访问WampServer | 使用域名访问Wamp | Wamp配置HTTPS

局域网设备访问WampServer 参考&#xff1a;https://www.jianshu.com/p/d431a845e5cb 修改Apache的httpd.conf文件 D:\Academic\Wamp\program\bin\apache\apache2.4.54.2\conf\httpd.conf 搜索 Require local 和Require all denied&#xff0c;改为Require all granted <…

分布式系统中雪花ID的使用及前后台精度解决

本文介绍了雪花ID的应用场景&#xff0c;以及针对雪花id生成精度过大导致数据缺失的解决方案。 一、概念 雪花 ID是一种分布式 ID 生成策略&#xff0c;保证全局唯一&#xff0c;位数组成中含有时间戳&#xff0c;相比UUID,故也能保证自增。 二、应用场景 分库、分表、分片、…

【windows OBS开启直播】Windows搭建RTMP视频流服务(Nginx服务器版)

如果您想在windows 电脑上设置RTMP服务器&#xff0c;并使用VLC播放器播放OBS的直播流&#xff0c;您可以使用一个本地的RTMP服务器软件&#xff0c;如nginx配合nginx-rtmp-module来搭建。下面 详细介绍下如何搭建此视频流服务。 1、安装和配置本地RTMP服务器 步骤1&#xff…

MyBatis(40)使用 MyBatis 时,事务管理的常见问题有哪些,如何解决

在使用MyBatis进行事务管理时&#xff0c;开发者可能会遇到多种问题&#xff0c;这些问题通常涉及事务的边界定义、事务的传播行为、以及事务的一致性等方面。下面&#xff0c;我们将深入探讨这些常见问题及其解决方案&#xff0c;并结合源码和代码示例进行详细解析。 1. 事务…

ST Smart Things Sentinel:一款针对复杂IoT协议的威胁检测工具

关于ST Smart Things Sentinel ST Smart Things Sentinel&#xff0c;简称ST&#xff0c;是一款功能强大的安全工具&#xff0c;广大研究人员可以使用该工具检测物联网 (IoT) 设备使用的复杂协议中的安全威胁。 在不断发展的联网设备领域&#xff0c;ST Smart Things Sentinel…