下载按钮可点击但持续提示Failed-Network Error，寻求技术解决方案

问题根源分析 #

1. canvas.toDataURL参数非法：你传入的'image/pdf'不是canvas支持的MIME类型，canvas只能生成图片格式（如image/png、image/jpeg），无法直接输出PDF格式的base64数据。
2. PDF生成逻辑错误：直接将图片的base64数据伪装成PDF下载，本质是无效的PDF文件，浏览器识别后会触发错误。
3. data URL长度限制：即使改成图片格式，若生成的base64数据过大，浏览器会因data URL长度限制抛出网络错误。

修复方案1：下载为图片（JPG/PNG） #

修正MIME类型，优化下载逻辑的兼容性：

<div class="container-fluid row">
<div class="col-md-12">
    <button class="btn btn-success" id="downloadBtn">
        <i class="bi bi-download"></i> Download as JPG
    </button>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.2.2/html2canvas.min.js"></script>

<script>
function screenshotAndDownload() {
    const form = document.querySelector('.container-fluid.row');
    html2canvas(form).then((canvas) => {
        // 使用合法的图片MIME类型，0.9为JPG质量参数
        const imageData = canvas.toDataURL('image/jpeg', 0.9);
        downloadBase64File('image/jpeg', imageData, 'child_information');
    });
}

function downloadBase64File(contentType, base64Data, fileName) {
    const downloadLink = document.createElement("a");
    downloadLink.href = base64Data; // toDataURL已返回完整data URL，无需重复拼接
    const ext = contentType.split('/')[1];
    downloadLink.download = `${fileName}.${ext}`;
    // 临时添加到DOM再点击，提升浏览器兼容性
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
}

document.getElementById("downloadBtn").addEventListener("click", function () {
    console.log("Downloading");
    screenshotAndDownload();
});
</script>

修复方案2：正确生成并下载PDF #

利用jspdf将图片合法嵌入PDF文档，避免直接伪装格式：

<div class="container-fluid row">
<div class="col-md-12">
    <button class="btn btn-success" id="downloadBtn">
        <i class="bi bi-download"></i> Download as PDF
    </button>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.2.2/html2canvas.min.js"></script>

<script>
const { jsPDF } = window.jspdf;

function screenshotAndDownload() {
    const form = document.querySelector('.container-fluid.row');
    html2canvas(form).then((canvas) => {
        // 按A4纸尺寸适配图片
        const imgWidth = 210; // A4宽度（mm）
        const pageHeight = 297; // A4高度（mm）
        const imgHeight = (canvas.height * imgWidth) / canvas.width;
        let heightLeft = imgHeight;

        const doc = new jsPDF('p', 'mm', 'a4');
        let position = 0;

        // 添加图片到PDF
        doc.addImage(canvas.toDataURL('image/png'), 'PNG', 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;

        // 图片过长时自动分页
        while (heightLeft >= 0) {
            position = heightLeft - imgHeight;
            doc.addPage();
            doc.addImage(canvas.toDataURL('image/png'), 'PNG', 0, position, imgWidth, imgHeight);
            heightLeft -= pageHeight;
        }

        // 调用jspdf原生方法下载
        doc.save('child_information.pdf');
    });
}

document.getElementById("downloadBtn").addEventListener("click", function () {
    console.log("Downloading");
    screenshotAndDownload();
});
</script>

补充说明 #

你之前改JPG仍报错的原因：不仅toDataURL的MIME类型错误，还重复拼接了data URL前缀，导致生成的下载链接无效，触发浏览器网络错误。

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