下载PNG
// 图表转换成canvas
html2canvas(document.getElementById("myChart")).then(function (canvas) {
var img = canvas
.toDataURL("image/png")
.replace("image/png", "image/octet-stream")
// 创建a标签,实现下载
var creatIMg = document.createElement("a")
creatIMg.download = "图表.png"
creatIMg.href = img
document.body.appendChild(creatIMg)
creatIMg.click()
creatIMg.remove()
})
下载 Jpge
import html2canvas from "html2canvas";
html2canvas(document.getElementById("myChart")).then(function (canvas) {
var img = canvas
.toDataURL("image/jpeg")
.replace("image/jpeg", "image/octet-stream");
var creatIMg = document.createElement("a");
creatIMg.download = "图表.jpeg";
creatIMg.href = img;
document.body.appendChild(creatIMg);
creatIMg.click();
creatIMg.remove();
});
下载pdf
html2canvas(document.getElementById("myChart")).then(function (canvas) {
let contentWidth = canvas.width
let contentHeight = canvas.height
let pageHeight = (contentWidth / 592.28) * 841.89
let leftHeight = contentHeight
let position = 0
let imgWidth = 595.28
let imgHeight = (592.28 / contentWidth) * contentHeight
let pageData = canvas.toDataURL("image/jpeg", 1.0)
let PDF = new jsPDF("", "pt", "a4")
if (leftHeight < pageHeight) {
PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
if (leftHeight > 0) {
PDF.addPage()
}
}
}
PDF.save("图表" + ".pdf")
})