跨页面调用JS实现PDF生成遇阻：函数调用失败及jQuery引用问题求助

一、先修复jQuery未引用的报错 #

• 确认两个页面的脚本加载顺序：必须先加载jQuery，再加载script.js。检查浏览器控制台的Network标签，确认jQuery文件返回200状态码，若CDN加载不稳定，可换成本地引入（先下载jQuery文件到项目目录，再用<script src="./jquery.min.js"></script>引入）。
• 可在script.js开头添加安全判断：

if (typeof $ === 'undefined') {
    console.error('jQuery未加载');
    return;
}

二、跨页面触发PDF生成的解决方案 #

浏览器中不同页面是独立执行上下文，无法直接调用其他页面的函数，以下是三种可行方案：

方案1：通过URL参数触发表单页生成逻辑 #

1. 修改首页按钮点击逻辑，打开表单页并携带触发参数：

<!-- homepage.html 按钮代码 -->
<form>
    <input style="position:absolute; left:100px; top:350px;" type="button" id="generate_pdf" value="Generate PDF">
</form>
<script>
$('#generate_pdf').on('click', function () {
    window.open('表单页.html?generate=1', '_blank');
});
</script>

2. 修改表单页的script.js，检测URL参数并自动执行PDF生成：

$(document).ready(function () {  
    var form = $('.form'),  
    cache_width = form.width(),  
    a4 = [595.28, 841.89];

    // 检测URL中的触发参数
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('generate') === '1') {
        $('body').scrollTop(0);
        generatePDF();
    }

    function generatePDF() {  
        getCanvas().then(function (canvas) {  
            var img = canvas.toDataURL("image/png"),  
             doc = new jsPDF({  
                 unit: 'px',  
                 format: 'a4'  
             });  
            doc.addImage(img, 'JPEG', 20, 20);  
            doc.save('Lasku.pdf');  
            form.width(cache_width);  
        });  
    }  
      
    function getCanvas() {  
        form.width((a4[0] * 1.33333) - 55).css('max-width', 'none');  
        return html2canvas(form, {  
            imageTimeout: 2000,  
            removeContainer: true  
        });  
    }
});

注意：需在两个页面的head中补充html2canvas的引入：<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

方案2：用localStorage监听事件触发 #

1. 首页点击按钮时设置本地存储标记：

$('#generate_pdf').on('click', function () {
    localStorage.setItem('generatePDF', 'true');
    window.open('表单页.html', '_blank');
});

2. 表单页监听localStorage变化并执行生成：

$(document).ready(function () {  
    var form = $('.form'),  
    cache_width = form.width(),  
    a4 = [595.28, 841.89];

    // 监听本地存储变化
    window.addEventListener('storage', function(e) {
        if (e.key === 'generatePDF' && e.newValue === 'true') {
            $('body').scrollTop(0);
            generatePDF();
            localStorage.removeItem('generatePDF');
        }
    });

    // 页面加载时也检查一次标记
    if (localStorage.getItem('generatePDF') === 'true') {
        $('body').scrollTop(0);
        generatePDF();
        localStorage.removeItem('generatePDF');
    }

    // 保留原有的generatePDF和getCanvas函数
    function generatePDF() {  
        getCanvas().then(function (canvas) {  
            var img = canvas.toDataURL("image/png"),  
             doc = new jsPDF({  
                 unit: 'px',  
                 format: 'a4'  
             });  
            doc.addImage(img, 'JPEG', 20, 20);  
            doc.save('Lasku.pdf');  
            form.width(cache_width);  
        });  
    }  
      
    function getCanvas() {  
        form.width((a4[0] * 1.33333) - 55).css('max-width', 'none');  
        return html2canvas(form, {  
            imageTimeout: 2000,  
            removeContainer: true  
        });  
    }
});

方案3：将表单页作为iframe嵌入首页 #

无需打开新页面，直接在首页嵌入表单页iframe，实现函数调用：

1. 首页添加iframe和按钮逻辑：

<!-- homepage.html -->
<form>
    <input style="position:absolute; left:100px; top:350px;" type="button" id="generate_pdf" value="Generate PDF">
</form>
<iframe id="formFrame" src="表单页.html" style="display:none;"></iframe>

<script>
$('#generate_pdf').on('click', function () {
    const iframeWindow = document.getElementById('formFrame').contentWindow;
    iframeWindow.generatePDF();
});
</script>

2. 修改表单页的script.js，将生成函数暴露到全局：

$(document).ready(function () {  
    var form = $('.form'),  
    cache_width = form.width(),  
    a4 = [595.28, 841.89];

    // 把生成函数暴露到全局window对象
    window.generatePDF = function() {  
        getCanvas().then(function (canvas) {  
            var img = canvas.toDataURL("image/png"),  
             doc = new jsPDF({  
                 unit: 'px',  
                 format: 'a4'  
             });  
            doc.addImage(img, 'JPEG', 20, 20);  
            doc.save('Lasku.pdf');  
            form.width(cache_width);  
        });  
    }  
      
    function getCanvas() {  
        form.width((a4[0] * 1.33333) - 55).css('max-width', 'none');  
        return html2canvas(form, {  
            imageTimeout: 2000,  
            removeContainer: true  
        });  
    }
});

额外注意事项 #

• 确保两个页面在同一域名下（本地测试用http-server等工具启动，不要直接打开file://协议的文件），避免同源策略限制。
• 测试时检查控制台报错，排查脚本加载或DOM选择器的问题。

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