ETH官方钱包

前往
大廳
主題

學破解Google共用PDF檔檢視者無法下載的方法 (詳細教學)【只要google就可以查到的知識#8】

邊緣人 | 2024-10-31 09:00:06 | 巴幣 2 | 人氣 1134
文章開頭先說明，方法網路上找來的，然後利用AI幫忙做一點修正協助。

為了方便YT觀眾找簡易教學內出現的指令，我決定直接先貼YT影片的簡易教學內使用的指令(姑且稱作簡易指令)。簡易指令如下：
// TrustedURL starting
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/2.5.1/jspdf.umd.min.js');
} else {
    trustedURL = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js';
}

// Download script starting - EDITED AND IMPROVED BY cirippo
let jspdfScript = document.createElement("script");

jspdfScript.onload = function () {
    // 使用新的全域變數名稱
    const { jsPDF } = window.jspdf;
    console.log(jsPDF.version);
    let pdf = new jsPDF('p', 'pt', [2400, 3393]);
    let elements = document.getElementsByTagName("img");
    for (let i = 0; i < elements.length; i++) {
        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 = 3200;
        can.height = 4524;
        con.drawImage(img, 0, 0);
        let imgData = can.toDataURL("image/jpeg", 1.0);
        pdf.addImage(imgData, 'JPEG', 0, 0);
        if (i !== elements.length - 1) {
            pdf.addPage();
        }
    }

    pdf.save("download.pdf");
    console.log('PDF generated and saved');
};

jspdfScript.src = trustedURL;
document.body.appendChild(jspdfScript);

我想會看這篇文章的應該都已經看過YT影片的簡易教學了，所以關於簡易教學的內容，我就不特別寫成文字了，有需要的請直接去文末找影片連結看。

簡易教學中示範的是接近A4尺寸，這樣的尺寸很常見，可是萬一不同尺寸該怎麼辦？其實步驟非常接近，我們只需要重新找出正確尺寸把簡易指令修改一下再就好。示範要用的每頁尺寸大致上如下圖供各位做初步檢視與參考。

那接下來就開始詳細教學。首先，我們得先將每頁尺寸記下來，並對這些尺寸做一些前置作業。以下是檢查尺寸及其相關前置作業的步驟。
  1. 按F12。
  2. 在開發者工具的來源(Source)中view底下的這些圖檔，隨便點一張是該PDF頁面的圖，確認每頁的基礎尺寸。
    P.S.：可看到尺寸是800*450 像素(px或pixels)。800就是橫的長度；450則是直的長度。順便提一下，基本上都是橫的長度乘直的長度。
  3. 將橫和直的長度都各乘4，並記住數值。
    P.S.：別問為什麼乘4，這是試出來的。像在示範例子中會得出3200*1800 px，姑且先記叫做尺寸1。
  4. 隨便打開一個px to pt的單位換算計算機，將步驟三中得到的數值去換算，也把這些換算後的數值記住。
    P.S.：我自己習慣用 https://pixelsconverter.com/px-to-pt 這個網站做換算，提供給大家參考看看。3200*1800 px換算後得出，2400*1350 pt，一樣記住，之後稱做尺寸2。

檢查完尺寸及其相關前置作業後，再來就是要針對指令做修正，要修正指令就要對其有一定程度的了解，因此我把簡易指令要做修正的部分轉成紅字，並特別解釋說明一下關於標成紅字的部分。
// TrustedURL starting
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/2.5.1/jspdf.umd.min.js');
} else {
    trustedURL = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js';
}

// Download script starting - EDITED AND IMPROVED BY cirippo
let jspdfScript = document.createElement("script");

jspdfScript.onload = function () {
    // 使用新的全域變數名稱
    const { jsPDF } = window.jspdf;
    console.log(jsPDF.version);
    let pdf = new jsPDF('p', 'pt', [2400, 3393]);
    let elements = document.getElementsByTagName("img");
    for (let i = 0; i < elements.length; i++) {
        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 = 3200;
        can.height = 4524;
        con.drawImage(img, 0, 0);
        let imgData = can.toDataURL("image/jpeg", 1.0);
        pdf.addImage(imgData, 'JPEG', 0, 0);
        if (i !== elements.length - 1) {
            pdf.addPage();
        }
    }

    pdf.save("download.pdf");
    console.log('PDF generated and saved');
};

jspdfScript.src = trustedURL;
document.body.appendChild(jspdfScript);

let pdf = new jsPDF('p', 'pt', [2400, 3393]);
  • 這句當中的第一項參數p，是指portrait，代表PDF每頁都是直的，講更明白一點，就是指橫的長度小於直的長度。但很明顯我們現在詳細教學的範例每頁都是橫的，那這時候就要把p換成l，l是指landscape，代表PDF的每頁都是橫的，也就是指橫的長度大於直的長度。
  • 接著看pt，代表points，用於設定基礎單位，這個基礎單位可換成cm、mm或inch(實際上要打in)等單位。因為這邊設pt，所以要把尺寸1換算成pt，這也是為何我們在剛剛的檢查尺寸及其相關前置作業的步驟中要開單位換算計算機。換其他基礎單位就要用不同單位的換算計算機喔。
  • 2400和3393則是在YT影片的簡易教學中示範約A4尺寸的pt尺寸，既然我們剛才有記住尺寸2，這時就要把尺寸2的數值換上去。2400改成2400(剛好不變)；3393改成1350。

