下载 PNG 格式的 Blob

Question

首先祝大家圣诞假期愉快！

我指定我是 JS 的初学者，因此我可能会尝试以 PNG 格式下载我的 Blob。

我的问题是通过单击按钮（class 的名称以 pdf 或图像格式导出 DIV 的所有图形内容div 始终相同）

经过一些研究，我了解到我必须将 div 转换为 canva 才能下载它。我试图从这个 post 改编代码： How to take screenshot of a div with JavaScript?

但是当我点击按钮时，尽管我进行了各种修改和测试，但没有任何反应...

这是我的代码预览：

<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>

如果有人能告诉我哪里出了问题或指出我的方向，我将不胜感激:)

Answer 1

据我所知，您的代码中有些代码是多余的。

在你的代码中

document.getElementById("btn-export-qs").addEventListener ("click", export_feuille, false);

以上代码表示您已经为按钮添加了点击事件。单击按钮时它会调用 export_feuille 函数，在 export_feuille 中您使用 jQuery 再次执行此操作，这是不合理的。

你在<a>里面包裹了一个<button>，当按钮按下的时候会使用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();
}

完整代码here

下载 PNG 格式的 Blob

Download a Blob in PNG Format

html

javascript

css

jquery

blob