Question

我正在使用React构建一个工程应用程序，其中用户进行一些计算并获得一个报告。我希望用户能够将该报告复制到剪贴板并将其粘贴到Word，Google文档等中。

我的代码如下：

SELECT country
  ,count(distinct case when month(date(dt)) = 12 AND YEAR(date(dt)) = 2018 then uuid end) as m1
  ,count(distinct case when month(date(dt)) = 11 AND YEAR(date(dt)) = 2018 then uuid end) as m2
FROM user
GROUP BY country

问题在于此函数仅复制文本，而不复制图像（内嵌svg）。

我认为这很容易解决，但是距离寻找已经过去两个月了，但是我还没有找到解决方案。我发现了一些线索，表明我应该将svg转换为画布。我尝试使用以下内容，但没有用。

import React, { Component } from 'react';

function copyToClipboard(node) {
  const selection = window.getSelection();
  selection.removeAllRanges();

  const range = document.createRange();
  range.selectNodeContents(node);
  selection.addRange(range);

  // returns true or false
  const success = document.execCommand('copy');
  if (success) console.log('Successfully copied to clipboard');
  else console.log('Unable to copy to clipboard');
}

class Report extends Component {
  constructor(props) {
    super(props);
    this.report = React.createRef();
  }

  handleClick = () => {
    const report = this.report.current;
    copyToClipboard(report);
  };

  render() {
    return (
      <div>
        <button onClick={() => this.handleClick()}>copy report</button>
        <div ref={this.report}>
          <p>Some text ...</p>
          <svg>...</svg>
          <p>More text ...</p>
          <svg>...</svg>
        </div>
      </div>
    );
  }
}

export default Report;

我该怎么解决这个问题？

我一直在努力解决这个问题。感谢您的帮助。

使用JavaScript将内嵌SVG复制到剪贴板

0 个答案: