解决在移动端浏览器上复制规格化的文本到微信上的问题

<!-- 用于存储待复制内容的隐藏元素 -->
<div id="contentStorage" style="display:none;"></div>
<!-- 隐藏的textarea用于兼容性复制 -->
<textarea id="clipboardHelper" style="position:absolute;left:-9999px;"></textarea>
<script type="text/javascript">
$(document).ready(function() {
    // 1. 从后台获取数据并保存
    function fetchDataAndStore(unid) {
        return $.ajax({
            url: '?op=dview&id='+unid,
            method: 'GET',
            dataType: 'json',
            success: function(response) {
                // 存储数据到隐藏元素中
				console.log(response);
				if(response.code == 1){
					$('#contentStorage').html(formatDataForWechat(response.data));
				}else{
					alert('获取数据失败，请刷新重试?');
				}
            },
            error: function(error) {
                console.error('获取数据失败:', error);
                alert('获取数据失败，请刷新重试');
            }
        });
    }
    
    // 2. 格式化数据为微信友好的HTML
    function formatDataForWechat(data) {
        // 这里可以根据你的数据结构自定义格式
        // 示例：假设data包含title, time, location等字段
		console.log(data.name);
        var html = '';
        html += `【姓名】：<span>${data.name || '暂无'}</span><br>`;
		html += `【性别】：<span>${data.sex || '暂无'}</span><br>`;
		html += `【年龄】：<span>${data.age|| '暂无'}岁</span><br>`;
		html += `【电话】：<span>${data.tel || '暂无'}</span><br>`;
		html += `【地址】：<span>${data.area || '暂无'}</span><br>`;
		
		console.log(html);
        return html;
    }
    
    // 3. 检测是否微信浏览器
    function isWechatBrowser() {
        return /MicroMessenger/i.test(navigator.userAgent);
    }
    
    // 4. 复制功能实现
    function copyToClipboard() {
        const content = $('#contentStorage').html();
        const textContent = $('#contentStorage').text();
        
		console.log(navigator.clipboard, isWechatBrowser());
        if (navigator.clipboard && !isWechatBrowser()) { // 现代浏览器方法
			console.log('PC');
            navigator.clipboard.write([
                new ClipboardItem({
                    'text/html': new Blob([content], { type: 'text/html' }),
                    'text/plain': new Blob([textContent], { type: 'text/plain' })
                })
            ]).then(function() {
                showSuccess();
            }).catch(function() {
                fallbackCopy(textContent);
            });
        } else { // 微信兼容方法
			console.log('WEIXIN');
            fallbackCopyForWechat(content);
        }
    }
    
    // 5. 微信兼容的复制方法
    function fallbackCopyForWechat(html) {
        const $temp = $('<div>').css({position: 'absolute',left: '-9999px'}).html(html).appendTo('body');
        
        // 创建选区
		const selection = window.getSelection();
        const range = document.createRange();
		console.log($temp[0]);
        range.selectNode($temp[0]);
        //range.selectNodeContents($temp[0]);
		
        selection.removeAllRanges();
        selection.addRange(range);
        
        try {
            const success = document.execCommand('copy');
			//console.log(selection.getRangeAt(0).cloneContents());
			//console.log('Supported', document.queryCommandSupported('copy'));
			//console.log('Enabled', document.queryCommandEnabled('copy'));
			//console.log('copy success', document.execCommand('copy'));			
            if (success) {
                showSuccess();
            } else {
                throw new Error('复制失败');
            }
        } catch (err) {
            alert('自动复制失败，请手动选择内容复制');
        } finally {
            $temp.remove();
            selection.removeAllRanges();
        }
    }
    
    // 6. 最基础的降级复制方法
    function fallbackCopy(text) {
        const $helper = $('#clipboardHelper');
        $helper.val(text).select();
        try {
            document.execCommand('copy');
            showSuccess();
        } catch (err) {
            alert('请手动选择并复制以下内容:\n\n' + text);
        }
    }
    
    // 7. 显示成功提示
    function showSuccess() {
        // 这里可以使用更美观的提示方式，比如Toast
        alert('内容已复制，可以粘贴到微信了！');
    }
    
    // 初始化：获取数据并设置点击事件
	$('.copyBtnId').click(function(){
		var unid = $(this).data('id');
		fetchDataAndStore(unid).then(function() {
			copyToClipboard();
		});
	});
});

</script>

注意事项

navigator.clipboard在 https 协议下才能使用，或者安全域下才能使用。

安全域包括https,localhost、127.0.0.1、localhost:3000等。因此在使用前我们需要判断，同时也可以通过windows.isSecureContext属性来判断当前是否为安全域。