Скопируйте встроенный SVG в буфер обмена с помощью JavaScript - PullRequest
0 голосов
/ 15 февраля 2019

Я создаю инженерное приложение с использованием React, в котором пользователь выполняет некоторые вычисления и получает отчет.Я хочу, чтобы пользователь мог скопировать этот отчет в буфер обмена и вставить его в Word, Google Docs и т. Д.

Мой код выглядит примерно так:

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;

Проблема в том, чтоэта функция копирует только текст, но не изображения (встроенный svg).

Я думал, что это что-то легко решить, но прошло два месяца с тех пор, как я искал, и я не нашел решения.Я нашел подсказки, указывающие, что я должен преобразовать свой SVG в холст.Я попытался использовать следующее, но это не сработало.

convertSVG() {
    const svg = this.ref.current;
    const canvas = this.canvas.current;
    this.paintSvgToCanvas(svg, canvas);
  }

  paintSvgToCanvas(uSvg, uCanvas) {
    const pbx = document.createElement('img');
    // const pbx = new Image();

    pbx.style.width = uSvg.style.width;
    pbx.style.height = uSvg.style.height;

    console.log(window.btoa(uSvg.outerHTML));

    pbx.src = `data:image/svg+xml;base64,${window.btoa(uSvg.outerHTML)}`;
    uCanvas.getContext('2d').drawImage(pbx, 0, 0);
    console.log('ok');
  }

Что я могу сделать, чтобы решить эту проблему?

Я так долго борюсь с этой проблемой.Я ценю любую помощь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...