首先，我希望你度过一个愉快的圣诞节假期！
我指定我是JS的初学者，因此我可能会尝试用PNG下载我的Blob。
我的问题是通过点击按钮以pdf或图像格式导出DIV的所有图形内容(DIV的类名始终相同(
经过一番研究，我明白了必须将div转换为canva才能下载它。我试着改编了这篇文章中的代码：如何用JavaScript截屏div？
但当我点击按钮时，尽管我进行了各种修改和测试，但什么都没有发生。。。
这是我的代码预览：
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Export Visualisation QS</title>
</head>
<body>
<div class="qvt-sheet-container">
<h1>EXPORT PNG</h1>
<img src="Logo-Qlik.png">
</div>
<a id="link"><button id="btn-export-qs">Export PNG</button></a>
</body>
<script language="JavaScript" type="text/javascript" src="jquery-3.6.0.min.js">
var a = document.getElementById("link");
function export_feuille() {
$("#btn-export-qs").click(function() {
html2canvas($(".qvt-sheet-container"), {
onrendered: function(canvas) {
//theCanvas = canvas;
canvas.toBlob(function(blob) {
//saveAs(blob, "Dashboard.png");
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = "export_qs.png";
a.click();
window.URL.revokeObjectURL(url);
});
}
});
});
};
document.getElementById("btn-export-qs").addEventListener ("click", export_feuille, false);
</script>
</html>
如果有人能教育我什么是错的，或者给我指明方向，我将非常感激：(
据我所见，您代码中的一些代码是多余的。
在您的代码中
document.getElementById("btn-export-qs").addEventListener ("click", export_feuille, false);
上面的代码表示您已经为按钮添加了点击事件。当单击该按钮时，它会调用export_feuille函数，而在export_feuille中，您使用jQuery再次执行此操作，这是不合理的。
您将<button>包装在<a>中，当按下按钮时将使用a标签触发下载事件，您不需要。尝试以下操作：
Html:我删除了<a>
<div class="qvt-sheet-container">
<h1>EXPORT PNG</h1>
<img src="your-image.jpg" style="width: 150px;height: 150px">
</div>
<button id="btn-export-qs">Export PNG</button>
Javascript：
$("#btn-export-qs").click(function () {
html2canvas(
document.querySelector('.qvt-sheet-container'),
{
allowTaint: true,
useCORS: true
}
).then(canvas => {
download(canvas)
})
});
const download = function (canvas) {
const link = document.createElement('a');
link.download = 'filename.png';
link.href = canvas.toDataURL()
link.click();
}
此处为完整代码