How to Save a webpage as images 2024

Have you ever faced a situation where you needed to download a webpage that was copy-protected or print-protected? It can be frustrating when you can’t save important information for later use. In this blog post, I will share two methods and scripts that allow you to:

Download the entire page.
Save images of each page, which you can later convert into a PDF using any online image-to-PDF converter.

These methods are particularly useful when you need to save documents from Google Drive that are print/copy-protected.

Steps to Follow

Open the webpage you want to download.
Press CTRL + SHIFT + J to open the developer console.
Click on the “Console” tab.
Press CTRL + L to clear the messages in the console.
Use one of the following scripts based on your needs.

Code 1: To Download The Entire Webpage/PDF

				
					let trustedURL;
if (window.trustedTypes && trustedTypes.createPolicy) {
    const policy = trustedTypes.createPolicy('myPolicy', {
        createScriptURL: (input) => {
            return input;
        }
    });
    trustedURL = policy.createScriptURL('https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js');
} else {
    trustedURL = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js';
}

// Load the jsPDF library using the trusted URL.
let jspdf = document.createElement("script");
jspdf.onload = function () {
    // Generate a PDF from images with "blob:" sources.
    let pdf = new jsPDF();
    let elements = document.getElementsByTagName("img");
    for (let i = 0; i < elements.length; i++) {
        let img = elements[i];
        if (!/^blob:/.test(img.src)) {
            continue;
        }
        let canvasElement = document.createElement('canvas');
        let con = canvasElement.getContext("2d");
        canvasElement.width = img.width;
        canvasElement.height = img.height;
        con.drawImage(img, 0, 0, img.width, img.height);
        let imgData = canvasElement.toDataURL("image/jpeg", 1.0);
        pdf.addImage(imgData, 'JPEG', 0, 0);
        if (i !== elements.length - 1) {
            pdf.addPage();
        }
    }

    // Download the generated PDF.
    pdf.save("download.pdf");
};
jspdf.src = trustedURL;
document.body.appendChild(jspdf);

Code 2: To Save each page as images

				
					(function() {
   let elements = document.getElementsByTagName("img");

   for (let i = 0; i < elements.length; i++) {
       let img = elements[i];
       console.log("Processing img ", img);

       // Create a canvas to draw the image
       let can = document.createElement('canvas');
       let con = can.getContext("2d");
       can.width = img.width;
       can.height = img.height;
       con.drawImage(img, 0, 0, img.width, img.height);
       let imgData = can.toDataURL("image/png");

       // Create a download link
       let link = document.createElement('a');
       link.href = imgData;
       link.download = `image_${i + 1}.png`;
       document.body.appendChild(link);
       link.click();
       document.body.removeChild(link);

       console.log(`Image ${i + 1} downloaded`);
   }
})();