javascript 如何在同一剪贴板项目中复制SVG和链接?

zbdgwd5y  于 2022-12-02  发布在  Java
关注(0)|答案(1)|浏览(128)

我有一个网站,显示一个图表。
在图表下面,我有一个按钮,当单击它时,将图表作为图像复制到剪贴板。
我还想有一个链接到网站在复制项目,以便当用户粘贴到电子邮件,例如它将粘贴图像和链接在一个去。
这是可能的吗?示例图如下:

ijnw1ujt

ijnw1ujt1#

所以我在下面的例子中使用了Highcharts。
新的Clipboard.write API不能接受多个项目,但是你可以通过创建一个自定义的HTML Package 器元素并复制它来解决这个问题。

// Get the SVG Element
const svg = chartRef.current.chart.getSVG(options);

// Convert that element into a data image: <img src="data:image/....
const asImg = svgToDataImage(svg);

// Create your new HTML.
const newHtml = `<img alt="A Chart" src="${asImg}" /><br /> <a href="some.website/chart/">Click to view this chart live.</a>`;

// Write the html to the clipboard.
await navigator.clipboard.write([
    new ClipboardItem({
        "text/html": new Blob([newHtml], {
            type: "text/html",
        }),
    }),
]);

相关问题