JS脚本下载受保护PDF时出现Cannot read 'save'错误求助

错误原因 #

你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'save')，核心问题是doc变量从未被初始化就被调用了save方法：

• 只有当找到第一个符合blob:https://drive.google.com/前缀的图片时，代码才会执行doc = new jsPDF(...)创建PDF实例；如果页面中没有这类图片，或者滚动后图片未被正确捕获，doc会一直是undefined。
• 代码里的循环变量i没有用let声明，会成为全局变量，可能干扰其他逻辑执行。

修复步骤 #

1. 在调用doc.save前添加判断，确保doc已初始化，无有效内容时直接提示并返回。
2. 给所有循环中的i加上let声明，避免全局变量污染。
3. 微调滚动后的延迟时间，确保图片完全加载后再生成PDF。

修复后的完整代码 #

let jspdf = document.createElement("script");
jspdf.onload = function () {
    let pdfDocumentName = "Document";
    let doc;

    function generatePDF (){
        let imgTags = document.getElementsByTagName("img");
        let checkURLString = "blob:https://drive.google.com/";
        let validImgTagCounter = 0;
        // 给循环变量i添加let声明
        for (let i = 0; i < imgTags.length; i++) {

            if (imgTags[i].src.substring(0, checkURLString.length) === checkURLString){
                validImgTagCounter = validImgTagCounter + 1;
                let img = imgTags[i];

                let canvas = document.createElement('canvas');
                let context = canvas.getContext("2d");
                canvas.width = img.naturalWidth;
                canvas.height = img.naturalHeight;
                context.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
                let imgDataURL = canvas.toDataURL();

                let orientation;
                if (img.naturalWidth > img.naturalHeight){
                    orientation = "l";
                }else {
                    orientation = "p";
                }

                let scalefactor = 1.335;
                let pageWidth = img.naturalWidth * scalefactor;
                let pageHeight = img.naturalHeight * scalefactor;
                if (validImgTagCounter === 1){
                    doc = new jsPDF({
                        orientation: orientation,
                        unit: "px",
                        format: [pageWidth, pageHeight],
                    });
                    doc.addImage(imgDataURL, "PNG", 0, 0, img.naturalWidth, img.naturalHeight);
                }else{
                    doc.addPage([pageWidth, pageHeight] , orientation);
                    doc.addImage(imgDataURL, "PNG", 0, 0, img.naturalWidth, img.naturalHeight);
                }
            }
        }

        // 先判断doc是否存在，避免未初始化调用save
        if (!doc) {
            console.log("未找到有效图片，无法生成PDF");
            return;
        }
        pdfDocumentName = pdfDocumentName + ".pdf";
        doc.save(pdfDocumentName);
    }


    let allElements = document.querySelectorAll("*");
    let chosenElement;
    let heightOfScrollableElement = 0;

    // 给循环变量i添加let声明
    for (let i = 0; i < allElements.length; i++) {
        if ( allElements[i].scrollHeight>=allElements[i].clientHeight){
            if (heightOfScrollableElement < allElements[i].scrollHeight){
                heightOfScrollableElement = allElements[i].scrollHeight;
                chosenElement = allElements[i];
            }
        }
    }

    if (chosenElement && chosenElement.scrollHeight > chosenElement.clientHeight){
        console.log("Auto Scroll");

        let scrollDistance = Math.round(chosenElement.clientHeight/2);

        let loopCounter = 0;
        function myLoop(remainingHeightToScroll, scrollToLocation) {
            loopCounter = loopCounter+1;
            console.log(loopCounter);

            setTimeout(function() {
                if (remainingHeightToScroll === 0){
                    scrollToLocation = scrollDistance;
                    chosenElement.scrollTo(0, scrollToLocation);
                    remainingHeightToScroll = chosenElement.scrollHeight - scrollDistance;
                }else{
                    scrollToLocation = scrollToLocation + scrollDistance ;
                    chosenElement.scrollTo(0, scrollToLocation);
                    remainingHeightToScroll = remainingHeightToScroll - scrollDistance;
                }

                if (remainingHeightToScroll >= chosenElement.clientHeight){
                    myLoop(remainingHeightToScroll, scrollToLocation)
                }else{
                    // 增加延迟确保图片加载完成
                    setTimeout(function() {
                        generatePDF();
                    }, 2000)
                }

            }, 500)
        }
        myLoop(0, 0);

    }else{
        console.log("No Scroll");
        setTimeout(function() {
            generatePDF();
        }, 2000)
    }


};
jspdf.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js';
document.body.appendChild(jspdf);

内容的提问来源于stack exchange，提问作者Musa Khattak