-
-
Save jatubio/34a176fdbbb7a7d5a920c8698a7661bd 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, img.width, img.height); | |
let imgData = can.toDataURL("image/jpeg", 1.0); | |
pdf.addImage(imgData, 'JPEG', 0, 0); | |
pdf.addPage(); | |
} | |
pdf.save("Exported_File.pdf"); | |
}; | |
jspdf.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js'; | |
document.body.appendChild(jspdf); |
Doesn't work anymore :( downloads an empty pdf.
still working, you have to let the pdf to be fully loaded, only then use this in console
still working, you have to let the pdf to be fully loaded, only then use this in console
Nope. Empty PDF
Still working, open the pdf and load every page of the pdf, then run it in the console.
When i put the Js code shows me this:
This 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
// Created by Snax :)
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 code :)
// Created by Snax :) 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 code :)
How to make the PDF at Finest Quality?
// Created by Snax :) 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 code :)
this is working like a charm, thanks dude, but not like how the old script since it only give one type of size and resolution,
@5nax ,how can we change the resolution for this code so we can get zoom and get the better quality for the pdf specially small text heavy view only pdfs?
the old one resolution automatically changes as you zoom,
I wish someone could update it or have another code for the 1 tap zoom resolution so that the file was not croppped when zoomed
How to make the PDF at Finest Quality?
this is working like a charm, thanks dude, but not like how the old script since it only give one type of size and resolution, @5nax ,how can we change the resolution for this code so we can get zoom and get the better quality for the pdf specially small text heavy view only pdfs? the old one resolution automatically changes as you zoom,
I wish someone could update it or have another code for the 1 tap zoom resolution so that the file was not croppped when zoomed
See this updated and upgraded script: https://gist.github.com/cirippo/86edfbddc3125eb64ee4b2d8faa52caa
Working fine in "google drive".
ex: https://drive.google.com/drive/folders/oooooo...
In this folder and right click the file and "preview".
But doesn't work in "google slides".
ex: https://docs.google.com/presentation/d/xxxxxx...
this will download a empty page.
If someone want to download (print) the presentation, you can try to enter "preview" mode.
ex: https://docs.google.com/presentation/d/xxxxxx.../preview
in the Lower Left corner "options > more > download as PDF" (if this file Doesn't Allow "download, print, and copy", then this optnions will be hidden).
And how can I download the images?, the screenshots lower their quality a lot.
// Created by Snax :) 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 code :)
download its ok, but the file is empty :(
Paste this code in the console.
With:
new jsPDF()
you get a 297 x 210 (mm) page size.To get a higher quality PDF, you have to zoom in the document in Google Drive. You can click zoom in button ONE time.
Now you get a bigger image, so you have to increase 297 x 210 (mm) to (2975) x (2105) (mm) (for example):
new jsPDF('p', 'mm', [297*5, 210*5]);
You can try with
*4
,*6
,*10
, etc...To download a landscape PDF file, basically you have to change line 3 in the code to:
let pdf = new jsPDF('l');
Credits to: https://codingcat.codes/2019/01/09/download-view-protected-pdf-google-drive-js-code/