这是我的代码，我使用IE 11在我的项目上进行测试，下载功能不起作用。我想让它下载内容到图像，请帮我解决方案，谢谢。:
<!DOCTYPE html>
<html>
<head>
<title>Save Page Content as Image</title>
<style>
/* Styles for the content to be captured */
#contentToCapture {
width: 400px;
padding: 20px;
background-color: lightgray;
}
</style>
</head>
<body>
<div id="contentToCapture">
<h1>Sample Content</h1>
<p>This is the content you want to capture and save as an image.</p>
</div>
<button id="captureButton">Capture and Save as Image</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
<script>
$(document).ready(function() {
// Click event handler for the capture button
$('#captureButton').click(function() {
// Get the element you want to capture
var elementToCapture = document.getElementById('contentToCapture');
// Use html2canvas to render the element as a canvas
html2canvas(elementToCapture).then(function(canvas) {
// Convert the canvas to a data URL
var dataUrl = canvas.toDataURL();
// Create a link to trigger the download
var link = document.createElement('a');
link.href = dataUrl;
link.download = 'captured-content.png';
link.click();
});
});
});
</script>
</body>
</html>
我正在使用 IE 11 来测试我的项目，下载功能不起作用。我想让它下载内容到图像，请帮我解决方案，谢谢。
尝试从数据 URL 转换为 Blob 对象，然后使用 msSaveOrOpenBlob 方法触发下载。以下是修改代码以使其在 IE 11 中运行的方法：
<!DOCTYPE html>
<html>
<head>
<title>Save Page Content as Image</title>
<style>
/* Styles for the content to be captured */
#contentToCapture {
width: 400px;
padding: 20px;
background-color: lightgray;
}
</style>
</head>
<body>
<div id="contentToCapture">
<h1>Sample Content</h1>
<p>This is the content you want to capture and save as an image.</p>
</div>
<button id="captureButton">Capture and Save as Image</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
<script>
$(document).ready(function() {
// Click event handler for the capture button
$('#captureButton').click(function() {
// Get the element you want to capture
var elementToCapture = document.getElementById('contentToCapture');
// Use html2canvas to render the element as a canvas
html2canvas(elementToCapture).then(function(canvas) {
// Convert the canvas to a Blob object
canvas.toBlob(function(blob) {
// Create a temporary anchor element to trigger the download
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'captured-content.png';
// For IE 11
if (window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob, 'captured-content.png');
} else {
// For other browsers
link.click();
}
});
});
});
});
</script>
</body>
</html>