0

This is my code, I am using IE 11 for testing on my project, and the download function did not work. I want to make it download the content as images, please help me find the solution, Thanks.:

$(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();
        });
    });
});
        /* Styles for the content to be captured */
        #contentToCapture {
            width: 400px;
            padding: 20px;
            background-color: lightgray;
        }
<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>

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

Improve this question
2
  • 2
    I would not try to fix it because it's deprecated and no longer anymore microsoft.com/en-US/download/….
    – Script Host
    Commented Aug 14, 2023 at 4:01
  • Why in the world would you want to test in IE11?
    – j08691
    Commented Aug 14, 2023 at 17:24

1 Answer 1

Reset to default
0

How about try to convert to Blob object from the data URL and then use the msSaveOrOpenBlob method for triggering the download. Here's how you can modify your code to make it work in 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>

Improve this answer
1
  • Tried before, also not working.
    – Alton Huang
    Commented Aug 14, 2023 at 4:04

Not the answer you're looking for? Browse other questions tagged or ask your own question.