使用clipboard.js实现复制功能文字 +图片到微信客户端输入框

最新推荐文章于 2026-06-25 10:14:38 发布

原创

最新推荐文章于 2026-06-25 10:14:38 发布 · 2.3k 阅读

这篇博客记录了作者在管理后台实现将文字和图片复制到粘贴板，以便用户能直接粘贴到微信发送的过程。主要解决了三个问题：不支持HTTPS图片、复制需两次点击及动态对象复制错误。通过使用clipboard.js库并调整初始化及事件监听方式，成功实现了功能。

离开8年，从技术管理，到管理，现在靠上天给的点天份和机遇创业。

时间自由了，想想还是把接下来遇到的技术问题都记录一下。

需求：管理后台中实现将文字和图片复制到粘贴板，用户可以直接粘贴到微信客户端输入框中发送出去。

填坑过程：百度了大家的方案，最终使用clipboard.js实现。

坑1：文本可以复制，但图片复制不了

原因：检查一下图片的路径是不是http，clipboard.js不支持https路径的图片；

坑2：点两次才复制成功，或点一次复制了多次

原因：代码问题，clipboard需要在document load后进行初始化，clipboard初始化时会自动监听click事件，无需反复初始化和自己监听click事件中操作（这样第一次点击时，只初始化，没能监听到本次事件，下次点击其实是上次初始化监听执行的）

坑3：动态对象复制内容不对的问题

原因：clipboard自动监听click事件，比你自己的监听处理早，导至动态处理还没有结束就复制了。需在初始化target function中进行处理。

上菜：

<button type="button" class="btn btn-highlight wechat-copy" data-bind="attr: { 'data-images': images, 'data-lot':lot, 'data-desc':description}"
data-btntip="复制描述+图像">复制</button>
<div id='wechat-copy-main' style="opacity: 0"></div>

<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script type="text/javascript">

标签