html - 将图形从 MS Office 复制粘贴到 html

Question

当您在 MS powerpoint 中复制图形（例如正方形或箭头）时，可以将其粘贴到其他 Microsoft 产品中，例如 MS Word 或 MS Outlook。

是否有可能制作一个也可以做到这一点的网页？

我试图从 powerpoint 粘贴到 contenteditable div 或 textarea，但没有任何反应。

我想它不会开箱即用，但是无论如何都可以以某种方式访问​​复制粘贴缓冲区中的信息，即使它们是任何类型的微软格式？

Answer 1

您可以收听“粘贴”事件，并从 ClipboardEvent 对象中获取图像块。代码示例：

document.addEventListener('paste', handleClipBoard);
function handleClipBoard(ev) {
  ev.preventDefault();
  Array.prototype.forEach.call(ev.clipboardData.items, function(item) {
    if (item.kind === 'string') {
      item.getAsString(function(content) {
          ev.target.innerHTML += content;
      });
    } else if(item.kind === 'file') {
      var blob = item.getAsFile();
      console.dir(blob);
      var img = document.createElement('img');
      img.src = URL.createObjectURL(blob);
      ev.target.appendChild(img);
    }
  });
}

ClipboardEvent API 在此处指定：http: //www.w3.org/TR/clipboard-apis 但是，此 API 是相当新的，目前只有 chrome 完全支持。

您会注意到剪贴板中的内容可能会被多次粘贴，这是因为剪贴板中的数据可以同时采用不同的格式。您可以通过 item.type 属性过滤它们。

Answer 2

右键单击该图，选择另存为图片并保存为 PNG/JPG。然后在您的 html 中使用 img 标签来引用图像。

Answer 3

如果您只想复制原始数据，那么这是可能的。因为 Buffer 只存储字符 ASCII 值而不是特定文本的样式。如果你也想要那种风格，那么使用 css 文件