- 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); |
It's not working properly anymore. It zooms the pdf so you get only one side of it.
i have those errors when i click enter
his document requires 'TrustedScriptURL' assignment.
(anonymous) @ VM2761:23
VM2761:23 Uncaught TypeError: Failed to set the 'src' property on 'HTMLScriptElement': This document requires 'TrustedScriptURL' assignment.
at :23:11
What i did wrong?
Please help
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
@DurimSh
Hi, is there any way I can do the same with PDF files that have pages in formats that are not A4?
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
many thanks for your useful script!!!
However, is there any tips or methods to get original resolution of the pdfs?
Good day,
JP
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);
only 4 pages? can fix this to 300 pages file?
However, is there any tips or methods to get original resolution of the pdfs?
I've updated and upgraded the script to have better resolution: https://gist.github.com/cirippo/86edfbddc3125eb64ee4b2d8faa52caa
only 4 pages? can fix this to 300 pages file?
You have to scroll down to the end of the document before launching the script.
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
Thanks! 🤗
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
присутствуют ссылки, то они не доступны!
Thank you for this, but the document is often very blurry. Is there any way to bypass this?