can.width = 3200;
can.height = 4524;
  • 這兩句就更好解釋，width代表寬，就是所謂橫的長度；height代表高，也就是直的長度。看到這個3200是不是很眼熟？這個正是對應尺寸1，不過3200和4524是用於約A4尺寸的數值，因此一樣我們這邊要將尺寸1改上去，3200改3200(在此範例剛好不變)；4524改1800。

改好之後，指令如下。步驟五(巴哈的項目編號不會繼續編號只好這樣用文字說明)就是到開發者工具中主控臺(Console)輸入或貼上這串指令，並按下Enter等指令跑完，就能下載了。
// TrustedURL starting
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/2.5.1/jspdf.umd.min.js');
} else {
    trustedURL = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js';
}

// Download script starting - EDITED AND IMPROVED BY cirippo
let jspdfScript = document.createElement("script");

jspdfScript.onload = function () {
    // 使用新的全域變數名稱
    const { jsPDF } = window.jspdf;
    console.log(jsPDF.version);
    let pdf = new jsPDF('l', 'pt', [2400, 1350]);
    let elements = document.getElementsByTagName("img");
    for (let i = 0; i < elements.length; i++) {
        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 = 3200;
        can.height = 1800;
        con.drawImage(img, 0, 0);
        let imgData = can.toDataURL("image/jpeg", 1.0);
        pdf.addImage(imgData, 'JPEG', 0, 0);
        if (i !== elements.length - 1) {
            pdf.addPage();
        }
    }

    pdf.save("download.pdf");
    console.log('PDF generated and saved');
};

jspdfScript.src = trustedURL;
document.body.appendChild(jspdfScript);

我猜，看完剛剛的解說，一定會有人想說把基礎單位設成px就不用換算了。我只能說，千萬不要那麼做，最後下載的PDF會跑版，至於原因我不是很清楚(我猜跟ppi有點關係)。若很懶得找計算機換算，嫌麻煩的。我給另一種版本的指令，範例依舊是剛剛的報告投影片，然後把下面指令紅字那幾行的數字，全部都改填尺寸1(步驟三乘4後的數值)，當然也要記得把p改成l，或說視實際下載的PDF情況做修正。改好後一樣把所有指令都輸入(貼上)開發者工具的主控臺，並按下Enter等指令跑完，就能下載了。
// TrustedURL starting
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/2.5.1/jspdf.umd.min.js');
} else {
    trustedURL = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js';
}

// Download script starting - EDITED AND IMPROVED BY cirippo
let jspdfScript = document.createElement("script");

jspdfScript.onload = function () {
    // 使用新的全域變數名稱
    const { jsPDF } = window.jspdf;
    console.log(jsPDF.version);
    let pdf = new jsPDF('p', 'px', [2400, 3393]);
    let elements = document.getElementsByTagName("img");
    for (let i = 0; i < elements.length; i++) {
        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 = 3200;
        can.height = 4524;
        con.drawImage(img, 0, 0, can.width, can.height);
        let imgData = can.toDataURL("image/jpeg", 1.0);
        pdf.addImage(imgData, 'JPEG', 0, 0, 3200, 4524);
        if (i !== elements.length - 1) {
            pdf.addPage();
        }
    }

    pdf.save("download.pdf");
    console.log('PDF generated and saved');
};

jspdfScript.src = trustedURL;
document.body.appendChild(jspdfScript);

改好後的指令如下：
// TrustedURL starting
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/2.5.1/jspdf.umd.min.js');
} else {
    trustedURL = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js';
}

// Download script starting - EDITED AND IMPROVED BY cirippo
let jspdfScript = document.createElement("script");

jspdfScript.onload = function () {
    // 使用新的全域變數名稱
    const { jsPDF } = window.jspdf;
    console.log(jsPDF.version);
    let pdf = new jsPDF('l', 'px', [3200, 1800]);
    let elements = document.getElementsByTagName("img");
    for (let i = 0; i < elements.length; i++) {
        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 = 3200;
        can.height = 1800;
        con.drawImage(img, 0, 0, can.width, can.height);
        let imgData = can.toDataURL("image/jpeg", 1.0);
        pdf.addImage(imgData, 'JPEG', 0, 0, 3200, 1800);
        if (i !== elements.length - 1) {
            pdf.addPage();
        }
    }

    pdf.save("download.pdf");
    console.log('PDF generated and saved');
};

jspdfScript.src = trustedURL;
document.body.appendChild(jspdfScript);

看到這裡，我猜會有人說：「可是想載的PDF檔每頁尺寸不同欸。」我必須用一個成語回答：「舉一反三。」麻煩你各位自己想想看怎麼修改我此次教學用到的指令，我的教學是用最淺顯易懂的說法解決多數會遇到的問題，而並非萬事屋，別把所有問題的情境丟給我叫我想辦法，反正我很確定假設有活用此次教學內容是有辦法解決每頁尺寸不同這個問題的。

最後，我想說：「拜託接下來不要再叫我出教學破解word還是excel，又或是其他類型的檔案。」因為每種檔案都有不同方式，這會變成無限上綱根本教不完。而且很多檔案我也不知道怎麼破解，無從教起，或是就算我知道怎麼破解，只要我覺得破解的效果不是很好，我也不願意教。

總之，今天教學到此為止，掰。

創作回應

更多創作