当然可以实现啦！从Word复制的图文内容其实是通过剪贴板的HTML格式传递的，我们可以通过解析剪贴板里的HTML数据，同时提取文本和图片并渲染到网页上。下面是具体的实现思路和代码示例：

核心思路 #

• 监听页面的paste事件，先阻止默认粘贴行为，避免浏览器只处理单一类型的内容
• 从剪贴板的clipboardData中获取HTML格式的数据——从Word复制的图文内容会被打包成带有完整结构的HTML，其中图片一般是以base64编码的形式嵌入的
• 解析这段HTML，你可以选择直接将处理后的内容插入页面，也可以精细化提取文本和图片元素分别处理

完整代码示例 #

document.addEventListener('paste', async (e) => {
  // 先阻止默认粘贴，避免浏览器只粘贴纯文本或单张图片
  e.preventDefault();

  // 优先处理HTML格式的剪贴板数据（Word复制的图文会走这个分支）
  if (e.clipboardData.types.includes('text/html')) {
    const htmlContent = e.clipboardData.getData('text/html');
    
    // 创建临时DOM容器来解析HTML内容
    const tempContainer = document.createElement('div');
    tempContainer.innerHTML = htmlContent;

    // 可选操作：过滤不安全的标签，防止注入风险
    const unsafeTags = ['script', 'iframe', 'object'];
    unsafeTags.forEach(tag => {
      tempContainer.querySelectorAll(tag).forEach(el => el.remove());
    });

    // 将处理好的图文内容插入到页面的目标容器中
    const targetContainer = document.getElementById('paste-target');
    targetContainer.appendChild(tempContainer);
  }

  // 兼容纯文本或单独图片的粘贴场景（可选保留）
  else if (e.clipboardData.types.includes('text/plain')) {
    const plainText = e.clipboardData.getData('text/plain');
    document.getElementById('paste-target').textContent += plainText;
  } else if (e.clipboardData.types.some(type => type.startsWith('image/'))) {
    const imageFile = e.clipboardData.items[0].getAsFile();
    const imageUrl = URL.createObjectURL(imageFile);
    const imgElement = document.createElement('img');
    imgElement.src = imageUrl;
    document.getElementById('paste-target').appendChild(imgElement);
  }
});

额外说明 #

• 从Word复制的内容会自动在剪贴板的HTML中保留原有的排版样式（比如段落、列表）和图片的base64编码，直接解析插入就能还原大部分格式
• 如果你需要自定义处理图片（比如压缩、上传到服务器替换base64），可以遍历临时DOM里的<img>标签，取出src属性中的base64数据进行处理
• 注意：部分浏览器对剪贴板数据的读取有同源限制，确保你的代码在同源页面环境下运行，或者配置好相应的权限

内容的提问来源于stack exchange，提问作者Philip Franklin