Я создаю инженерное приложение с использованием 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');
}
Что я могу сделать, чтобы решить эту проблему?
Я так долго борюсь с этой проблемой.Я ценю любую помощь.