- Open the document in Google Docs
- Scroll to the bottom of the document, so all the pages are present
- Open Developer Tools on separate window and choose the Console tab
- Paste the code
- Have fun!
-
-
Save dpaluy/74258794f7930401cc27262e0ea794dd to your computer and use it in GitHub Desktop.
| let jspdf = document.createElement("script"); | |
| jspdf.onload = function () { | |
| let pdf = new jsPDF(); | |
| let elements = document.getElementsByTagName("img"); | |
| for (let i in elements) { | |
| let img = elements[i]; | |
| console.log("add img ", img); | |
| if (!/^blob:/.test(img.src)) { | |
| console.log("invalid src"); | |
| continue; | |
| } | |
| let can = document.createElement('canvas'); | |
| let con = can.getContext("2d"); | |
| can.width = img.width; | |
| can.height = img.height; | |
| con.drawImage(img, 0, 0); | |
| let imgData = can.toDataURL("image/jpeg", 1.0); | |
| pdf.addImage(imgData, 'JPEG', 0, 0); | |
| pdf.addPage(); | |
| } | |
| pdf.save("download.pdf"); | |
| }; | |
| jspdf.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js'; | |
| document.body.appendChild(jspdf); |
My PDF is in different page orientations and it downloaded cutted off. Is there a way to fix it? Landscape mostly.
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);Use this
You're amazing guy, thanks a lot!
Thanks to all devs for this wonderful script - it has been of great help with what it does. Lately I had to download a PDF with 1083 pages (mostly with images and text). The script threw the following error:
"Error in function Array.join (: Invalid string length"
the debug link points to file "jspdf.min.js"
Any help would be greatly appreciated. Cheers!
Thanks to all devs for this wonderful script - it has been of great help with what it does. Lately I had to download a PDF with 1083 pages (mostly with images and text). The script threw the following error:
"Error in function Array.join (: Invalid string length"
the debug link points to file "jspdf.min.js"
Any help would be greatly appreciated. Cheers!
i have the same issue
@kmiharu09 - of all the methods I tried, the following was the one that worked. Just use the below chrome extension and set the time delay for screenshot for every page to 1000ms, to provide sufficient time for the page to load completely. Good luck!
https://chromewebstore.google.com/detail/document-preview-exporter/npapjbliocdhineglcjkmmmaddpgeono
I've had an experience with a view only PDF journal with lots of text and pictures in which the pages had different orientations (portrait and landscape) 51 pages in total, so I couldn't download this pdf in any easy way as it was cut on some pages due to this.
So the way that worked for me:
- Used the GoFullPage extension for your browser. Make sure you zoomed the document to get good resolution and sharp text. I saved as one long PNG file.
- Used Photoshop
- Drop file in Photoshop
- Tap C (Crop tool). uncheck "Delete cropped pixels" option first in upper row!
- Make the area the size of the page you want to save
- Tap Enter to crop the visual canvas to the size of the area.
- Scroll with the Move tool (V) to fit the page
- Save page with Ctrl+Shift+Alt+S - dialogue box appears with option to save file. Again, this allows you to choose where you want to save, and each subsequent page will be saved in that directory - all you have to do is name the file.
And yes, I had to do this for all pages.
- Combined all the files into one PDF (I use the IlovePDF site for this). JPG to PDF option
There may be an easier way to save PDF view only file with different page orientations, but this is what worked for me.
@kmiharu09 - of all the methods I tried, the following was the one that worked. Just use the below chrome extension and set the time delay for screenshot for every page to 1000ms, to provide sufficient time for the page to load completely. Good luck!
https://chromewebstore.google.com/detail/document-preview-exporter/npapjbliocdhineglcjkmmmaddpgeono
this one worked for me
https://github.com/mhsohan/How-to-download-protected-view-only-files-from-google-drive-
but i had to clear cookies and cache and use firefox. I also zoomed to 120% on pdf. It worked. The pdf was almost 1600 pages.
Thanks for sharing.
It is awesome solution!
While i was using this script I noticed that pdf provided is low resolution,I come up with new script to save high quality
images of each page
(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`);
}
})();
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);
This actually works!
Its missing pages why?
Скрипт прикольный, но если в PDF присутствуют ссылки, то они не доступны!
Good
https://gist.github.com/wefluidmedia-prog/c517564f7225953e68b139ef70a7ad2e
Not working, unfortunately
Script Overview
This script dynamically loads the jsPDF library and generates a PDF document from all elements on the page that use blob: URLs (typically rendered slide images in a viewer).
For each image:
- It waits until the image is fully loaded.
- Draws it onto a temporary .
- Converts the canvas to an image (JPEG/PNG).
- Inserts the image into a PDF.
- Adds a new page for each slide.
- Automatically downloads the generated download.pdf.
Improvements Made
-
Landscape Orientation Support
The PDF is now created in landscape mode when the slide width is greater than its height. -
Dynamic Page Size Matching
Each PDF page is generated using the exact dimensions of the slide image, preventing cropping, distortion, or incorrect scaling. -
Correct Page Handling
Page creation is based on the filtered list of relevant images (not alltags in the DOM), ensuring accurate page breaks.
-
Image Load Safety
The script now waits for each image to fully load before processing, preventing blank or incomplete pages. -
Updated jsPDF Version
The script uses a modern jsPDF version (2.5.1) instead of the outdated 1.3.2 release. -
Optional A4 Landscape Scaling Variant
An alternative version supports fixed A4 landscape format with proportional scaling to fit slides within standard paper dimensions.
Code
(async () => {
let trustedURL;
if (window.trustedTypes && trustedTypes.createPolicy) {
const policy = trustedTypes.createPolicy('myPolicy', { createScriptURL: (input) => input });
trustedURL = policy.createScriptURL('https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js');
} else {
trustedURL = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js';
}
const loadScript = (src) =>
new Promise((resolve, reject) => {
const s = document.createElement("script");
s.onload = resolve;
s.onerror = reject;
s.src = src;
document.body.appendChild(s);
});
await loadScript(trustedURL);
const { jsPDF } = window.jspdf;
const imgs = Array.from(document.getElementsByTagName("img"))
.filter(img => /^blob:/.test(img.src));
if (!imgs.length) return;
const pdf = new jsPDF({ orientation: "landscape", unit: "pt", format: "a4", compress: true });
const pageW = pdf.internal.pageSize.getWidth();
const pageH = pdf.internal.pageSize.getHeight();
let pageIndex = 0;
for (const img of imgs) {
if (!img.complete || img.naturalWidth === 0) {
await new Promise((r) => img.addEventListener("load", r, { once: true }));
}
const w = img.naturalWidth || img.width;
const h = img.naturalHeight || img.height;
const canvas = document.createElement("canvas");
canvas.width = w;
canvas.height = h;
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, w, h);
const imgData = canvas.toDataURL("image/jpeg", 0.92);
if (pageIndex > 0) pdf.addPage();
// Вписываем в A4 landscape без искажений (с полями, если нужно)
const ratio = Math.min(pageW / w, pageH / h);
const drawW = w * ratio;
const drawH = h * ratio;
const x = (pageW - drawW) / 2;
const y = (pageH - drawH) / 2;
pdf.addImage(imgData, "JPEG", x, y, drawW, drawH);
pageIndex++;
}
pdf.save("download.pdf");
})();
Thanks! 🤗